最通俗易懂的JavaScript入门教程

前言：“成功没有捷径，脚踏实地一步一个脚印，该来的总会来，不好高骛远，不急功近利，付出总会有回报，不管处于哪个阶段，都要一步一个脚印，踏实的走好每一步！”
你好，我是梦阳辰！快和我一起走进JavaScript的世界吧。


01.JavaScript概述

02.HTML中嵌入JavaScript

03.JavaScript标识符和变量

04.函数的定义和使用

05.JS的数据类型

    1.number数据类型

    2.boolean数据类型

    3.String数据类型

    4.Object数据类型

06.在JS当中怎么定义类？怎么new对象？

07.null,undefined,NaN的区别




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.

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语言：

全局变量在函数体之外声明。浏览器关闭的时候才会销毁。

局部变量:在函数体内部声明。在函数体执行完后才销毁。

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以及子类。

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.ename =ename;
this.sal=sal;
}

5.在类中如何定义函数:

Product = function(pno,pname,price){
//属性
this.pno=pno;
this.pname=pname;
this.price=price;
//函数
this.getPrice =function(){
 return this.price
}
//new对象
var pro = new Product(111,"西瓜",4.0)
//调用函数
var pri = pro.getPrice();
alert(pri);//4.0

6.通过prototype这个属性来动态扩展属性以及函数
//给Product类扩展函数：
Product.prototype.getPname=function(){
return this.pname;
}

//给String类扩展函数
String.prototype.getPname=function(){
alert(“Hello”);
}

07.null,undefined,NaN的区别

1.数据类型不一致

alert(typeof null);//Object
alert(typeof NaN);//number
alert(typeof undefined);//undefined

2.null和undefined可以等同

alert(null=NaN);//false
alert(null=undefined);//true
alert(underfined=NaN);false

在JS当中有两个比较特殊的运算符：

1."==" :等同运算符：只判断值是否相等（双等号）
2."= = ="：全等运算符：既判断值是否相等，又判断数据类型是否相等。（三等号）

alert(11 == ture);//true
alert(11=== ture);//false

对于this等内容学过Java的就应该秒懂，如果你没有学Java，建议看看梦阳辰 写的Java专栏。

梦阳辰的Java专栏

至此JavaScript的入门教程结束：感谢看到这里！别忘了素质三连啊！

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,560评论 4赞 361
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,104评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,297评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,869评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,275评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,563评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,833评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,543评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,245评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,359评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,006评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2赞 273
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2赞 268