JavaScript学习笔记

最新推荐文章于 2022-06-30 19:24:41 发布

shy014

最新推荐文章于 2022-06-30 19:24:41 发布

阅读量476

点赞数 1

本文链接：https://blog.csdn.net/qq_32393893/article/details/104820556

版权

JavaScript 网页的行为

JavaScript能干嘛：

直接写入 HTML 输出流：JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

对事件的反应

改变 HTML 内容

改变 HTML 图像。。。。。

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

您只能在 HTML 输出流中使用 document.write。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

您只能在 HTML 页面加载的时候使用 document.write。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

document.getElementById("demo") 使用 id 属性来查找 HTML 元素，然后使用innerHTML = "修改元素的内容" 修改查找到元素的 HTML 内容

 <!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

变量是一个名称。字面量是一个值。

引用一个函数 = 调用函数(执行函数内的语句)。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>点击这里来创建变量，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var carname="Volvo";
	document.getElementById("demo").innerHTML=carname;
}
</script>

</body>
</html>

一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。

var car = "Fiat"; 变量 car 设置值为 "Fiat" :

var car = {type:"Fiat", model:500, color:"white"}; 对象也是一个变量，但对象可以包含多个值（多个变量）。

在以上实例中，3 个值 ("Fiat", 500, "white") 赋予变量 car。

在以上实例中，3 个变量 (type, model, color) 赋予变量 car。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

不加括号输出函数表达式

加括号输出函数执行结果

局部 JavaScript 变量：函数内部声明的变量，只有该函数才能识别，所以不用函数可以声明相同的变量，函数运行完毕，该变量就会被删除。

var var1 = 1; // 不可配置全局属性 var2 = 2; // 没有使用 var 声明，可配置全局属性

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 正则表达式

正则表达式是由一个字符序列形成的搜索模式,可用于所有文本搜索和文本

替换操作。

var patt=/runoob/i

/runoob/i 是一个正则表达式

runoob s是正则表达式主体（用于检索）。

i 是一个修饰符（搜索不区分大小写）

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：

var str = "Visit Runoob!"; var n = str.search(/Runoob/i);

输出结果为：

<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
document.getElementById("demo").innerHTML = txt;
}

正则表达式方法

var patt = /e/;
patt.test("The best things in life are free!"); 搜索字符串中是否有e

true

等价于

/e/.test("The best things in life are free!")

exec()

/e/.exec("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为:

JavaScript 错误 - throw、try 和 catch

JavaScript 将抛出(throw)一个错误:

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。

当错误发生时，JavaScript 引擎通常会停止，并生成一个错误消息。

try 进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

实例

在下面的例子中，我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

var txt=""; 
function message() 
{ 
    try { 
        adddlert("Welcome guest!"); 
    } catch(err) { 
        txt="本页有一个错误。\n\n"; 
        txt+="错误描述：" + err.message + "\n\n"; 
        txt+="点击确定继续。\n\n"; 
        alert(txt); 
    } 
}

finally 语句

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

实例
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

2020年4月1日

JavaScript 调试

没有调试工具是很难去编写 JavaScript 程序的，你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。

很多浏览器都内置了调试工具，有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

debugger 关键字用于停止执行 JavaScript，并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

var x = 15 * 5;

debugger;

document.getElementbyId("demo").innerHTML = x;

JavaScript 变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

hoisting(变量提升):函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 只有声明的变量会提升，初始化的不会。

var x = 5; // 初始化 x
var y = 7; // 初始化 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y

结果：57

和

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y

var y = 7; // 初始化 y

结果：x 为：5，y 为：undefined

y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

JavaScript 严格模式(use strict)

JavaScript 严格模式（strict mode）即在严格的条件下运行，即不能使用未声明的变量。

x = 3.14;       // 不报错
myFunction();

function myFunction() {
   "use strict";
    y = 3.14;   // 报错 (y 未定义)
}

在函数内部声明是局部作用域 (只在函数内使用严格模式)

"use strict" 指令只允许出现在脚本或函数的开头。

JavaScript 使用误区（没有学完，稍后再学）

赋值运算符应用错误

在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。

f 条件语句返回 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 语句中出现，switch 语句会使用恒等计算符(===)进行比较:

以下实例会执行 alert 弹窗：

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

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

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

加法与连接注意事项

加法是两个数字相加。

连接是两个字符串连接。

JavaScript 的加法和连接都使用 + 运算符。

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

浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：

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

为解决以上问题，可以用整数的乘除法来解决：

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

JavaScript 字符串分行

JavaScript 允许我们在字符串中使用断行语句:

var x =
"Hello World!";

但是，在字符串中直接使用回车换行是会报错的：

var x = "Hello
World!";

字符串断行需要使用反斜杠(\)，如下所示:

var x = "Hello \
World!";

错误的使用分号

以下实例中，if 语句失去方法体，原 if 语句的方法体作为独立的代码块被执行，导致错误的输出结果。

由于分号使用错误，if 语句中的代码块就一定会执行：

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

由于使用了封号，随意导致code block一定会执行，根本就不用判断if里面的条件

JavaScript 表单

JavaScript 表单验证

判断表单字段(fname)的值是否存在

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

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

</body>
</html>

JavaScript 验证输入的数字

<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h1>JavaScript 验证输入</h1>

<p>请输入 1 到 10 之间的数字：</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo"></p>

<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>

</body>
</html>

HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性：

验证表单数据是否为空？
验证输入是否是一个正确的email地址？
验证日期是否输入正确？
验证表单输入内容是否为数字型

必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }
}


