JavaScript 概述

介绍

JavaScript是一门脚本语言，不须要编译就能够间接被浏览器解析执行。它是运行在浏览器中的，每一个浏览器都有本人的JavaScript解析引擎。

JavaScript能够用来加强用户和html页面的交互过程，能够来管制html元素。让页面有一些动静的成果，以此来加强用户的体验。

特点

  1. 交互性（它能够做的就是信息的动静交互）
  2. 安全性（不容许间接拜访本地硬盘）
  3. 跨平台性（只有是能够解释 JS 的浏览器都能够执行，和平台无关）

发展史

  1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 C– ，起初更名为ScriptEase
  2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。起初，请来SUN公司的专家，批改LiveScript，命名为JavaScript
  3. 1996年，微软剽窃JavaScript开发出JScript语言
  4. 1997年，ECMA(欧洲计算机制造商协会)，制订出客户端脚本语言的规范：ECMAScript，就是对立了所有客户端脚本语言的编码方式。
JavaScript = ECMAScript + JavaScript本人特有的货色(BOM+DOM)

JavaScript根底语法

与html联合形式

JavaScript与Html联合的办法总有两种，即——外部JS和内部JS。

外部JS

概述

间接在html页面中书写JavaScript代码，所书写的JavaScript代码应用Script标签包围起来。

格局
<script type="text/javascript">    JS代码</script>
演示
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Demo</title>    <!--在外部定义JS-->    <script type="text/javascript">        alert("Hello World");    </script></head><body></body></html>

内部JS

概述

应用script标签，通过src属性引入内部的js文件。

格局
<script type="text/javascript" src="JS文件地址"></script>
演示
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Demo</title>    <!--援用内部JS-->    <script type="text/javascript" src="../JavaScript/one.js"></script></head><body></body></html>
  1. script标签能够定义在html页面的任何中央，然而定义的地位会影响其执行程序。
  2. script标签也能够在一个html页面，同时定义多个。

JavaScript正文

概述

JavaScript的正文格局和Java的完全一致，无论是单行正文，还是多行正文。

单行正文

格局
//正文内容
演示
//这是一个单行正文

多行正文

格局
/* 正文内容 */
演示
/*    这是一个多行正文 */

JavaScript数据类型

概述

JavaScript也同Java一样，数据类型分为两类，即——原始数据类型、援用数据类型。

原始数据类型

number类型
  • 整数
  • 小数
  • NaN（not a number，一个不是数字的数字类型）
string类型

单引号与双引号定义的都是字符串类型，Javascript没有字符类型的概念。

boolean类型
  • true
  • false
null类型

一个对象为空的占位符。

undefined类型

未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined。

援用数据类型

对象。Javascript中的援用数据类型也都是对象。

JavaScript变量

概述

JavaScript与Java中的变量很相识，但又并不完全相同。根本原因为Javascript为弱类型语言，而Java为强类型语言。什么是弱类型语言，什么是强类型语言呢？上面我来简略的阐明一下：

  • 弱类型语言：在开拓变量存储空间时，不定义空间未来的存储数据类型，而是能够寄存任意类型的数据。
  • 强类型语言：在开拓变量存储空间时，定义了空间未来存储的数据的数据类型，只能存储固定类型的数据。

正是因为语言类型的不同，导致了两种语言的变量也有不同的用意，下文我次要表述其不同之处。

格局

//定义变量（默认赋值为undefined）var 变量名;//定义并初始化值var 变量名 = 初始值;

演示

//定义变量（默认赋值为undefined)var num01;var num02;var num03;//接管number类型值num01 = 1;num02 = 3.14;num03 = NaN;//定义并初始化string类型值var str01 = '2';var str02 = "two";var str03 = '我是一个二';//定义并初始化boolean类型值var flag01 = true;var flag02 = false;//定义并初始化null类型值var obj = null;//定义并初始化undefined类型值var und01 = undefined;var und02;//默认赋值为undefined

新个性

ES2015(ES6) 新减少了两个重要的 JavaScript 关键字: let 和 const。

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

