runoob js第七天

2019-04-23 本文已影响0人似是懂

JavaScript 使用误区

赋值运算符应用错误
if 条件语句返回 false (是我们预期的)因为 x 不等于 10

var x = 0;
if (x == 10)

if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true

var x = 0;
if (x = 10)

if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false

var x = 0;
if (x = 0)

赋值语句返回变量的值
比较运算符常见错误
在常规的比较中，数据类型是被忽略的
if 条件语句返回 true

var x = 10;
var y = "10";
if (x == y)

在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false

var x = 10;
var y = "10";
if (x == y)

switch 语句会使用恒等计算符(===)进行比较
以下实例会执行 alert 弹窗

var x = 10;
switch(x) {
    case 10: alert("Hello");
}

以下实例由于类型不一致不会执行 alert 弹窗

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

加法与连接注意事项
加法是两个数字相加。
连接是两个字符串连接。
加法和连接都使用 + 运算符

var x = 10 + 5;          // x 的结果为 15
var x = 10 + "5";        // x 的结果为 "105"

使用变量相加结果也不一致

var x = 10;
var y = 5;
var z = x + y;           // z 的结果为 15

var x = 10;
var y = "5";
var z = x + y;           // z 的结果为 "105"

浮点型数据使用注意事项
avaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.3
if (z == 0.3)            // 返回 false

可以用整数的乘除法来解决

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

JavaScript 字符串分行
字符串中可以使用断行语句

var x =
"Hello World!";

在字符串中不能直接使用回车换行，会报错
断行需要使用反斜杠()

var x = "Hello \
World!";

错误的使用分号
if 语句失去方法体，原 if 语句的方法体作为独立的代码块被执行，导致错误输出结果
由于分号使用错误，if 语句中的代码块就一定会执行

if (x == 19);
{
    // code block  
}

Return 语句使用注意事项
JavaScript 默认是在代码的最后一行自动结束

function myFunction(a) {
    var power = 10  
    return a * power
}

function myFunction(a) {
    var power = 10;
    return a * power;
}
两个实例返回结果是一样的(一个有分号一个没有)

也可以使用多行来结束一个语句

function myFunction(a) {
    var
    power = 10;  
    return a * power;
}

但是，以下实例结果会返回 undefined
function myFunction(a) {
    var
    power = 10;  
    return
    a * power;
}

因为在 JavaScript 中，实例 4 的代码与下面的代码一致
function myFunction(a) {
    var
    power = 10;  
    return;       // 分号结束，返回 undefined
    a * power;
}
解析
如果是一个不完整的语句，如下所示:
var
JavaScript 将尝试读取第二行的语句：
power = 10;
但是由于这样的语句是完整的:
return
JavaScript 将自动关闭语句:
return;
在 JavaScript 中，分号是可选的 。
由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。
不用对 return 语句进行断行

数组中使用名字来索引
使用名字来作为索引的数组称为关联数组(或哈希)
JavaScript 不支持使用名字来索引数组，只允许使用数字索引

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length 返回 3
var y = person[0];             // person[0] 返回 "John"

对象使用名字作为索引
使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。
执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length 返回 0
var y = person[0];             // person[0] 返回 undefined

定义数组元素，最后不能添加逗号
添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。

正确的定义方式

points = [40, 100, 1, 5, 25, 10];

定义对象，最后不能添加逗号
错误的定义方式

websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}

正确的定义方式

websites = {site:"菜鸟教程", url:"www.runoob.com", like:460}

Undefined 不是 Null
null 用于对象, undefined 用于变量，属性和方法。
对象只有被定义才有可能为 null，否则为 undefined。
如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错
错误的使用方式

if (myObj !== null && typeof myObj !== "undefined")

正确的方式是我们需要先使用 typeof 来检测对象是否已定义

if (typeof myObj !== "undefined" && myObj !== null)

程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的

for (var i = 0; i < 10; i++) {
    // some code
}
return i;
代码的的变量 i 返回 10，而不是 undefined

JavaScript 表单

JavaScript 表单验证
以下实例代码用于判断表单字段(fname)值是否存在，如果存在，则弹出信息，否则阻止表单提交

JavaScript 实例
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

以上 JavaScript 代码可以通过 HTML 代码来调用

HTML 表单实例
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

JavaScript 验证输入的数字
JavaScript 常用于对输入数字的验证

<script>
function myFunction() {
    var x, text;
    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;
    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    } else {
        text = "输入正确";
    }
document.getElementById("demo").innerHTML = text;
}
</script>

HTML 表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证
数据验证
数据验证用于确保用户输入的数据是有效的。
典型的数据验证有：

必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?

大多数情况下，数据验证用于确保用户正确输入数据。
数据验证可以使用不同方法来定义，并通过多种方式来调用。
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证 side validation是在数据发送到服务器前，在浏览器上完成验证。
HTML 约束验证
HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 约束验证基于：

HTML 输入属性
CSS 伪类选择器
DOM 属性和方法

约束验证 HTML 输入属性

disabled    规定输入的元素不可用
max         规定输入元素的最大值
min         规定输入元素的最小值
pattern     规定输入元素值的模式
required    规定输入元素字段是必需的
type        规定输入元素的类型

约束验证 CSS 伪类选择器

:disabled   选取属性为 "disabled" 属性的 input 元素
:invalid    选取无效的 input 元素
:optional   选择没有"required"属性的 input 元素
:required   选择有"required"属性的 input 元素
:valid      选取有效值的 input 元素

runoob js第七天

JavaScript 使用误区

JavaScript 表单

猜你喜欢

热点阅读