一、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
情形5:其他类型转boolean类型
(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); //函数调用(特点:函数调用可以在定义之前,其它不行)
本质:理解理解Lambada表达式的函数式编程的含义(底层还是进行封装,方便开发人员)!
四、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类型:7
5、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,如果是就判断下一个(贪婪解析)
未完待续。。。