const 申明一个只读的常量，一旦申明，常量的值就不能扭转。

  • 应用var申明的变量，其作用域为该语句所在的函数内，且存在变量晋升景象；
  • 应用let申明的变量，其作用域为该语句所在的代码块内，不存在变量晋升；
  • 应用const申明的是常量，在前面呈现的代码中不能再批改该常量的值。

总结：

通常，应该始终应用const申明变量，如果您意识到须要更改变量的值，请返回并将其更改为let。如果我的项目不反对ES6，再应用var来申明变量。

typeof函数

概述

因为Javascript的变量能够存储任意类型的数据，这样就导致咱们无奈判断一个变量中存储的数据是number类型、string类型的，还是boolean类型的。于是这个时候，咱们就须要用到typeof运算符，来帮忙咱们辨别变量中存储的不同数据的类型。

typeof的作用就是传入一个变量，同时返回这个变量所存储数据的数据类型。

格局
typeof(变量名)
演示
//别离判断num01、str01、flag01、obj、und01的数据类型let type01 = typeof(num01);let type02 = typeof(str01);let type03 = typeof(flag01);let type04 = typeof(obj);let type05 = typeof(und01);//打印到html页面上document.write(type01 + "<br>");document.write(type02 + "<br>");document.write(type03 + "<br>");document.write(type04 + "<br>");document.write(type05 + "<br><br>");/* 打印后果：    number    string    boolean    object    undefined*/

JavaScript运算符

一元运算符

概述

只有一个运算数参加的运算符。

次要成员
++`、`--`、`+(正号)`、`-(负号)
注意事项

  1. 对于自增与自减：

    • a++，先运算，再自增。
    • ++a，先自增，再运算。

  2. 在JS中，如果运算数不是运算符所要求的类型，那么js引擎会主动的将运算数进行类型转换。如：

    • String类型转number类型：首先依照字面转化为相应的数字，如果字面值不是数字，则转为NaN（不是数字的数字）。
    • boolean类型转number类型：true转为1，false转为0。

算数运算符

概述

用于进行一些数学运算的符号。

次要成员
+`、`-`、`*`、`/`、`%

赋值运算符

概述

将一个数据赋予另一数据的符号。

次要成员
=`、`+=`、`-=

比拟运算符

概述

用于数据大小比拟的运算符。

次要成员
>`、`<`、`>=`、`<=`、`==`、`===(全等于)
注意事项
  1. 若类型雷同，则间接进行比拟。若数据类型不同，先进行类型转换，再比拟。
  2. ===(全等于)：在比拟之前，先判断类型，如果类型不一样，则间接返回false。
  3. 字符串类型之间的数据进行比拟，依照字典程序比拟。按位逐个比拟，直到得出大小为止。

逻辑运算符

概述

用于进行逻辑判断的运算符。

次要成员
&&`、`||`、`!
注意事项

在进行逻辑运算时，通常会遇到其余数据类型转为boolean数据。

  1. number转boolean时：0或NaN为假，其余为真
  2. string转boolean时：除了空字符串为假，其余都是true
  3. null和undefined转boolean时：都为false
  4. 对象转boolean时：都为true

三元运算符

格局
//表达式为真，则返回后果1。为假，则返回后果2表达式 ? 后果1 : 后果2
演示
let a = 1;let b = 2;let c = a > b ? "正确" : "谬误";console.log(c);//谬误

管制语句

次要成员

  1. if...else...
  2. while
  3. do...while
  4. for
  5. switch...case

注意事项

switch语句的差别：

  1. 在java中，switch语句能够承受的数据类型只有：byte、short、int、char、枚举、String。
  2. 在Javascript中，switch语句能够承受任意的原始数据类型

JS非凡语法

  1. 语句以;结尾，如果一行只有一条语句则能够省略，但不倡议

  2. 变量的定义应用

    let

    关键字，但也能够不应用

    • 应用let关键字定义变量，定义的变量为局部变量。
    • 不是用let关键字定义变量，定义的变量为全局变量，但不倡议

JavaScript对象

