本文全面介绍了JavaScript的历史背景、基本语法、内置对象等内容，包括变量声明、数据类型、运算符及流程控制等基础知识，适合初学者快速入门。
一、JavaScript的历史
1.1 野史
JavaScript简称"JS",W3C制定的一个标准:JavaScript(其它HTML和CSS)；JavaScript的前身是LiveScript，是网警公司开发的(领航者浏览器,当时已经超过微软(IE--当时是收费的))，特点是将liveScript脚本内置到浏览器端自发的校验用户的输入信息将(liveScript)脚本内置到浏览器中，在浏览器端就可以进行用户信息的校验，减轻了服务器的压力；微软指针此研发了jsscript,还将IE免费了(垄断)；随后Sun公司1.0出现了java,网警公司和sun公司联合重新命名为javaScript；网警公司的人自发的组织了谋智基金(火狐前缀)，研究了火狐浏览器。
1.2 诞生
前言：早期的时候，表单提交数据后，会等很长时间，服务器才给于反馈，为了减轻服务器的压力，JS问世了
现在：JS作用是在前台进行验证，为了安全(防止非法绕过前台篡改数据等)，在后台也要进行验证。
由于JS和Jsscript早期的的语法差异性比较大，欧洲计算机联盟做了一个统一的语法规定(程序员的福音)，但是有两个分支：
BOM(编程)--Browser Object Model：基于浏览器对象编程，里面有很多窗口(标题栏，URL栏，整个屏幕，历史记录)；
DOM(编程)---Document Object Model：基于文档对象编程，特点把一个页面当成很多节点(标签)对象--看做树结构；
学习思路：先学习语法，再学习分支
二、语法
2.1 JS引用方式
*1 引用外部的JS方式(重点掌握) 开发中常用
说明：将所有的JS代码放在一个单独的js文件中，在HTML页面只需引用js文件即可
<script type="text/javascript" src="js/myjs.js" >
//type是指定文本格式，默认就是js
</script>外部要导入的JS文件的内容
alert("hello JS");*2 引用内部的JS方式(熟悉)
特点：将JS代码写在<script></script>之间
<script type="text/javascript">
alert("Hello JavaScript!");//弹窗
</script>注意：script可以位于任何位置，但其位置最终的结果产生影响(浏览器是自上而下解析的)！
*3 内联方式 几乎不用(了解)
特点：在标签的内部，通过script属性来定义
2.2 注释
//说明：单行注释
/*多行注释*/说明：由于JS是Java开发人员编写的，因此其注释方式有点类似Java
2.3 输出的两种方式
常用两个函数--输出语句
（1）弹提示框：alert
说明：由于是DOM编程，有一个窗口对象window，频繁使用alert，所以前面省略了window(窗口)；作用：确认输入框
（2）向浏览器输入内容：也省略了window
document.write("Hello JS!");说明：可以通过此种方式写入标签，比如常用的换行符(<br/>)，浏览器会解析此标签。
2.4 JavaScript的变量的声明
1、声明变量：var关键字
var v;说明1：JS是弱类型的语言，不需要像Java(强类型)那样，必须声明变量的类型(回顾Java的基本数据类型--四类八种)；
说明2：由于是弱类型，可以用var替代任意数据类型(理解为泛型或Object)，那么如何查看数据类型呢？
借助一个运算符 typeof 可以得到这个数据的原始数据类型
var num=100;
var str="abc";
var flag=false;
var v;
window.alert(typeof num);//number数据类型
window.alert(typeof str);//string数据类型
window.alert(typeof flag);//boolean数据类型
window.alert(typeof v);//underfined数据类型疑问：那么它是如何识别数据类型的呢？
答：从字面值去判断(有奶就是娘！)
变量声明的猜测：由于JS没有编译，即使像Java声明数据类型那样，也无法检错，所以就用var代替任意的数据类型！
2.5 JavaScript原始的数据类型
数值型： number（整数，小数都用此表示）
字符(串)型： string
布尔型： boolean
空类型： null
未定义： undefined；常常是没有使用前没有赋值出现
非数字的数字：NaN
object 对象：引用类型
演示：写入几种数据类型，然后利用typeof运算符输出到浏览器或者弹框的方式展示，这里略
2.6 运算符
关于运算符，按照Java的运算符理解！
注意：竟然也有三元(目)运算符！！！
2.7 流程控制(while for循环作为例子)
应用1
<script type="text/javascript">
for(var i = 1; i <= 9; i++) {
for(var j = 1; j <= i; j++) {
//应用1：9*9乘法表
document.write(j + "*" + i + "=" + (j * i) + " ");
}
document.write("<br>");
}
document.write("<hr>");
//应用2：1到100的整数求和
var sum = 0;
var i = 1;
while(i <= 100) {
sum += i;
i++;
}
document.write(sum);
</script>说明：if、switch省略
2.8 自动类型的转换(细节)
转换条件：当你的运算符想要一个它想要的类型，它就会去尽最大努力去适配，转换不成功则NaN
情形1：字符串转数字
特点：按照字面值转，如果字面值转不过来，就转成 NAN
<script type="text/javascript" >
var a="2";
document.write(a+2+"<br />");//22：+相当于字符串的拼接运算符
document.write(+a+2+"<br />");//4：+号相当于运算符号(表示正数)
document.write(a*2+"<br />");//4： *运算符需要一个数字，就将字符串a转换成数字了，恰好能转换
document.write((a/2+NaN)+"<br />");//NaN--表示无法进行计算(结算结果不知道计算机识别不了，就用NaN代替)
</script>情形2：NaN参与数学运算结果都是NaN，参与比较运算也是false
<script type="text/javascript" >
document.write(NaN==NaN);
document.write(NaN+1);
</script>情形3：数字转boolean类型转情形
说明：布尔类型转数字 "0转成false,非0数字转成true"；
var a="-1";
if(a){
document.write(true+"<br />");//结果：true
}else{
document.write(false+"<br />");
}情形4：boolean类型转数字
说明：false转成0，true转成1；
document.write(false+3+"<br />");//结果：3
document.write(true+4+"<br />");//结果：5（1）字符串转布尔，空串转成false 非空串转成true
（2）数字转布尔 0转false 非0转true
（3）NaN 转布尔 转成false
（4）undefined转boolean 转成false
（5）对象不为空转true ,对象为null转false
理解：就理解成字符串是空串，表示没有接受到数据(false)，同理对象也是这样理解的。
var obj = new Object();
obj = null;//注释掉观察结果
var vv; //注释掉观察结果
var str = "";
var f = true;
if(obj) { //将此变量变成不同的变量名观察结果
alert(true);
} else {
alert(false);
}情形6：“==”和“===”的区别
document.write(num1 == num2);//true
document.write("<br>");
document.write(num1 === num2);//false说明： "==="全等于，会先判断类型，如果类型不一致直接false
三、函数式编程
特点：在函数式编程语言中，函数是第一类的对象，也就是说，函数不依赖于任何其他的对象而可以独立存在。
补充：JS是一门基于对象的语言，没有类这个概念，跟我们Java中的方法挺像
创建方式1：使用 Function() 构造函数定义，形如：
var fun=new Function('msg','alert(msg)');
alert(typeof fun); //function函数类型
fun(10);//调用函数参数说明：参1 (形参); 参2 函数体(要具体实现的逻辑)
创建方式2：函数定义表达式：也称为"函数直接量",形如：
var fun=function(msg){
alert(msg);
return 500+msg;
}
var v=fun(100,100,100);//函数调用
alert(v);参数说明：参数列表的参数类型不用写 ，如果有返回值可以写return
创建方式3：函数语句：即使用function关键字显式定义函数，形如：
function fun2(msg){
alert(msg);
}
fun2(1000,100); //函数调用(特点：函数调用可以在定义之前，其它不行)四、JS的内置对象
4.1 Math
（1）对象的创建
特点：不用new对象，调用方法理解成Java中的静态方法调用
即：使用方法的方式：Math.方法名(参数)
（2）常用方法
max()、min()---可以有多个参数，多个数据进行比较ceil(3.14); ---向上取整
Math.floor(4.25); ---向下取整
random();---无参，获取 [0,1) 之间的小数
round(3.5)--- 四舍五入
常用常量：E(自然数)、PI(圆周率)
（3）简单应用
//需求：获取[1,10]的整数
//var v=(int)(Math.random()*10+1);//错误,JS没有此特性
var num=Math.floor(Math.random()*10+1);//正确：二个方法的有机结合4.2 String
（1）对象的创建方式
var str=new String("abc");//方式1
var str="abc";//方式2(常用)（2）常用方法，参考Java中字符串的使用
charAt() 根据 指定位置 (索引)返回字符concat() 连接( 拼接 )字符串。
indexOf() 检索字符串(查找是否有该字符串，如果有返回该字符串位置的第一个索引)
lastIndexOf() 从后向前搜索字符串(不熟悉)
match() 找到一个或多个正则表达式的匹配(不熟悉)
replace() 替换与正则表达式匹配的子串(不熟悉)
toLowerCase() 把字符串 转换 为小写
toUpperCase() 把字符串转换为大写
4.3 Number
（1）Number对象创建
(1)var num = new Number(100);//方式1
(2)var num2 = Number(50);//方式2
(3)var num4 = 3.256;//方式3（2）常用方法
(1)toPrecision(保留位数) 把数字格式化为指定的长度( 保留的位数包含整数部分 ，下一位会四舍五入)(2)toFixed(保留位数) 把数字转换为字符串，结果的小数点后有指定位数的数字(小数点后面保留几位,下一位会四舍五入)
(3)对象.toString() 把一个数字转成字符串;数字+“”也能将数字转换成字符串
补充：Firefox浏览器，按F12,找到对应的控制台，可以在JS中，通过"console.log(变量);"的形式向控制台输出内容
4.4 Date
（1）日期对象的创建
var date=new Date();（2）常用方法(都是Date对象调用)
toDateString(); //英文:Sat May 12 2018toLocaleDateString(); //日期(年月日):2018年5月12日
toLocaleTimeString(); //时间(时分秒):11:51:48
toLocaleString(); //2018年5月12日 11:51:48(常用)
（3）应用：页面时钟
效果：动态显示当前的时间(完整的)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: blue;/*定义字体的颜色*/
font-size: 40px;/*定义字体的大小*/
}
</style>
</head>
<body>
<div id="clock">
<!--会在这个地方，显示内容-->
</div>
<script type="text/javascript">
//定义行为
function showTime(){
var date = new Date();
var datetime = date.toLocaleString();
//通过一个标签的id值，获取该标签对象
var mydiv = document.getElementById("clock");//DOM编程
document.write(mydiv);//如果位置不合适，可能没有加载到该标签对象，无法显示
mydiv.innerHTML = datetime;//给此标签的内部赋值
}
showTime();
//通过定时器循环调用该函数
window.setInterval('showTime()',1000);//每一秒刷新一次
</script>
</body>
</html>注意：浏览器解析文档，加载顺序(自上而下)，DOM编程(通过id获取标签对象)，然后通过innerHTML赋值,定时器函数
(windows.d=setInteral('方法名',时间) 定时刷新)
4.5 数组
特点：长度是可变的(自动扩容)，数组中可以存储多种数据类型(JS是弱类型的语言，没有编译一说)
（1）对象的创建
//方式1:new创建对象后，再赋值
var arr=new Array(1);
arr[0]=10;
arr[1]=20;
arr[10]=false;
//方式2:new的过程，给予其初始化
var arr2=new Array(10,50,100,"abc",true,false);
//方式3:直接通过[]的形式
var arr3=[10,50,true,"hehe"];//常用（2）常用的方法
1、concat(数组对象)，连接两个或更多的数组，并返回扩容后的数组
例如：var maxArray=["abc",10,30].concat([3,4,5]).concat(["a","b"]);2、join("分隔符") 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔
var str=[1,2,3,4,5].join("-");//结果："1-2-3-4-5"
document.write(str);//注意数组向浏览器输出是内容
document.write(str.length);//注意其结果：9(分隔符也是字符串的一部分)
document.write(typeof str);//string类型补充：如果想让数组元素变成字符串，join("")参数为空串即可
3、pop() 删除并返回数组的最后一个元素
var arr8=[1,2,3,4,5];
var p=arr8.pop();
document.write(p);//返回删除的最后一个元素：5
document.write("<hr>");
document.write(arr8.length);//返回删除元素后数组的长度4、push() 向数组的末尾添加一个或更多元素，并返回新的长度
var newLength=[1,2,3,4,5].push(100,200);
alert(newLength);//number类型：75、slice(截取的索引)从某索引处截取到一个新的数组(包含当前索引的元素)
var arr=[10,20,30,40,50];
var num2=arr.slice(1);
6--sort() 对数组的元素进行排序,默认是按字典顺序
var arr9=[14,35,69,25,1,2,3,4,5,15,36,25,45];
arr9.sort(bj);//传入一个比较器，按照大小去排序
//结果展示:1,14,15,2,25,25,3,35,36,4,45,5,69 需求：自定义排序(内部原理后续补充)
var arr9=[14,35,69,25,1,2,3,4,5,15,36,25,45];
arr9.sort(bj);//传入一个比较器，按照大小去排序
//如果说想要按大小排序，我们得自己写一个比较器函数
function bj(a,b){
return a-b;//根据结果的正、0、负进行排序
}
document.write(arr9);4.6 二维数组
概念：一维数组中存储一维数组
掌握JS的两种遍历方式
//(1)定义二维数组
var arr1 = [1, 35, 63];
var arr2 = ["abc", "dd"];
var arr3 = [true, false];
var erwei = new Array(3);
erwei[0] = arr1;
erwei[1] = arr2;
erwei[2] = arr3;
for (var i = 0; i < erwei.length; i++) {
for (var j = 0; j < erwei[i].length; j++) {
document.write(erwei[i][j]);
}
document.write("<br />");
}
//(2)直接定义一个二维数组
var arr5 = [ [2, 6],[6, 7],[false, "abc"] ];
for (var i = 0; i < arr5.length; i++) {
for (var j = 0; j < arr5[i].length; j++) {
document.writeln(arr5[i][j]+" ");
}
document.write("<br />");
}应用场景：常用在二级菜单上
4.7 全局方法对象 GloGlobal
特点：该对象中的方法调用，不需要对象的引用，可直接使用
常用方法
（1）isNaN()：判断一个值是不是NaN；因为NaN参与运算还是NaN
（2）parseInt() 把一个字符串转成数字
<script type="text/javascript">
//isNaN(); 判断一个值是不是NaN
document.write(NaN==NaN);
var c=+"abc"+500;
var v=isNaN(c);
document.write(v);//true
//parseInt() 把一个字符传转成数组
var num=new Number("123");
alert(num+10);
var num2="100";
var num4=num2*1;
var num6=parseInt("123a4a");
alert(num6);
</script>注意：解析时会从头开始解析，如果字符串的第一个元素不是数字，就返回NaN,如果是就判断下一个(贪婪解析)
未完待续。。。
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
