js笔记
-
alert:弹窗
-
根据id更改html内容、样式
文本
菜鸟教程(runoob.com)
<h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改变 HTML 元素的内容。 </p> <script> function myFunction() { x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改变内容 } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html> x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式
图像
以上实例中代码 element.src.match("bulbon") 的作用意思是:检索 里面 src 属性的值有没有包含 bulbon 这个字符串,如果存在字符串 bulbon,图片 src 更新为 bulboff.gif,若匹配不到 bulbon 字符串,src 则更新为 bulbon.gif -
调用外部js
chrome使用js脚本
- console窗口直接写,按回车执行
输出
-
使用 window.alert() 弹出警告框。
<h1>我的第一个页面</h1> <p>我的第一个段落。</p> <script> window.alert(5 + 6); </script> </body>
-
使用 document.write() 方法将内容写到 HTML 文档中。
<h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <script> document.write(Date()); </script> </body> </html>
-
使用 innerHTML 写入到 HTML 元素。
<h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>
-
使用 console.log() 写入到浏览器的控制台。
<h1>我的第一个 Web 页面</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
数据类型
-
Number:整数 小数 科学计数,所有数据都是以 64 位浮点型数据(float) 来存储
-
String: “”或‘’,字符串加数字等于字符串
var sln = txt.length;<script> var x = "John"; // x是一个字符串 var y = new String("John"); // y是一个对象 document.getElementById("demo").innerHTML =typeof x + " " + typeof y; var x = "John"; var y = new String("John"); (x === y) // === 为绝对相等,即数据类型与值都必须相等。结果为 false,因为 x 是字符串,y 是对象 </script>
-
Boolean:布尔
-
Symbol:表示独一无二的值
-
Array:数组[40, 100, 1, 5, 25, 10]
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";var cars=new Array("Saab","Volvo","BMW");
-
Object:对象,类似cpp的struct?
-
Function:函数function myFunction(a, b)
-
RegExp:正则
-
Date :日期
-
var:定义变量var x, length
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
非严格模式下函数内给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明,可配置全局属性console.log(this.var1); // 1 console.log(window.var1); // 1 console.log(window.var2); // 2 delete var1; // false 无法删除 console.log(var1); //1 delete var2; console.log(delete var2); // true console.log(var2); // 已经删除 报错变量未定义
-
注释://
-
换行:\
语句
用法和cpp差不多
-
for有个Python一样的用法
var person={fname:"Bill",lname:"Gates",age:56};for (x in person) // x 为属性名 { txt=txt + person[x]; }
-
js标签,break 和 continue 语句仅仅是能够跳出代码块的语句。
break labelname; //break 语句(不带标签引用),只能用在循环或 switch 中。
continue labelname;//continue 语句(带有或不带标签引用)只能用在循环中。<script> cars=["BMW","Volvo","Saab","Ford"]; list:{ document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list; document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); } </script>
-
typeof:检测变量的数据类型
-
undefined:是一个没有设置值的变量,任何变量都可以通过设置值为undefined来清空
-
constructor:返回所有 JavaScript 变量的构造函数。
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function()<p>判断是否为数组。</p> <p id="demo"></p> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = isArray(fruits); function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; } </script>
-
正则表达式:/正则表达式主体/修饰符(可选)
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
/e/.test("The best things in life are free!")//true
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
/e/.exec("The best things in life are free!");//e -
异常
finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}<script> function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "值为空"; if(isNaN(x)) throw "不是数字"; x = Number(x); if(x < 5) throw "太小"; if(x > 10) throw "太大"; } catch(err) { message.innerHTML = "错误: " + err; } } </script>
-
let 声明的变量只在 let 命令所在的代码块内有效。
var x = 10;
// 这里输出 x 为 10
{
let x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 10 -
死链接
点我没有反应的!
点我定位到指定位置!
...
尾部定位点
事件
变量提升
JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。
JavaScript 只有声明的变量会提升,初始化的不会。
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
var y = 7; // 初始化 y
// y 输出了 undefined,这是因为变量声明 (var y) 提升了,但是初始化(y = 7) 并不会提升,所以 y 变量是一个未定义的变量。
严格模式
在函数内部声明是局部作用域 (只在函数内使用严格模式):
-
不允许使用未声明的变量
-
不允许删除变量或对象。
-
不允许删除函数。
-
不允许变量重名:
-
不允许使用八进制:
-
不允许使用转义字符:
-
不允许对只读属性赋值:
"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});obj.x = 3.14; // 报错
-
不允许对一个使用getter方法读取的属性进行赋值
"use strict";
var obj = {get x() {return 0} };obj.x = 3.14; // 报错
-
不允许删除一个不允许删除的属性:
-
禁止this关键字指向全局对象。
function f(){
return !this;
}
// 返回false,因为"this"指向全局对象,"!this"就是falsefunction f(){ "use strict"; return !this; } // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。
验证
-
表单验证
//用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息,阻止表单提交:
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form> </body> </html> //自动验证非空 <form action="demo_form.php" method="post"> <input type="text" name="fname" required="required"> <input type="submit" value="提交"> </form>
-
html约束验证
-
约束验证
<p>输入数字并点击验证按钮:</p> <input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">验证</button> <p>如果输入的数字小于 100 或大于300,会提示错误信息。</p> <p id="demo"></p> <script> function myFunction() { var inpObj = document.getElementById("id1"); if (inpObj.checkValidity() == false) { document.getElementById("demo").innerHTML = inpObj.validationMessage; } else { document.getElementById("demo").innerHTML = "输入正确"; } } </script> </body>
this
- 在对象方法中, this 指向调用它所在方法的对象。
fullName : function() {
return this.firstName + " " + this.lastName;
} - 单独使用 this,则它指向全局(Global)对象。
var x = this; - 在函数中,函数的所属者默认绑定到 this 上。 在浏览器中,window 就是该全局对象为 [object Window]:
function myFunction() {
return this;
} - 在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素:
- 显式函数绑定
在 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"
异步编程
- 回调函数
既然 setTimeout 会在子线程中等待 3 秒,在 setTimeout 函数执行之后主线程并没有停止
setTimeout(function () {
document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000); - AJAX
- Promise:Promise 构造函数只有一个参数,是一个函数,这个函数在构造之后会直接被异步运行,所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。
Promise 类有 .then() .catch() 和 .finally() 三个方法,这三个方法的参数都是一个函数,.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列,.catch() 则是设定 Promise 的异常处理序列,.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行,有任何异常都会直接跳到 catch 序列:
new Promise(function (resolve, reject) {
var a = 0;
var b = 1;
if (b == 0) reject("Divide zero");
else resolve(a / b);
}).then(function (value) {
console.log("a / b = " + value);
}).catch(function (err) {
console.log(err);
}).finally(function () {
console.log("End");
});
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步