JavaScript中的函数相当于Java中的办法，大抵能够分为以下几种：

  • function-办法对象
  • Array-数组对象
  • Date-日期对象
  • Math-数学对象
  • RegExp-正则对象
  • Global-全局对象
  • Number-数字包装对象
  • String-字符串对象
  • Boolean-布尔对象
  • Error-谬误对象

上面我会一一解说。

function-函数对象

创立

格局
//创立函数格局一function 函数名(形参列表) {    函数体}//创立函数格局二let 函数名 = function(形参列表) {    函数体}//创立函数格局三（不倡议应用）let 函数名 = new function(形参列表,函数体);
演示
//创立函数格局一function fun01(a, b) {    console.log("fun01的后果为：" + (a + b));}//创立函数格局二let fun02 = function(a,b){    console.log("fun02的后果为：" + (a + b));}

调用

格局
函数名(实参列表);
演示
//调用fun01fun01(10,20);//fun01的后果为：30//调用fun02fun02(30,40);//fun02的后果为：70

属性

length：函数形参的个数。

let d = fun01.length;console.log("函数fun01的形参个数为：" + d);//函数fun01的形参个数为：2

特点

  1. 创立办法时，形参类型不须要写，返回值类型也不须要写。
  2. 办法是一个对象，如果定义名称雷同的办法，会后者后笼罩前者。
  3. 在JS中，办法的调用只与办法的名称无关，和参数列表无关。即只有办法名正确，你参数传少、传多，都是能够失常调用办法的。
  4. 在办法申明中有一个暗藏的内置对象（数组）——arguments，封装所有的理论参数。所以哪怕办法形参只有两个，然而你也能够传入三个，因为实参都是先被arguments数组所接管了。

Array-数组对象

创立

格局
//创立数组格局一let 数组名 = new Array();//创立数组格局二let 数组名 = new Array(默认长度);//创立数组格局三let 数组名 = new Array(元素列表);//创立数组格局四let 数组名 = [元素列表];
演示
//创立数组格局一let arr01 = new Array();//创立数组格局二let arr02 = new Array(3);//创立数组格局三let arr03 = new Array(1,2,3);//创立数组格局四let arr04 = [4,5,6,7,8];

遍历

格局
数组名[索引];
演示
//遍历数组for (let i = 0; i < arr04.length; i++) {    console.log(arr04[i]);}

属性

length：数组的长度

let num = arr03.length;//获取数组arr03的长度

办法

join()

将数组中的元素依照指定的分隔符拼接为字符串

//将数组中的元素依照指定的分隔符拼接为字符串let arr05 = arr04.join("-");console.log(arr05);////4-5-6-7-8
push()

向数组的开端增加一个或更多元素，并返回新的长度。

//向数组的开端增加一个或更多元素，并返回新的长度let length = arr04.push(9,10,11);console.log(length);//8

特点

  1. JS中，数组存储元素的类型不是对立的，是可变的。而Java数组只能存储繁多类型的元素。
  2. JS中，数组长度也不是固定的，数组长度可变。而Java数组长度创立之初就固定，不可扭转。

Date-日期对象

创立

格局
let 日期对象名 = new Date();
演示
let newTime = new Date();document.write(newTime);//Tue Dec 22 2020 22:45:04 GMT+0800 (GMT+08:00)

办法

  • toLocaleString()：返回以后date对象对应的工夫本地字符串格局

    let newTime = new Date();let localeTime = newTime.toLocaleDateString();document.write(localeTime);//2020/12/22

  • getTime()：获取毫秒值。返回以后如期对象形容的工夫到1970年1月1日零点的毫秒值差

    let newTime = new Date();let MSTime = newTime.getTime();document.write(MSTime);//1608648497413

Math-数学对象

创立

Javascript中的Math也不须要创立了，间接通过Math.办法名()的形式来应用数学对象。

属性

PI：圆周率

let a = Math.PI;document.write(a);//3.141592653589793

办法

  • random()：返回一个[0,)之间的伪随机数。
  • ceil()：对传入的参数，向上取整。
  • floor()：对传入的参数，向下取整。
  • round()：对传入的参数，四舍五入。

RegExp-正则对象

创立

