简介
JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 与 Java 的区别
JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是在设计上。
Java 是更复杂的编程语言,由 Sun 公司发明,现在属于 Oracle 公司。
ECMAScript—ES,是 JavaScript 标准的官方名称。
JavaScript 由工作于 Netscape 的 Brendan Eich。
ES 简介
1997 年,JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA)。第 39 技术委员会(TC39)被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”(http://www.ecma-international.org/memento/TC39.htm)。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262,该标准定义了名为 ECMAScript 的全新脚本语言。
在接下来的几年里,国际标准化组织及国际电工委员会(ISO/IEC)也采纳 ECMAScript 作为标准(ISO/IEC-16262)。从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 ECMAScript 作为 JavaScript 实现的基础。
ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。
如何编写 JS
1.1、页面嵌入
页面嵌入,一般情况下是在 head 标签中嵌入 script 标签,该标签可以直接在开始标签和结束标签之间编写 JS 代码,也可以导入/引入外部的 JS 文件;也可以在 body 标签中或 body 标签之后嵌入 script 标签,编写代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>helloworld</title> <script> /* 编写JS代码 */ /* 声明一个helloworld函数 */ function helloWorld() { //弹出对话框显示指定的字符串信息. alert("hello JS"); //在控制台打印指定的字符串信息,相当于Java中System.out.println() console.log("Hello JS"); } //调用helloworld()函数 helloWorld(); </script> </head> <body> </body> </html>
复制
1.2、JS 注释
除了 javadoc 专用注释以外,和 Java 中的注释一样使用,此处省略。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>body js</title> <!-- 一般不用事先有document,去编写JS代码时,放在此处编写 --> </head> <body> <!-- 一般情况下,是在运行时,实现使用JS控制一些动态的数据,在body中编写 --> <script> function hello() { console.log("hello JavaScript") } hello() </script> </body> <!-- 一般必须要现有document然后才能够去编写JS代码时,放在此处编写 --> <script> function world() { console.log("JS World") } world() </script> </html>
复制
1.4、独立 js 文件使用
单独创建一个后缀为*.js 格式文档,在该文档中编写需要的 JS 代码,这种写法,一般是,该 js 代码是由多个 HTML 页面需要引用/共用,编写以后,通过
function hello() { console.log("Hello World JavaScript"); } //调用函数hello() hello()
复制
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>外部JS文档引入</title> <script src="../js/demo.js"></script> </head> <body> </body> </html>
复制
变量
变量的命名和声明与 Java 一样,也是区分大小写,编写规范和 Java 一样,此处省略。
和 Java 不一样的是如果变量声明后,没有给值,此时该变量的值为 undefined。
JS 中变量的声明格式:
var 变量名; 全局变量推荐使用 var
let 变量名; 一般定义块级变量使用 let
const 变量名;这是定义/声明的常量,JS 中的常量定义后立刻初始化
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变量</title> <script> //声明一个全局变量,由于初始化给的值是123数值,因此a变量是Number类型 var a = 123; //声明一个全局变量,由于初始化给的值是"hello"字符串,因此b变量是String类型 let b = "hello"; //声明一个常量 const c = false; var A = "world"; let a1 = "123"; let a2 = "3"; let b1; //将指定变量的数据在当前页面中打印出来 document.write(a); document.write(b); document.write(c,"<br/>"); document.write(c+"<br/>"); /* 票号中${表达式}这是调用,其他都是按照字符串去处理 */ document.write(`a1 = ${a1}<br/>`); document.writeln(A) /* 以前是按照a1和a2中的数据来确定是连接操作还是计算操作 如果两个变量中是数值数据,变量是字符串类型的数值还是Number类型的 数值都可以进行加法运行,也有可能进行链接运算 */ document.write(a1+a2); console.log(a1+a2); //由于b1没有初始化,因此页面上打印了undefined document.write(b1); </script> </head> <body> </body> </html>
复制
数据类型
JS 中数据类型分为基本数据类型(数值类型)和引用数据类型(对象类型)。
1.1、基本数据类型
值类型(基本数据类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未
定义(Undefined)、Symbol。
1.1.1、String
字符串类型,在JS中单引号’ '、双引号" "、格式化`` 都是字符串类型,格式化符合和单引号双引号的区别是,单引号双引号中所有的数据都是字符串,并按照原来的样子进行输出,而格式化符号中可以包含变量的调用以及输出,调用的格式是${变量名}
1.1.2、Number数值类型
数值/数字类型包括整数型、浮点型。
typeof表示获取变量或数据的类型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>获取数据类型</title> </head> <body> <script> var a = 123; let b = 'hello'; const c = true; //通过typeof查看变量以及常数值的数据类型 console.log(typeof a);//number类型 console.log(typeof b);//string类型 console.log(typeof c);//boolean类型 console.log(typeof 3.14);//number类型 console.log(typeof "world");//string类型 console.log(typeof `abc`);//string类型 </script> </body> </html>
复制
1.1.3、Undefined未定义的值
Undefined这个值表示变量不含有值/表示变量没有值。
1.1.4、Null空值
可用于判断某个变量是否为null
1.1.5、Symbol
符号型,标记型
前言:
ES5以及之前的对象的属性名都是字符串,容易造成命名冲突,即重名。
概述
ES6中添加了一种原始数据类型Symbol
特点:
1、Symbol属性对应的值是唯一的,解决了命名冲突的问题。
2、Symbol值不能与其他数据进行计算,包括同字符串拼接。
3、forin、forof遍历时,不会遍历Symbol属性。
注意:ES6引入了一种新的数据类型Symbol,该类型表示独一无二的值,最大的用法是用来定义对象的唯一性属性名,其永远不会重复。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>symbol</title> </head> <body> <script> //直接输出Symbol类型的变量 console.log(Symbol()); //声明一个变量a,并赋值为一个Symbol类型的值 var a = Symbol(); console.log(a); var b = "abc"; var c = "abc"; //判断变量b和变量c是否相等,只要内容一样就是相等的 console.log(b == c); var d = Symbol("abc"); var e = Symbol("abc"); console.log(d === e); let a1 = 123; let a2 = "123"; /* 由于a1和a2的值一样,此处结果为true,==不会比较类型是否相等,只比较值是否相等, 如果值相等,则结果为true,否则为false */ console.log(a1 == a2);//true /* 由于a1和a2的值一样,但是类型不一样,因此此处结果为false, ===即比较值是否相等,还比较类型是否相等 只有值和类型都相等,结果才为true,否则为false */ console.log(a1 === a2);//false </script> </body> </html>
复制
1.2、引用数据类型
引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。
1.2.1、Object对象
Object对象引用数据类型。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Object</title> </head> <body> <script> console.log(Object); //Object对象 var a = new Object(); console.log(a); //String字符串对象 var b = new String(); console.log(b); //数组对象 var c = new Array(); console.log(c); </script> </body> </html>
复制
1.2.2、 数组Array
格式:
1、修饰符 数组名 = new Array(小括号中元素根据自己的需求可有可无);
2、修饰符 数组名 = [元素1,…,元素N];
元素: 数组中存放的每一个数据
长度: 数组中存放的元素个数,可以通过 数组名.length 获取数组长度。
索引/下标: 元素在数组中的存放位置,数组索引从0开始,到 数组长度- 1 结束,即0 ~ 数组
名.length - 1
一维数组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数组</title> </head> <body> <script> //一维数组 //相当于Java的数组静态初始化 //声明一个数组 var a = new Array(123,321,true,"hello","world"); console.log(a); //声明一个数组 var b = ["hello",3.14,false,Symbol()]; console.log(b); //相当于Java中的数组动态初始化 var c = new Array(); c[0] = 678; c[1] = "hello"; console.log(c); </script> </body> </html>
复制
二维数组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二维数组</title> <script> //定义一个二维数组 var a = [[123,"hello"],[true,"world",3.14]]; //遍历二维数组 for(let i = 0;i < a.length;i++) { for(let j = 0;j < a[i].length;j++) { console.log(a[i][j]); } } console.log("-----------"); //forof for (let s of a) { for (let t of s) { console.log(t); } } console.log("-----------"); //forin for (let i in a) { for (let j in a[i]) { console.log(a[i][j]); } } </script> </head> <body> </body> </html>
复制
1.2.2.1、forof 循环
格式:
for(let 元素变量名 of 数组或集合对象)
{
循环体
}
如果元素变量名前面使用了 let,则表示该变量只能在当前的 for 语句中使用,是一个块级变量,否则是全局变量。
forof 相当于 Java 中的 foreach。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>forof</title> </head> <body> <script> var a = new Array(123,"hello",true,6.78); //遍历数组a中的元素 for(abc of a) { console.log(abc); } </script> </body> </html>
复制
1.2.2.2、forin 循环
格式:
for(let 下标变量名/索引变量名 in 数组或集合对象)
{
循环体
}
备注:
1、forin 中的下标/索引是 Number 类型。
2、如果下标变量名/索引变量名前面使用了 let,则表示该下标变量名/索引变量名只能在当前的 for 语句中使用,是一个块级变量,否则是全局变量。
forof 与 forin 的区别:
1、forof 小括号中 of 关键字前面是元素的变量名;而 forin 小括号中 in 关键字前面是元素的下标/索引。
2、forof 小括号中的关键字是 of;forin 小括号中的关键字是 in。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>forof</title> </head> <body> <script> var a = new Array(123,"hello",true,6.78); //遍历数组a中的元素 for(abc of a) { console.log(abc); } console.log("--------------"); //使用forin遍历数组a中的元素 for (let i in a) { console.log(a[i]); } //使用let修饰i变量以后,此处运行出错 //console.log("i---",i); </script> </body> </html>
复制
1.3、 值类型(原始类型)和引用类型:
值类型(原始类型)数据:
类型包含: String、Number、Boolean、Undefined、Null
内存分布:栈内存中
值类型传递的是值。
引用类型数据:
类型包含: 除值类型以外
内存分布:堆内存区
引用类型数据传递的是引用地址,和 java 中一样。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>datatype</title> </head> <body> <script> var a = new Array(123,"hello"); var b = 123; var c = b; var d = a; //重新为c赋值 c = 678; //将d下标为0处的值修改为"world" d[0] = "world"; console.log("a = ",a); console.log("b = ",b); console.log("c = ",c); console.log("d = ",d); var abc = 123;//abc是Number类型 console.log("abc---",typeof abc); abc = "hello";//abc是String类型 console.log("abc===",typeof abc); abc = true;//abc是boolean类型 console.log("abc***",typeof abc); </script> </body> </html>
复制
函数
函数声明的格式:
function [ 函数名 ](形参 1,…,形参 N)
{
函数体
}
调用:
函数名([ 实参 1, …,实参 N]);
备注:在 JS 中实参和形参不是必须,可以传递也可以不传递。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数</title> <script> //声明hello函数 function hello(a,b,c) { console.log("a = ",a); console.log("b = ",b); console.log("c = ",c); console.log("hello()---"); } function hello(a,b) { console.log("a --- ",a); console.log("b --- ",b); console.log("hello()***"); } function hello(a) { console.log("a --- ",a); console.log("hello()***"); } //JS中不存在函数的重载,始终调用的是最后一个函数 function hello() { console.log("hello()###"); } //调用函数hello() hello(123,"hello",true,false); //声明一个匿名函数 /* abc=123,haha="hello"表示设置形参的默认值, 如果不传递值,则使用默认值,如果传递值则使用传递 过来的值 */ var ft = function(abc=123,haha="hello") { console.log("acb = ",abc); console.log("haha = ",haha); console.log("匿名函数"); } //调用匿名函数ft() ft(678,"world"); //Lambda表达式 var world = (a,b) => { console.log("a = ",a); console.log("b = ",b); }; world(123,678); </script> </head> <body> </body> </html>
复制
DOM 操作
HTML 文档对象模型(HTML Document Object Model)定义了访问和处理 HTML 文档的标准方法。
1.1、获取 DOM 对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM</title> <style> span { background-color: aqua; } </style> </head> <body> <!-- οnclick="dj()"当id是btn的这个按钮点击时调用dj()这个函数 --> <button id="btn" onclick="dj()">按钮</button> <button id="btn1"><a href="">普通按钮</a></button> <button id="btn2">DOM按钮</button> <div id="dv"> <span>span</span> </div> </body> <script> //获取id是btn的这个DOM对象 var btn = document.getElementById("btn"); console.log(btn); function dj() { //innerText只操作文本内容 // document.getElementById("btn1").innerText="点击后的按钮"; //document.getElementById("dv").innerHTML= "div--span"; // let doc = document.getElementById("btn1").innerText; let doc = document.getElementById("btn1").innerHTML; // let doc = document.getElementById("dv").innerText; // let doc = document.getElementById("dv").innerHTML; console.log(doc); } </script> </html>
复制
JS 操作 CSS
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS CSS Dom</title> </head> <body> <button id="btn">点击处理DIV效果</button> <div id="dv">div</div> </body> <script> //使用编程式绑定事件 let btn = document.getElementById("btn"); btn.onclick = function() { let dv = document.getElementById("dv"); //设置dv这个div的边框 dv.style.border = "1px solid black"; //设置dv这个div的宽 dv.style.width = "200px"; //设置dv这个div的高度 dv.style.height = "200px"; } </script> </html>
复制
1.2、JQuery 操作 DOM
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS CSS Dom</title> <script src="../js/jquery-3.7.1.min.js"></script> </head> <body> <button id="btn">点击处理DIV效果</button> <div id="dv">div</div> </body> <script> //使用编程式绑定事件 /* let btn = document.getElementById("btn"); btn.onclick = function() { let dv = document.getElementById("dv"); //设置dv这个div的边框 dv.style.border = "1px solid black"; //设置dv这个div的宽 dv.style.width = "200px"; //设置dv这个div的高度 dv.style.height = "200px"; } */ $(function(){ $("#btn").click(function(){ $("#dv").css({"border":"1px solid black", "background-color":"green","width":"200px"}).height("200px"); }); }); </script> </html>
复制
JSON
1.1、概念
JSON:JavaScript 对象表示法(JavaScript Object Notation)。
JSON 是存储和交换文本信息的语法。
什么是 JSON ?
● JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
● JSON 是轻量级的文本数据交换格式
● JSON 独立于语言 *
● JSON 具有自我描述性,更易理解
- JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
1.2、JSON 分为
JSON 对象格式:
{key1:value,…,keyN:value}
JSON 数组:
[{key1:value,…,keyN:value},…,{key1:value,…,keyN:value}]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSON</title> </head> <body> <script> //定义JSON对象 let jn = {"username":"tom","userage":21,"usersex":"男"}; //获取jn对象中的username的值 console.log(jn.username); //获取jn对象中的userage的值 console.log(jn.userage); //获取jn对象中的usersex的值 console.log(jn.usersex); //定义JSON数组 let jnarray = [{"username":"tom","userage":21,"usersex":"男"},{"username":"jim","userage":26,"usersex":"man"}]; //下面是获取下标为0处的JSON的值 //获取jnarray对象中的username的值 console.log(jnarray[1].username); //获取jnarray对象中的userage的值 console.log(jnarray[1].userage); //获取jnarray对象中的usersex的值 console.log(jnarray[1].usersex); //将JSON对象格式化成JSON字符串 let jsonText = JSON.stringify(jn); console.log(jsonText); //将JSON字符串解析成JSON对象 let jnobj = JSON.parse(jsonText); //获取jnobj对象中的username的值 console.log(jnobj.username); //获取jnobj对象中的userage的值 console.log(jnobj.userage); //获取jnobj对象中的usersex的值 console.log(jnobj.usersex); </script> </body> </html>
复制