最通俗易懂的JavaScript⼊门教程
前⾔：“成功没有捷径，脚踏实地⼀步⼀个脚印，该来的总会来，不好⾼骛远，不急功近利，付出总会有回报，不管处于哪个阶段，都要⼀步⼀个脚印，踏实的⾛好每⼀步！”
你好，我是梦阳⾠！快和我⼀起⾛进JavaScript的世界吧。
⽂章⽬录
01.JavaScript概述
1.什么是JavaScript?
JavaScript是运⾏在浏览器上的脚本语⾔。简称JS。
JavaScript是王景公司（NetScape)的布兰登·艾奇开发的，最初叫做LiveScript。LiveScript的出现让浏览器更加⽣动，使得页⾯更具有交互性。
JavaScript（简称“JS”）是⼀种具有函数优先的轻量级，解释型或即时编译型的编程语⾔。虽然它是作为
开发Web页⾯的脚本语⾔⽽出名的，但是它也被⽤到了很多⾮浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语⾔，并且⽀持⾯向对象、命令式和声明式（如函数式编程）风格。
JavaScript在1995年由Netscape公司的Brendan Eich，在⽹景导航者浏览器上⾸次设计实现⽽成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript和java没有任何关系，只是语法类似。JavaScript运⾏在浏览器中，代码由浏览器解释后执⾏。⽽Java运⾏在JVM中。JavaScript的“⽬标程序”以普通⽂本形式保存，这种语⾔都叫做"脚本语⾔“。
Java的⽬标程序已.class形式存在，不能使⽤⽂本编辑器打开，不是脚本语⾔。
1998年⽹景公司由“美国在线”公司收购。
王景公司最著名的就是“领航者浏览器”：Navigator浏览器。
LiveScript的出现，最初的时候是为Navigator浏览器量⾝定制⼀门语⾔，不⽀持其他浏览器。
微软⼀看不⾏，研发了只⽀持IE浏览器的脚本语⾔。JScript。
在两者语⾔共存的时代，程序员需要写两套程序。这时⼀个叫做ECMA组织（欧洲计算机协会）根据JavaScript制定了ECMA-262标准，叫做ECMA-Script.
JavaScript是⼀种属于⽹络的脚本语⾔，已经被⼴泛⽤于Web应⽤开发，常⽤来为⽹页添加各式各样的动态功能，为⽤户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌⼊在HTML中来实现⾃⾝的功能的。
2.区分JSP和JS
JSP：JavaServer Pages（⾪属Java）
JS: JavaScript.
02.HTML中嵌⼊JavaScript
1.HTML嵌⼊JavaScript的第⼀种⽅式
JS是⼀门事件驱动型的编程语⾔，依靠时间去驱动，然后执⾏对应的程序。在JS中有很多事件，其中⼀个事件叫做：⿏标单击，单词：click。并且任何事件都会对应⼀个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加⼀个on】，⽽
事件是以HTML标签的属性存在的。
onclick="js代码“，执⾏原理是什么？
页⾯打开的时候，js代码并不会执⾏，只是把这段代码注册到按钮的click事件上了。等这个按钮发⽣click之后，注册在onclick后⾯的js代码会被浏览器⾃动调⽤。
*怎么使⽤JS代码弹出消息框。
在JS中有⼀个内置对象叫做window，全部⼩写，可以直接拿来使⽤，window代表的是浏览器对象。
*window对象有⼀个函数叫做：alert，⽤法是：window.alert("消息”）；这样就可以弹窗了。
*JS的字符串可以使⽤双引号，也可以使⽤单引号。
*JS的⼀条语句结束之后可以使⽤分号“；”，也可以不使⽤。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中嵌⼊JavaScript的第⼀种⽅式</title>
</head>
<body>
<!--点击按钮弹出消息框-->
<input type="button" value="Hello" onclick="window.alert('Hello JavaScript!')"/>
<input type="button" value="Hello" onclick="window.alert('Hello XingKong!')"/>
<input type="button" value="Hello" onclick="window.alert ('Hello MengYangChen');
alert('Hello MengYang')
alert('Hello Meng')"/>
</body>
</html>
2.HTML嵌⼊JavaScript的第⼆种⽅式
采⽤脚本块的⽅式：
暴露在脚本块中的程序，在页⾯打开的时候执⾏，并且遵守⾃上⽽下的顺序依次逐⾏执⾏。（不需要事件）
JavaScript脚本块可以出现在任何位置，并且可以出现多次。
aler函数会阻塞整个HTML页⾯的加载。
注释语法跟Java⼀样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML嵌⼊JavaScript的第⼆种⽅式</title>
</head>
<body>
<input type="button" value="我是⼀个。。"/>
<script type="text/javascript">
window.alert("hello world!");
</script>
<input type="button" value="我是⼀个按钮对象"/>
</body>
</html>
3.HTML嵌⼊JavaScript的第三种⽅式（推荐）
引⼊外部的js⽂件。
引⼊js脚本⽂件的语句：
同⼀个脚本⽂件可以引⼊多次。
脚本⽂件直接写语句就好了。
<script type="text/javascript" src="路径和⽂件名“></script>
结束的< /script>标签必须有，不能⽤反斜杠取代，引⼊⽂件时，其中间的代码不会执⾏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中嵌⼊JavaScript的第三种⽅式</title>
</head>
<body>
<script type="text/javascript" src="file/JS1.js"></script>
</body>
</html>
03.JavaScript标识符和变量
1.标识符的命名规则跟Java相同。
2.变量：
声明变量：
var 变量名；
赋值：
变量名=值
javascript是⼀种弱类型语⾔，没有编译阶段，⼀个变量可以随意给其赋值。什么类型的都可以。
变量没有⼿动赋值时，默认赋值为：undefined。
未声明变量使⽤会报错。
2.局部变量和全局变量
类似C语⾔：
全局变量在函数体之外声明。浏览器关闭的时候才会销毁。
局部变量：在函数体内部声明。在函数体执⾏完后才销毁。
3.当⼀个变量声明的时候没有使⽤var关键字，那么不管这个变量是在哪⾥声明的，都是全局变量。
04.函数的定义和使⽤
1.JS中的函数怎么定义呢?
语法格式：
第⼀种⽅式：
function 函数名（形式参数列表）{
函数体；
}
第⼆种⽅式：
函数名=function(形式参数列表）{
函数体；
}
JS中的函数不需要指定返回值类型，返回什么类型的数据都没问题。
函数的形参也不需要声明。
如：
<script>
function sum (a,b){
alert(a+b);
}
//或者
sum=function(a,b){
alert(a+b);
}
</script>
在调⽤函数的时候，如果没有传参数的值，或则传了⼀部分，剩下未传的参数默认赋值undefined。
NaN是⼀个具体的值，该值表⽰不是数字。
如果实参的数量⼤于形式参数的个数，默认只取前⾯两个数据。即没有数量限制（弱类型语⾔）。因此可以看出，JS不需要重载。
2.JS的函数不能重载。
如果出现同名函数，后⾯定义的函数会把前⾯定义的函数覆盖。
因此JS函数不能重名。分辨函数就是根据函数名来分辨。
05.JS的数据类型
1.JS数据类型有：原始类型，应⽤类型。
原始类型：Undefined,Number,String,Boolean,Null
引⽤类型:Object以及⼦类。
js脚本编程入门2.在ES6规范后，⼜基于以上6种类型添加了⼀种新的类型：Symbol。
3.JS中有⼀个运算符叫做typeof，这个运算符可以在程序的运⾏阶段动态地获取变量的数据类型。
typeof运算符的语法格式：
typeof 变量名
typeof运算符的运算结果时以下6个字符串(全⼩写）结果之⼀：
“undefined"
“number”
“string”
“boolean”
“object”
“function”
var d=null;
alert(typeof d);//“object”
⽐较字符串是否相等⽤双等号。
4.Undefined数据类型只有⼀个值。这个值就是undefined，当⼀个变量没有⼿动赋值，系统默认赋值为undefined，当然也可以⼿动赋值为undefined。
1.number数据类型
如：NaN，表⽰Not a Number不是⼀个数字，但是属于Number类型。
Infinity，表⽰⽆穷⼤。
0,-1,123,…⼩数，复数，⽆穷⼤都是属于number类型。
除数为0时，结果为⽆穷⼤。
函数isNaN（数据）：结果为true表⽰不是⼀个数字。
parseInt()函数：可以将字符串⾃动转换成数字。保留Int
parseFloat()函数：将字符串转换成数字。
Math.Ceil()函数：向上取整。2.1会变为3。
2.boolean数据类型
在boolean类型中有⼀个Boolean（）函数，会将⾮boolean类型，转换成boolean类型。
当某个地⽅⼀定是boolean类型时，会⾃动转换成boolean类型。例如if后⾯的括号。
NaN,0,"",null,undefined会⾃动转换成false.
3.String数据类型
1.在JS当中字符串可以使⽤单引号和双引号。
2.在JS当中，怎么创建字符串对象
第⼀种：var s=“sag”;（⼩String，属于String类型）
第⼆种：var a2= new String(“ab”);（⼤String，属于Object类型）
Sting是⼀个内置的类，可以直接使⽤。
3.⽆论是⼩String还是⼤Sting字符串的长度相同。其中⼜⼀个length属性求长度(x.length)
常⽤函数：
indexof: 获取指定字符串在当前字符串中第⼀次出现的索引
lastIndexof
replace
substr
substring
toLowerCase
toUpperCase
spilt 拆分字符串
例如:alert(“fasdf".indexof(“sdf”));
replace只替换最前⾯⼀个⼦字符串
如果想全部替换需要使⽤正则表达式。
substr和substring的区别。
substr(startIndex length)
substring(startIndex endIndex)左闭右开。
4.Object数据类型
1.⾸先Object类型是所有类型的超类，⾃定义的任何类型，默认继承Object。
2.Object的prototype属性
作⽤：给类动态地扩展属性和函数。
3.Object类的函数：
toString()
valueof()
toLocalString()
4.在JS中定义的类默认继承Object的属性和函数。
06.在JS当中怎么定义类？怎么new对象？
1.定义类的语法：
第⼀种⽅式：
function 类名（形参）{
}
第⼆种⽅式：
类名 function (形参）{
}
⼩朋友你是不是有很多问号？这不是函数的定义⽅式么？
注意：⽤了new就是把他当作类看，如果没有new则是把它当作普通的函数看待。
创建对象的语法：
new 构造函数名（实参）；//构造函数和类名⼀致
2.JS中类的定义，同时⼜是⼀个构造函数的定义
在JS中类的定义和构造函数的定义是放在⼀起来完成的。
如：
function User(a,b,c){
this.sno =a;
this.sname=b;
this.sage=c;
}
//a,b,c是形参，属于局部变量
//声明属性（this 表⽰当前对象）
//User类中有三个属性：sno/sname/sage
3.创建对象：
var u1 = new User(111,“lisi”,30)
4.访问对象的属性：
alert(u1.sno)
alert(u1.sname)
alert(u1.sage)
或者⽤另⼀种语法访问属性：
alert(u1[“sno”]);
alert(u1[“sage”]);
定义类的另⼀种语法：
Emp = function (ename ,sal)
this.sal=sal;
}
5.在类中如何定义函数:
Product = function(pno,pname,price){
//属性
this.pno=pno;
this.pname=pname;
this.price=price;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。