格局
//创立正则格局一let 正则对象名 = new RegExp("正则表达式");//创立正则格局二let 正则对象名 = /正则表达式/;
演示
//创立正则格局一let regExp01 = new RegExp("^0\\\\d{2}.[1-9].*6$");document.write(regExp01);///^0\\d{2}.[1-9].*6$///创立正则格局二let regExp02 = /^0\\d{2}.[1-9].*6$/;document.write(regExp02);///^0\\d{2}.[1-9].*6$//^0\\d{2}.[1-9].*6$/

规定

规定太多了，说也说不清，来这里学习吧~

点我——>正则学习网站

办法

test()：传入字符串，验证是否合乎正则定义的标准

let regExp01 = new RegExp("^0\\\\d{2}.[1-9].*6$");let result = regExp01.test("3093");document.write(result);//false

Global-全局对象

创立

全局对象也是不须要创立的，Global对象中的办法也不须要对象，就能够间接被调用。如：alert()

办法

  • encodeURI()：将字符串作为 URI 进行编码。
  • encodeURIComponent()：将字符串作为 URI 组件进行编码。编码的字符更多。
  • decodeURI()：对 encodeURI() 函数编码过的 URI 进行解码。
  • decodeURIComponent()：可对 encodeURIComponent() 函数编码的 URI 进行解码。
  • eval()：解析字符串模式的JavaScript代码，并执行它。
  • isNaN()：因为用==与NaN进行比拟，哪怕是NaN本身，也只能失去false。应用此办法，能够检查数据自身其是否为NaN。
  • parseInt()：逐个判断每一个字符是否是数字，直到不是数字为止，将前边数字局部转为number。

Number-数字包装对象

概述

Number 对象是原始数值的包装对象。

创立

格局
let 变量名 = new Number(value);
演示
let num = new Number(40);

办法

  • toString()：数字转为字符串

    let num = new Number(40);document.write(typeof(num) + "<br/>");//objectlet string = num.toString();document.write(typeof(string));//string

  • valueof()：拆箱

    let num = new Number(40);document.write(typeof(num) + "<br/>");//objectlet number = num.valueOf();document.write(typeof(number));//number

String-字符串对象

概述

String 对象用于解决文本（字符串），和Java的String类简直统一。

创立

格局
//创立string对象格局一let 变量名 = new String("字符串内容");//创立string对象格局二let 变量名 = new String('字符串内容');//创立string对象格局三let 变量名 = "字符串内容";//创立string对象格局四let 变量名 = '字符串内容';
演示
//创立string对象格局一let s01 = new String("字符串一");document.write(s01 + "<br/>");//创立string对象格局二let s02 = new String('字符串二');document.write(s02 + "<br/>");//创立string对象格局三let s03 = "字符串三";document.write(s03 + "<br/>");//创立string对象格局四let s04 = '字符串四';document.write(s04 + "<br/>");

办法

很多，也是根本和Java的差不多。您啊，罗唆间接去【菜鸟教程】学得了。JavaScript String 对象 | 菜鸟教程

Boolean-布尔对象

概述

Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).

创立

格局
//创立Boolean对象格局一let boolean01 = new Boolean();//创立Boolean对象格局二let boolean02 = new Boolean(true);//创立Boolean对象格局三let boolean03 = false;
演示
//创立Boolean对象格局一let boolean01 = new Boolean();document.write(boolean01 + "<br/>");//false//创立Boolean对象格局二let boolean02 = new Boolean(true);document.write(boolean02 + "<br/>");//true//创立Boolean对象格局三let boolean03 = false;document.write(boolean03 + "<br/>");//false

Error-谬误对象

概述

error是指程序中的非正常运行状态，在其余编程语言中称为“异样”或“谬误”，解释器会为每个谬误情景创立并抛出一个Error对象，其中蕴含谬误的形容信息；

ECMAScript定义了六种类型的谬误，除此之外，还能够应用Error构造方法创立自定义的Error对象，并应用throw语句抛出该对象。

创立

格局
//创立Error对象格局一let 变量名 = new Error();//创立Error对象格局二let 变量名 = new Error(message);
演示
//创立Error对象格局一let error01 = new Error();//创立Error对象格局二let error02 = new Error("空指针异样");

