编译软件：IntelliJ IDEA 2019.2.4 x64
运行环境：Google浏览器
前言
前端大佬都在用的js，号称前端三大件的“JS" , 你真的了解吗?本文带你一览js之魅力,十分钟就可以让你快速上手JS。
一. 简介
JavaScript（简称 JS）是一种广泛用于客户端和服务器端 Web 开发的编程语言。它是一种动态类型、解释型语言，最初由网景公司（Netscape）开发，后来由 Ecma 国际组织标准化。JavaScript 的语法灵活，易于学习和使用，可以用于开发各种类型的 Web 应用程序，包括动态网页、单页应用程序、桌面应用程序、游戏、移动应用程序等。
JavaScript总共分成三部分: ECMAScript(基本语法)、BOM(浏览器对象模型)、DOM(文档对象模型)
二. js的特性
脚本语言，它运行在客户端
JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。
基于对象
JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是它并没有面向对象的三大特性。
弱类型
JavaScript中虽然也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。
事件驱动
JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
跨平台
JavaScript脚本语言依赖于浏览器的支持，只要有浏览器，JavaScript脚本语言可以在任意平台运行
三. js的Helloworld
需求: 在网页上创建一个按钮，当用户单击这个按钮的时候，给出一个警示框
代码演示如下：
- HTML代码
<input type="button" value="点我" id="btn02"/>
- js代码
位置: head标签内
<script> window.onload=function () { var btn02=document.getElementById("btn02"); btn02.onclick=function () { alert("你点到我了..."); } } </script>
四. js的引入方式
4.1 内部js的方式
注意：
script标签可以在html代码的任意位置JavaScript代码要写在script标签内- 为了方便查询或操作HTML标签（元素），script标签可以写在body标签后面
代码解释：
<script> window.onload=function () {} 网页加载完后执行的函数 var btn01=document.getElementByid("btn01"); 从文档对象中根据id属性值获得一个Element(元素) btn01.onclick=function () { 为btn01这个元素绑定单击事件，当用户单击元素的时候，执行后面的函数 alert("你点到我了..."); 警示框，弹出文本信息给用户 } </script>
4.2 外部js的方式
步骤：
新建一个js文件（后缀名为.js的文件），将js代码写在js文件内，在html文件内引入js即可
注意：
- 引用外部JavaScript文件的script标签里面不能写JavaScript代码
- 先引入，再使用
- script标签不能写成单标签
代码演示如下：
window.onload=function () { var btn02=document.getElementById("btn02"); btn02.onclick=function () { alert("你点到我了..."); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/js1.js"></script> </head> <body> <input type="button" value="点我" id="btn02"/> </body> </html>
注意：
如果此时script标签已经引入一个js 文件，那么该标签内的js代码将会失效，但是这个html文件可以引入多个script标签
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/js1.js"> alert(100); </script> <script> alert(200); </script> </head> <body> <input type="button" value="点我" id="btn02"/> </body> </html>
五. js的数据类型
5.1 基本数据类型
数值型: number
JavaScript不区分整数、小数，例如10 29 1.5 1.34 …
字符串: String
JavaScript不区分字符、字符串，单引号与双引号意思一样。 例如 “10” “abc” ‘你好’ …
布尔型: boolean
在JavaScript中，其他类型和布尔类型都可以进行自动转换
true：非零的数值，非空字符串，非空对象
false：零，空字符串，null，undefined
注意：
在js中的if() 里，其他数据类型都可以和布尔型自动转化
空串/o/undefined/null/NaN都是false，其他都是true特殊的值：undefined/null/NaN
5.2 引用数据类型
5.2.1 对象
所有new出来的对象用{}声明的对象
5.2.1 数组
用[]声明的数组
六. 变量的声明
关键字：var,其实ECMAScript6之后建议使用let数据类型：JavaScript变量是弱类型的，可以接收任意类型的数据标识符：严格区分大小写- 变量使用规则
- 如果使用了一个没有声明的变量，那么会在运行时报错
Uncaught ReferenceError: b is not defined - 如果声明一个变量没有初始化，那么这个变量的值就是undefined
6.1 声明方式一
语法：
var 变量名；
变量名=值；
代码演示如下：
var value; value="123"; //console.log() 用于控制台输出 console.log(value) ; //typeof 用于确定给定变量的数据类型并返回 console.log(typeof value) ;
6.2 声明方式二
语法：
var 变量名=值；
代码演示如下：
var value="123"; //console.log() 用于控制台输出 console.log(value) ; //typeof 用于确定给定变量的数据类型并返回 console.log(typeof value) ;
七. 函数
7.1 内置函数
- 警示框
alert("警示内容");
- 确认框，有返回值；确认是true，取消是false
confirm("提示内容")；
- 控制台打印日志
console.log("输出内容");
tips：
如何打开控制台并查看输出的内容？
打开任意浏览器，将光标置于你要查看的页面上，按“F12"打开开发者工具，在console那一栏就是
7.2 自定义函数
7.2.1 有名函数
位置：
script标签下
语法：
function方法名（形参列表）{代码块}
①无参无返回值
function fun01(){ console.log("这是fun01函数"); }
②有参无返回值
function fun02(a,b,c,d){ console.1og("这是fun02函数"+a+b+c+d) }
③有参有返回值
function fun03(a,b,c,d){ console.log("这是fun02函数"+a+b+c+d); return值； }
7.2.2 匿名函数
语法：
function(形参列表) {代码块}
应用场景：
a.在事件绑定位置
btn01.οnclick=function (){}
b.可以将函数看作是一个对象
var fun03=function( console.1og("这是fun03函数") }
7.3函数的调用
语法：
var 变量名=函数名（实参列表）
代码演示如下：
//声明并创建函数f1，返回结果 function f1() { return 23*12; } //定义变量result接收函数f1的返回值 var result=f1();
注意：
实参少于形参，多出来的形参是未定义
实参多于形参，多出来的实参接收不到
八. 对象
JavaScript中没有『类』的概念，对于系统内置的对象可以直接创建使用
8.1通过new关键字创建对象
①声明创建对象
var obj01=new object();
②属性与属性值的设置
注意：
属性和属性值可以自由设置，你想设什么属性就设，想填什么属性值就填
代码演示如下：
obj01.id=101; obj01.name="张三"； obj01.abc="北京"；
或者这样设置属性值
代码演示如下
//设置属性值 obj01.stuName = "tom"; obj01.stuAge = 20; obj01.stuSubject = "java";
③ 属性值的获取
代码演示如下：
console.log(obj01.id) console.logtobj01.name) console.log(obj01.abc) console.log(obj01.age)
④ 对象中函数的设置
代码演示如下：
//对象obj01创建一个方法eat() obj01.eat=function (){ alert(this.name+"eat"); }
小tips：
this关键字只有两种情况：
在函数外面：this关键字指向window对象（代表当前浏览器窗口）在函数里面：this关键字指向调用函数的对象
⑤函数的调用
代码演示如下：
obj01.eat();
8.2 通过{}创建对象
代码演示如下：
//声明创建对象 var obj02={ 1d:102, name:"李四"， age:18, //创建函数eat eat:function () alert("eat"); }, //创建函数run run:function () alert("run"); }
ps：使用方式和8.1节一致，这里暂不赘述