<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="提交">
</form>

2020年4月2日

JavaScript 验证 API

约束验证 DOM 方法

Property Description

checkValidity() 如果 input 元素中的数据是合法的返回 true，否则返回 false。

setCustomValidity()

Property	Description
checkValidity()	如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()	设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下： `setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)`

设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。

使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：

setCustomValidity('') 
setCustomValidity(null) 
setCustomValidity(undefined)

以下实例如果输入信息不合法，则返回错误信息：

未完待续。。。。

JavaScript 保留关键字

在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

上面的this指向person对象，因为person对象是fullName方法的所有者

this 指向调用它所在方法的对象。

单独使用 this

单独使用 this，则它指向全局(Global)对象。

在浏览器中，window 就是该全局对象为 [object Window]:

var x = this;

严格模式下，如果单独使用，this 也是指向全局(Global)对象

"use strict"; var x = this;

函数中使用 this（默认）

在函数中，函数的所属者默认绑定到 this 上。

在浏览器中，window 就是该全局对象为 [object Window]:

function myFunction() {

return this;

}

函数中使用 this（严格模式）

严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

"use strict";

function myFunction() {

return this;

}

事件中的 this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：

<button οnclick="this.style.display='none'"> 点我后我就消失了 </button>

显式函数绑定

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：

var person1 = { fullName: function() { return this.firstName + " " + this.lastName; } } var person2 = { firstName:"John", lastName: "Doe", } person1.fullName.call(person2); // 返回 "John Doe"

2020年4月21日

JavaScript let 和 const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量。

JavaScript 块级作用域(Block Scope)

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

重新定义变量

使用 var 关键字重新声明变量可能会带来问题。

在块中重新声明变量也会重新声明块外的变量：

var x = 10; // 这里输出 x 为 10

{

var x = 2; // 这里输出 x 为 2

} // 这里输出 x 为 2

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。

var x = 10; // 这里输出 x 为 10

{

let x = 2; // 这里输出 x 为 2

} // 这里输出 x 为 10

循环作用域

使用 var 关键字：

var i = 5;

for (var i = 0; i < 10; i++) {

// 一些代码...

} // 这里输出 i 为 10

使用 let 关键字：

let i = 5;

for (let i = 0; i < 10; i++) {

// 一些代码...

} // 这里输出 i 为 5

在第一个实例中，使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。

在第二个实例中，使用 let 关键字，它声明的变量作用域只在循环体内，循环体外的变量不受影响。

局部变量

在函数体内使用 var 和 let 关键字声明的变量有点类似。

它们的作用域都是 局部的:

// 使用 var
function myFunction() {
    var carName = "Volvo";   // 局部作用域
}

// 使用 let
function myFunction() {
    let carName = "Volvo";   //  局部作用域
}

全局变量

在函数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似。

它们的作用域都是 全局的:

// 使用 var
var x = 2;       // 全局作用域

// 使用 let
let x = 2;       // 全局作用域

HTML 代码中使用全局变量

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。

在 HTML 中, 全局作用域是针对 window 对象。

使用 var 关键字声明的全局作用域变量属于 window 对象:

var carName = "Volvo"; // 可以使用 window.carName 访问变量

使用 let 关键字声明的全局作用域变量不属于 window 对象:

let carName = "Volvo"; // 不能使用 window.carName 访问变量

重置变量

使用 var 关键字声明的变量在任何地方都可以修改：

var x = 2; // x 为 2

var x = 3; // 现在 x 为 3

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量:

var x = 2;       // 合法

let x = 3; // 不合法 { var x = 4; // 合法 let x = 5 // 不合法 }

出去应急了回来继续学习

shy014

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

JavaScript网页的行为JavaScript能干嘛：直接写入 HTML 输出流：JavaScript 会在页面加载时向 HTML 的 <body> 写文本：对事件的反应改变 HTML 内容改变 HTML 图像。。。。。HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面...
复制链接

扫一扫