分类

  1. ReferenceError：援用谬误，要用的货色没找到；
  2. TypeError：类型谬误，谬误的调用了对象的办法；
  3. RangeError：范畴谬误，专指参数超范围；
  4. SyntaxError：语法写错了；
  5. EvalError：eval()办法谬误的应用；
  6. URIError：URI地址谬误；

属性

  • name： 设置或返回一个谬误名
  • message： 设置或返回一个错误信息(字符串)
let error02 = new Error("空指针异样");let errorName = error02.name = "我的Error对象";document.write(errorName + "<br/>");//我的Error对象let errorMessage01 = error02.message;document.write(errorMessage01 + "<br/>");//空指针异样error02.message = "德玛西亚的异样";document.write(error02.message + "<br/>");//德玛西亚的异样

自定义Object对象（扩大）

这个自定义的Object对象，和咱们Java中的类很相识，都是由属性和办法(函数)组成的。上面我会来具体介绍一下这个自定Object对象的创立和应用。

创立

格局
//创立自定Object对象格局一let 变量名 = new Object();//创立自定义Object对象格局二let 变量名 = {    属性名: 属性值,    函数名: 函数体}
演示
//创立自定Object对象格局一let obj01 = new Object();//创立自定义Object对象格局二let obj02 = {    name: "Jason",    age: 21,    reading: function(){        document.write("我在读书!");    }};

增加、批改值

格局
Object对象.属性名 = 属性值;Object对象.函数名 = 函数体;
演示
obj01.name = "Bernardo Li";obj01.reading = function () {    document.write("我也在读书");}
批改值与增加值一样，批改值无非是在对已存在的值进行赋值。

应用值

格局
Object对象.属性名;Object对象.函数名();
演示
document.write(obj02.name + "<br/>");//Jasonobj02.reading();//我在读书!

BOM对象

概述

BOM(Browser Object Model) 是指浏览器对象模型，是用于形容这种对象与对象之间档次关系的模型，浏览器对象模型提供了独立于内容的、能够与浏览器窗口进行互动的对象构造。

组成

BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其余对象都是该对象的子对象。其子对象如下：

  • document——文档对象
  • Navigator——浏览器对象
  • Screen——显示器对象
  • History——历史记录对象
  • Location——地址栏对象

Window-窗口对象

创立

首先window对象是不须要手动去创立的。咱们能够通过window.办法名()的形式调用它的办法，甚至不须要window.，就能够间接调用其办法。

//window.办法名()window.alert("我是一个弹窗");//省略window，间接调用办法alert("我也是一个弹窗");

属性

咱们能够通过BOM对象中的属性来获取其子对象。如下：

  1. Window.Document：获取Document文档对象Window.可省略）。
  2. Window.History：获取History历史记录对象（Window.可省略）。
  3. Window.Navigator：获取Navigator浏览器对象（Window.可省略）。
  4. Window.Screen：获取Screen显示器对象（Window.可省略）。
  5. Window.Location：获取Location地址栏对象（Window.可省略）。

办法

DOM对象

前言

咱们曾经解说过BOM对象了，晓得DOM对象只是BOM顶层对象Window的几个子对象之一。既然DOM对象是BOM对象的子对象，为什么不蕴含在BOM对象中解说，而是要独自提取进去进行阐明呢？起因就是：DOM对象与History对象、Location对象等虽都为BOM的子对象，但DOM对象在咱们日常开发中的应用频率远高于同级的BOM其余子对象。所以咱们要对其具体解说一下。

概述

通过 DOM，能够拜访所有的 HTML 元素，连同它们所蕴含的文本和属性。能够对其中的内容进行批改和删除，同时也能够创立新的元素。

对于Dom对象的了解，能够总结为四点：

  1. Document 它治理了所有的 HTML 文档内容。
  2. document 它是一种树结构的文档，有层级关系。
  3. 它让咱们把所有的标签都对象化
  4. 咱们能够通过 document 拜访所有的标签对象。

分类

