第一天:认识js
1.js是一种由浏览器解释执行的语言,弱类型客户端脚本语言,目前js 有node.js也是可以作为后端语言的、
解释执行:代码不需要进行预编译,程序在运行过程中逐行解释执行
不需要编译,直接在网页中运行
跨平台性好,一般浏览器都能支持js的
强类型语言:需要编译的语言,有c c++ php c# java ,运行效率要高一般运用于后台
随着技术的发展,js的一些框架如vue.js也包含了编译器。可以达到一些特殊的运用
弱类型语言:不需要明确变量的类型,变量的类型在运行中确定的
客户端脚本语言:
相对与b/s(browser/sever)架构而言,运行在客户端的语言
js不需要服务器,用浏览器直接在本地打开运行即可
客户端语言是对外公开的,重要的复杂的业务逻辑由后台语言执行
js的组成:
ECMAscript:包含js的语法
DOM:文档对象模型,提供访问和操作网页内容的方法和接口
BOM:浏览器对象模型,提供也浏览器进行交互的方法和接口
ECMA:Eropean computer manufacturer association:欧洲计算机制造商协会
js的特点:
简单易学,语法和java类似
面向对象的编程思想,例如 Bom,dom的运用
基于事件驱动,特效丰富,如鼠标点击事件,键盘事件
跨平台性,编写一次,可到处运行
知识扩展:
js可以引入域外的脚本,存在安全隐患,通过官网的CDN(云加速器),相对较安全
发布项目的是否可以考虑使用
js语法:每条语句以分号;结束,区分大小写
<noscript></noscript>,需要在谷歌chrome中设置: 设置--内容设置--javaScript--不允许任何网站运行即可
路径问题:作为一名合格的工程师,路径不应该是我们的问题
相对路径:
1.在同一项目的相同文件夹下
2.在同一项目的不同目录下
绝对路径:引用其他网站的资源(外网)
js加载顺序:
根据文档的由上而下的加载顺序进行的,先出现先加载,后出现后加载
这样就会产生js阻塞文档加载:js加载时间较长的会影响页面内容的渲染,用户体验感就会差
如果一个js文件要依赖别的js文件,被依赖的别的js文件需要在前面,加载顺序不能颠倒的
一般把js文件放在body后面
H5进行异步加载,解决阻塞问题:
<script src="ttt.js" defer></script> 推荐defer,兼容性,执行效率都好
<script src="ttt.js" async></script> 立即执行,不推荐
课程关键点:
第二天:js的变量(var定义)和类型
掌握 Number() unicode编码 tostring方法
变量:
命名规则:1.字母,数字,下划线,$任意组合,不能数字开头不能使用关键字和保留字
使用变量3步骤:定义 初始化 使用
语义化:写的变量名尽量贴近实际的意思
标识符:用于标记某一特定作用的符号,比如变量 函数 属性 方法的参数
常量:赋值后不能在赋值,只能使用,关键字:const const PI=3.14;名称需要全部大写
typeof()检查变量数据的类型,返回字符串类型
返回的类型有:undefined string boolean number object function
javacript的调试--日志记录 和 断点
控制台输出日志信息:
1.使用prompt()接受用户的信息
2.使用alert()弹出警示框
3.confrim()询问对话框。返回boolean类型
格式化输出:类似C语言
%d表示按整型输出 %f输出小数 %s字符串输出
显示不同日志级别信息:
console.log() console.debug() console.info() console.warn() console.error()
基本数据类型:
任何类型的值都可以通过boolean返回其结果
undefined和null的区别
undefined属于值类型,变量定义了但没有赋值,如:var myname;console.log(mynanme)
null属于object.指向一个空对象,表示没有引用任何对象
boolean任何类型都可以通过boolean返回其结果
boolean true false
String 任意字符 ""
number 非0 0或NaN
object 任何对象 null
undefined undefined
NaN:
1.除数为0,结果为NaN
2.NaN与任何操作,结果为NaN
3.NaN与NaN的比较返回FALSE-----特殊
--------isNaN()判断是 不是一个数字
isNaN(null);false ----特殊
isNaN(undefined);ture ---特殊
console.log(Number(""));//0
console.log(Number(null));//0
console.log(parseInt(""));//NaN
Number(this);//NaN---特殊
Number(NaN);//NaN-----特殊
Number(undefined);//NaN---特殊
数值范围:
最大值和最小值:Number.MAX_VALUE 1.7976931348623157e+308
Number.MIN_VALUE 5e-324
超出范围:Number.MAX_VALUE+Number.MAX_VALUE Infinity
使用isFinite()判断是否在最小和最大值之间
isFinite(Number.MAX_VALUE+Number.MAX_VALUE) //false
isFinite(10+10000) //true
重要:
unicode编码:统一编码标识符是全球通用的,是国际开发的基础,任何系统都能够识别数字和字母的,由16进制组成。
uinicode的特殊字符:\n换行 \t制表 \b空格 \r换行 \\斜杠 \'单引号 \"双引号
\xnn 表示一个字符 如\x41 表示A
\unnnn 中文编码 \u667A 表示“智”
var school = "\u667A\u5b66\u65e0\u5fe7" ;
console.log(school); //智学无忧
console.log(school.length); //4,Unicode都会转义成一个字符
toString()任何一个非空对象都有toString()方法
var money = 100; var moneyStr = money.toString(); // "100"
var isPass = true ; var passStr = isPass.toString(); //"true"
输出转化成对应进制-- var money = 10;
console.log(money.toString(2)); //1010 console.log(money.toString(8)); //12console.log(money.toString(16)); //a
循环:
1.使用标签来跳出循环
outer:
for(var i=0;i<10;i++){
inner:
for(var j=0;j<5;j++){
console.log("i=" + i + "\tj=" + j);
var conf=confirm("是否结束整个循环");
if(conf){ break outer;}
}
}
2.通过设置与外循环,结束条件,结束外循环
for(var i = 0; i < 10; i++) {
for(var j = 0; j < 5; j++) {
console.log("i=" + i + "\tj=" + j);
var conf = confirm("是否结束整个循环");
if(conf) {
i=9;//通过设置与外循环,结束条件,结束外循环
break ;
}
}
}
try-catch的使用:
try{
var mymoney=10;
console.log(mymoney);
}catch(ex){//这个对象名是标识符。
console.log(ex);
}finally{
console.log("释放资源")
}
console.log("程序结束");
var xhr=new XMLHttpRequest();
xhr.open
空指针异常处理:
var str =null;
try{
document.write(str.name);
}catch(e){
document.write(e+"<br/>");
}
document.write("程序结束");
----对象:
Object:对象是具有相同属性和行为的描述,是引用类型,js的世界也是对象的世界,Object是所有对象的根
创建对象的方式:
var obj=new Object();//采用构造方法
var obj={}; //推荐使用 ,字面量方式
var obj=new Object; //省略构造方法,不推荐
js的运算符:
赋值 : 变量=表达式 连续赋值: var j=k=x=0
奇葩 赋值 var num=.5
var num=0b1010;// 二进制赋值
var num=010;//八进制赋值
var num=0xa10;//十六进制赋值
算术运算符:
+ 加法 字符串连接符
- 减法 也当作负号
/除法
特殊1:除数为0,var num=1/0,返回 undefined
特殊2:与强类型的一点区别,js除法正确。
java除法取整数
int num=1/2; // java 语言的结果:0
javascript除法取正确数
var nun=1/2;// js 语言结果:0.5
++ --与java一致
取模%: 5%2 返回1(两数相除取余数)
负数求模:-10%3 -10%-3 返回都为-1 -10.5%2返回-0.5---前者为负数,结果为负数
负数取模: 余数是正数还是负数要看被除数
第三天:函数
Math.random() Math.round()
Math.ceil()返回最接近的最大整数,适合用于后面的分页
Math.floor()返回最接近的最小整数
eval()检查js代码并执行,动态执行js
encodeRUI():将文本字符串编码为一个有效的统一资源标识符,开发过程用的上 对 : / ? ; 这4个字符不进行编码
decodeRUI():解码
非常重要,开发使用的:处理url的
encodecompent(“http://serch.jd.com?www.baidu.com?name=jack&age=20”)
这是传递网址进行编码,防止歧义, 对地址怎么处理呢?
decodecompent()解码
eval()检查并执行,动态执行js脚本
函数:包括系统函数和自定义函数(无参,带参数)
使用function关键字定义函数,不能与系统函数重名,参数可有参数和无参数
js的没有函数重载的概念,可以使用argument获取对象参数信息
例子:function abount(){
console.log("方法的参数如下");
for (var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
abount(3,2);
匿名函数:在jquery中使用的较多(js称为函数表达式)
即时函数,会形成一个私有的作用域
return:退出当前的函数
函数调用的3种方式:
1.通过函数表达式 var myFunc=function(){console.log("ok")}
2.即时函数 (function(){console.log("ok")})();
3.通过事件 window.onload=funciton(){ console.log("ok")}
4.通过使用链接调用
<a href="javascript:Func()">ddd</a>
<a href="javascript:void(0)">ddd</a>
重要:in for..in / instanceof
测试对象中是否存在该属性:---in ----- 常用
var a = new Array("a","b"); var isIn=length in a; console.log(isIn); ---true
结合for循环,遍历所有属性 for(var w in window){console.log(w);}
instanceof 数据类型:指变量是否可以强转指定的类型,检测类型的时候兼容
作用域:
变量的使用范围与变量定位的位置 有关系
全局变量:在整个js运行过程中都能访问
注意:
对于没有使用var定义的变量是隐式全局变量,要先执行一遍后才才生效,否则就是没有定义的变量,不推荐使用,会污染
使用var 定义的变量会自动添加到最近的环境中
局部变量:
js中没有块级作用域,在ES5中新增加let定义块级作用域,新增const定义常量 这也是块级别作用域
对象:
Object可以理解成一个变量,可以含有多个变量,只通过一个变量来操作
1.通过new来创建
2.通过字面量来创建--推荐使用
第4天:常见的引用类型
1.Object
2.Array数组-----对数据操作
什么是数组:
1.一次排列多个值,每个值都有对应的编号,从0开始
2.数组元素的类型可以不一样
3.数组的作用在对数据的管理,方便对数据的操作
创建数组:
js中的数组没有真正意义上的下标,而是属性。所以不存在数组越界
常用创建方式:
var Array=[];空数组
var Array=["aa","bb","cc","dd"]
赋值:边创建,边赋值。先创建,在赋值
给数组添加属性:
注意: [ ] 除了数组中索引号,也可以用来给对象添加属性,获取对象的属性值
数组的截断:--通过length
var arr=[1,2,3,4,5]
arr.length=3 arr.length=0(清空)
数组类型的判断:
1.Array.isArray() ES5的提供的API
var arr=["javas","html"]; Array.isArray(arr); //true
2.instanceof操作符
var arr=["javas","html"]; console.log(arr instanceof Array); //true
3. constructor属性
var arr=["javas","html"]; arr.constructor===Array //true
常见的数组操作方法:
Array.join()---分隔成数组,把字符连接成数组的元素,并将结果返回
var arr=[2,6,9,10]; var str=arr.join(); console.log(str); // "2,6,9,10"
str.split()---分隔成数组
var str="web前端/java/css/json";
var webs=str.split("/"); console.log(typeof webs);
console.log(webs); //["web前端","java","css","json"]
栈方法(数组元素添加与删除):
push() pop() shift() unshift()
1.向数组末尾添加元素 push()
var arr=[]; arr.push(1); arr.push(3); // 2 表示添加的个数 arr变为 [2,3]
向数组末尾移除最后的元素pop()
var arr=[2,3]; arr.pop();//[3],表示移除的元素 arr变为[2]
2.shift() 添加与unshift()移除 --对第一个元素进行操作
var arr=["A","B","C"]; arr.shift();//[A] arr变为["B","C"]
arr.unshift("DE");//3 --当前元素的个数 arr变为["DE","B","C"]
数组元素的排序:
reverse() sort() sort(compareFn)
3.数组的元素的翻转 reverse()
var arr=["A","B","C"]; arr.reverse(); //["C","B","A"]
4.sort()
sort()不带参数是默认按照字符串升序排列,在比较的时候,会将元素转化成字符串在比较,比较的是第一个字符
var arr=["java","ajax","css"]; arr.sort(); //["ajax","css","java"]
var arr=[11,15,22,56,33,3,5,6];arr.sort();//[11,15,22,3,33,5,56,6]---哈哈,不合理了吧
sort(compareFn)----;sort()提供了一个带比较函数的参数
var arr=[11,15,22,56,33,3,5,6];
arr.sort(function(num1,num2){ return num1-num2;}); console.log(arr);//[3,5,6,11,15,22,33,56]
arr.sort(function(num1,num2){ return num2-num1;}); console.log(arr);//降序
数组的其他操作:连接 截取 剪接
concat() slice() splice()
1. concat()连接两个数组
var arr1=["A","B","C"];var arr2=[2,3];var arr=arr1.concat(arr2);console.log(arr);//["A","B","C",2,3]
2. slice(start,end)截取数组,返回截取后的数组,包含start位置,不包含end位置 -- 不影响原来的数组
var arr=[11,15,22,56,33,3,5,6];
console.log(arr.slice(3,7));//[56,33,3,5]
console.log(arr.slice(3));//[56,33,3,5,6];
console.log(arr);//[11,15,22,56,33,3,5,6];//原来数组不变,即不影响原来的数组
3. splice()数组剪接,可以对数组做很多添加、删除、更新的操作------应用频率要高,功能较强大
splice(start,deleteCount,items)
start:可选参数,操作的起始位置,从0开始计数的
deleteCount:删除的个数
items:替换删除位置的值
var arr=[11,15,22,56,33,3,5,6];
arr.splice();//不做操作
arr.splice(3,2,100,101,102);//[56,33]
console.log(arr)//[11,15,22,100,101,102,3,5,6]
var arr1=[11,15,22,56,33,3,5,6];
arr1.splice(0,0,200,300); console.log(arr1);//[200,300,11,15,22,56,33,3,5,6]
数组找位置:
indexOf() lastIndexOf() str.substring()
indexOf():通过找数组中的某个元素,返回这个元素的位置,找不到返回-1
var arr=["java","ajax","hh","css","aa","hh"];
console.log(arr.indexOf("css")); //3
console.log(arr.indexOf("css22222"));//-1找不到返回-1
lastIndexOf():通过寻找数组中最后出现的某个元素(假设有重复元素),返回这个元素的位置
console.log(arr.lastindexOf("hh"));//5,找的是后面那个“hh” ,找不到-1
str.substring()---截取字符串
var str="Hello world!"
document.write(str.substring(3)) //lo world
document.write(str.substring(3,7)) //lo w
数组的几种迭代操作:
forEach() filter() map() reduce()
1.forEach()
var num=[10,20];
num.forEach(function(item,index,array){console.log("item="+item+"index="+index+"array="+array)});
//输出item=10 index=0 array=10,20 item=20 index=1 array=10,20
item:表示遍历数组的元素 index:元素的下标 array:原始数组对象
2.filter()数组过滤
var num=[10,20,30,40,50,60];
var newnum=num.filter(function(item,index,array){return item%3==0;});
console.log(newnum);//[30,60]
console.log(num);//[10,20,30,40,50,60]
3.map()数组映射 ,给符合条件的数据重新赋值
var num=[10,20,30,40,50,60];
var newnum=num.map(function(item,index,array){if(item%3==0){return item+2};});
console.log(newnum);//[undefined,undefined,32,undefined,undefined,62]
console.log(num);//[10,20,30,40,50,60]
4.reduce()缩小方法:迭代所有的元素最终返回一个值 reduceRight()表示从右边开始遍历
//prev:当前一个值 cur:当前值 index:当前下标 array:原始数组
var num=[10,20,30,40,50,60];
var newnum=num.reduce(function(prev,cur,index,array){return prev});//10
var newnum=num.reduce(function(prev,cur,index,array){return cur});//60
var newnum=num.reduce(function(prev,cur,index,array){return prev+cur});//210相当于求和
console.log(newnum);
console.log(num);
-----日期对象
Data日期类型:
Data对象的构造:
var date=new Date(); //以当前时间来构造
var date=new Date(2017,04,01); //以指定的时间来构造
比较特殊:1--12月在js中是0--11 周一-周五 1-5 周日是0
获取 date.getFullYear() getMonth() getDate()-日 getHours() getMinutes() getSeconds() getMillseconds()-毫秒 getDay()-星期
date.getTime()---把正常时间写法转为 获取自1970-1-1到现在的毫秒数
设置时间:对应使用 set
var now=Date.now()获取1970-1-1到现在的毫秒数
日期的转换:
1.字符串转日期
var str="2017-5-3" var date=Date.parse(str); console.log(date); //输出的是毫秒数
毫秒数再转成日期格式 var newdate=new Date(date) //Mon May 01 2017 00:00:00 GMT+0800 (中国标准时间)
2.日期转字符串
var date=new Date();
console.log(date.toLocaleDateString()); //转本地日期格式 2017/5/8
console.log(date.toLocaleTimeString()); //转本地时间格式 下午3:23:56
console.log(date.toLocaleString()); //转本地日期+时间 2017/5/8 下午3:23:56
--BOM对象
BOM:
window对象:对地址栏,存储数据,文档之类的交互操作
window===this;//true
1.BOM的基本概念
2.window对象与ECMAscript的联系
3.window的全局作用域
4.自动的扩展属性和window添加的属性的细微区别
区别一:自动的扩展属性不能够直接删除
var address="深圳";
delete address;//false
window.age=20;
delete age;//true
区别二:定义的变量查找方式不一样
var myAge=age;//报错,在作用域链上查找,找不到(在本地找)
var myAge=window.age;//undefined,直接在window对象上找,找不到返回undefinded
在js中明确调用的对象是一个好的习惯,也能提升程序的性能
重要:
navigator: 浏览器类型的判断
var browser=navigator.userAgent;
if(browser.indexOf("MSIE")>0){
console.log("IE浏览器")}
else if(browser.indexOf("Chrome")>0){
console.log("Google浏览器");
}else if(browser.indexOf("Firefox")>0){
console.log("Google浏览器");
}else{
console.log("其他浏览器");
}
window的几个属性: location screen history
location:host hostname href port protocol reload() replace() search:获取参数信息
----定时器(延时器)
setTimeout() clearTimeout()-----
setInterval() clearInterval()----周期性延时器
cookie:
cookie存储在客户端,打开浏览器发送请求,cookie会自动发送到服务器,由服务器读取,cookie的数据持续时间由用户自己定义
但cookie大小有限一般在4096字节,即3K限制,cookie一般安全隐患较大,一般不要把登录注册的重要信息用cookie存储,cookie只 存储一些不是很重要的标识信息。
计算机中,用户一般设置为禁用!!
cookie特点:
cookie的内容:采用key=value;key=value..存储,参数名自定义
cookie的过期时间:使用参数 expires
cookie的路径:使用path, “/”表示这个网站的网页,不推荐。容易造成冲突
注意: 形如“/pro/index.html” 路径,在google浏览器正常,在IE浏览器得不到值
设置cookie : var name="jack",pwd="123" var now=new Date(); now.settime(now.getTime()+1*24*60*60*1000); //转毫秒
document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path; //姓名
document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString() + ";path=" + path; //密码
读取cookie :var data=document.cookie;
删除cookie : var name=null,pwd=null,now=new DAte()
其他存储 方式:
html5 的web存储:
localStorage:本地存储
1.使用key-value的形式存储数据,数据只能是String数据
2.使用setItem()存储,使用getItem()获取
3.数据是永久存储的,即便是浏览器关闭或者电脑重启数据不丢失。
4.有效访问:针对同一个客户端,浏览器、网站有效(只能在同一中浏览器上,同一个网站下,localStore的值是按照网站名称来存储。
同一个网站下面的所有页面都是能够访问的)
页面间的传值:
第一种:使用cookie
步骤:
第一页:进行获取输入的内容,设置cookie存储
第二页:通过var data=document.cookie获取cookie内容;主要是获得key,那就要通过indexOf(),在通过substring()找到key对应的value值
第二种:使用queryString(url参数传值)
步骤:
第一页:
通过节点获得内容,利用url="getquerystring.html?myname="+strName;
strName需要encodeURIComponent(strName),指定打开方式// 本窗口location.href=url;
另起窗口 window.open(url,"cookie");
第二页:获得显示内容,写一个获取参数的方法,里面解析通过location.location.search.substring(1):"" 解析url
第6天:Document
document的方法:
getElementById("id")--返回对应标签的元素对象,都继承HTMLElement,参数大小区分大小写
getElecmentsByClassName("xx") --返回HTMLCollection,参数区分大小写
getElecmentsByName("yy")--返回Nodelist
getElecmentsByTagName("div")--根据标签获取元素,返回HTMLCollection,参数区分大小写
getRootNode() --获取根节点,返回document对象
querySelector()--返回HTMLElement对象,参数不区分大小写
querySelectorAll()--返回Nodelost,参数不区分大小写
document的属性:
常用的:
document.documentElement --始终返回<html>... </html>