document对象蕴含了以下几种对象：

  1. Element-元素对象
  2. Attribute-属性对象
  3. Text-文本对象
  4. Comment-正文对象
  5. Node-节点对象

创立

形式一

通过windown对象来获取，格局为：window.document

形式二

window.`能够省略，间接调用document对象，格局为：`document

获取其余对象

  • document.createElement(tagName)：给定的标签名，创立一个标签对象。tagName为要创立的标签名。
  • document.createAttribute(attributeName)：创立一个指定名称的属性，并返回Attr 对象属性。
  • document.createComment(text)：创立正文节点。text为正文文本。
  • document.createTextNode(text)：创立文本节点。text为文本节点的文本。

Element-元素对象

获取

  • document.getElementById(elementId)：通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值。
  • document.getElementsByName(elementName)：通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值、
  • document.getElementsByTagName(tagName)：通过标签名查找标签 dom 对象，tagname 为标签名。

三个查询方法的优先级问题：

  1. 如果有 id 属性，优先应用 getElementById 办法来进行查问
  2. 如果没有 id 属性，则优先应用 getElementsByName 办法来进行查问
  3. 如果 id 属性和 name 属性都没有最初再按标签名查 getElementsByTagName

代码演示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Demo01</title>    <style type="text/css">        #title {            font-weight: bold;            color: cornflowerblue;        }    </style></head><body><!--一个表单--><form id="table" action="/">    <span id="title">请抉择你的喜好</span><br/>    <span>Game：</span><input type="checkbox" name="hobbies" value="Game">    <span>Reading:</span><input type="checkbox" name="hobbies" value="Reading">    <span>Boxing:</span><input type="checkbox" name="hobbies" value="Boxing"><br/>    <input type="submit" value="提交"></form></body><script type="text/javascript">    //通过Id获取dom对象    var tableElement = document.getElementById("table");    document.write(tableElement + "<br/>");//[object HTMLFormElement]    //通过name获取dom对象们    var hobbiesElement = document.getElementsByName("hobbies");    document.write(hobbiesElement + "<br/>");//[object NodeList]    //通过tagName获取dom对象们    var spanElement = document.getElementsByTagName("span");    document.write(spanElement + "<br/>");//[object HTMLCollection]</script></html>

办法

  • setAttribute("属性名",属性值)：设置调用者的指定属性名的属性值。
  • removeAttribute("属性名")：移除调用者的指定属性。

Node-节点对象

属性

  • parentNode：获取以后节点的父节点。
  • childNodes：获取以后节点的所有子节点
  • firstChild：获取以后节点的第一个子节点
  • lastChid：获取以后节点的最初一个子节点
  • previousSibling：获取以后节点的上一个节点
  • nextSibling：获取以后节点的下一个节点
  • className：获取或设置标签的 class 属性值
  • innerHTML：获取/设置起始标签和完结标签中的内容
  • innerText：获取/设置起始标签和完结标签中的文本

办法

  • appendChild()：向节点的子节点列表的结尾增加新的子节点。
  • removeChild()：删除（并返回）以后节点的指定子节点。
  • replaceChild()：用新节点替换一个子节点。
document对象下的其余对象在这里就不在过多的叙述了，有趣味的能够去菜鸟教程中学习。

事件

概述

某些组件被执行了某些操作后，触发某些代码的执行。

点击事件

  1. onclick：单击事件
  2. ondblclick：双击事件

焦点事件

：失去焦点- 个别用于表单验证2. `onfocus`：元素取得焦点## 加载事件`onload`：一张页面或一副图像实现加载。## 鼠标事件1. `onmousedown`：鼠标按钮被按下。2. `onmouseup`：鼠标按钮被松开。3. `onmousemove`：鼠标被挪动。4. `onmouseover`：鼠标移到某元素之上。5. `onmouseout`：鼠标从某元素移开。## 键盘事件1. `onkeydown`：某个键盘按键被按下。2. `onkeyup`：某个键盘按键被松开。3. `onkeypress`：某个键盘按键被按下并松开。## 抉择和扭转1. `onchange`：域的内容被扭转。2. `onselect`：文本被选中。## 表单事件1. `onsubmit`：确认按钮被点击。