JS基础
一、JavaScript 语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器应该做什么。
二、分号
语句之间的分割是分号；
注意：分号是可选项，有时候看到不以分号隔开的。
三、JavaScript代码
按照编写顺序依次执行
四、标识符
JS标识符必须以字母、下划线或美元符号开始
JS关键字
五、JS同样对大小写很敏感
六、注释
单行注释 //…
多行注释 /* … */
七、变量
1、变量是用来储存信息的容器
var a =”1”;
八、数据类型
字符串 String var string = “hello”;
数字 Number var i= 10;
布尔Boolean var flag= true;
数组Array var arr=[1,2,3,4];
var arr=[“hello”,”world”,”jike”,”xueyuan”];
var arr=new Arry(“hello”,”world”,”jike”,”xueyuan”);
对象Object
空null
未定义
可以通过赋值为空null的方式定义对象
九、转换类型
type of (); 操作符 判断类型
value of(); 操作符 直接返回值（数值、字符串或布尔值的true或false）
1、转为字符串 toString(); 不必传参，传参可以转为二进制、八进制等等 ；string(变量) 可以转换任何类型的值为字符串
2、转为数值：number() 转数值 parseInt()转整数 parseFloat() 转浮点
JS语法讲解
一、运算符
1、算数运算符 + - * % / ++ –
先运算再加i++
先加再运算++i = i+1
2、赋值运算符 = += -= *= /= %=
i+=j 等于 i=i+j
3、字符串操作
4、比较运算符 == ===（值和类型都要一样） != !==(值和类型都要不一样) > < >= <=
5、逻辑运算符 &&(and) ||(or) !(相反)
6、条件运算符
二、条件语句
1、if..else
if (条件){
执行语句;
}else{
执行语句;
}
或 嵌套循环
if (条件){
执行语句;
}else if{
执行语句;
}else if{
执行语句;
}
2、switch
switch(条件){
case 1: //注意此处是冒号
执行语句;
break; //跳出判断
case 2:
执行语句;
break;
default: //当条件不满足以上case 都会执行default
执行语句;
break;
}
三、循环语句
1、for循环
var i=[1、2、3、4、5];
var j;
for(j in i){ //如果j是i里面的元素
执行语句;
}
2、while循环 do..while
while (条件){ //先判断再执行 判断有效才会被执行
//执行
}
或
do{ //先执行再判断 至少要被执行一次
// 执行
}while(条件){
}
四、跳转语句
1、break; 跳出当前循环
2、continue; 结束当循环 进行下一次循环
JS函数
一、什么是函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
var a=10;
var b=a+1;
a是变量，b是a的函数
function name(){}
name是函数名
二、**定义函数**
function 函数名(){
函数体; (代码块)
}
三、**函数调用**
1、在script里调用
2、在html中调用
四、**带参数的函数**
1、函数参数
在函数的调用中，也可以传值，这个值被称为参数
例 demo(arg1,arg2);
2、参数的个数可以任意多，每个参数通过“，”隔开
3、参数在传递时，顺序必须一致
4、意义：通过传递参数的个数以及参数的类型不同完成不同的功能
例
function demo(a,b){
var sum = a+b;
alert(sum);
}
demo(10,20);
五**、带**返回值的函数
1、返回值
有时，我们需要将函数的值返回给调用他的地方
通过return语句实现
使用return时，函数会停止，同时返回值
2、局部变量和全局变量
var a = 10; //全局变量 任何地方都可以使用
function demo(){
var i = 0; //局部变量 只能在当前函数中使用
x =10; //全局变量
}
JavaScript异常处理和事件处理
一、异常捕获
1、异常：当js执行出现错误，导致程序停止运行
2、当异常发生时，并且将这个异常生成一个错误信息
3、异常捕获
try{
发生异常的代码块
}catch(err){
}
二、事件
DOM Doucument Object Model
一、**DOM元素 控制 HTML**
1、改变html的输出流
document.write()
2、导找元素
通过ID找到HTML元素
document.getElementById(“”)
通过标签名找到HTML元素
document.getElementsByTagName(“”) //相同元素中的第一个标签元素
3、改变HTML内容
document.getElementById(“”).innerHTML=””
4、改变HTML属性
使用属性attribute
二、DOM元素控制CSS
document.getElementById(“”).style
三、DOM句柄
addEventListener
removeElentListener
document.getElementById(“”).addEventListener(“click”,function(){
alert(“hello”);
});
Js事件讲解
一、事件流
二、事件处理
1、HTML事件处理
2、DOM0级事件处理
onclick写入js里 (弊端:只处理最后一个事件 会被覆盖)
idname.onclick = function(){…};
3、DOM2级事件处理 （推荐所有事件按顺序处理 不会被覆盖）
addEventListener(“事件名”，”事件处理函数”，”布尔值”) / removeEventListerner
true:事件捕获
false:事件冒泡
removeEventListener();
example:
var btn1 = document.getElementById(“”).addEventListerner(“click”,function(){
alert(“hello”)
});
or:
var btn1 = document.getElementById(“btn1”);
btn1.addEventListerner(“click”,demo);
function demo(){
alert(“hello”)
};
4、IE事件处理程序 兼容以前
attachEvent
detachEveent
三、事件对象
在触发DOM事件的时候会触发一个事件对象
1）type获取事件类型
2）target获取事件目标
3）stopPropagation(); 阻止事件冒泡
4）preventDefault(); 阻止事件默认行为
example:
document.getElementById(“btn1”).addEventListerner(“mouseover”,showtype);
function showtype(event){
// alert(event.type);
alert(event.target);
event.stopPropagation(); //阻止事件冒泡
event.preventDefault(); //阻止事件默认行为 比如A标签的连接指向
}
Js内置对象
一、什么是内置对象
js中所有事物都是对象，数组、字符串、日期、函数…
对象都带有属性(图片的长或宽或者A标签的连接…)和方法(对象提供的使用方式例如日期有年月份…)
js允许自定义对象：1、定义并创建实例 2、使用函数来定义对象，然后创建新的对象实例
<–创建对象–>
例1
people = new Object();
people.name = “ivy”;
people.age = “20”;
document.write(“name”+people.name+”age”+people.age);
例2
function people(name,age){
this._name=name;
this._age=age;
}
son = new people(“ivy”,30);
document.wirte(“name:”+son._name + “age” + son._age);
二、string字符串对象
1、string用于处理已有的字符串 字符串可以使用单引号或双引号
2、在字符串中查找字符串 indexOf()
3、内容匹配 match()
4、内容替换 replace()
5、字符串大小写转换 toUpperCase() / toLowerCase()
6、字符串转为数组 strong>split()
var str = “hello world”;
document.write(“字符串长度为”+ str.length); // 字符串长度
document.write(str.indexOf(“hello”)); //当前字符串是否存在 存在1不存在-1 第2点
document.write(str.mach(“hello”)); //是否匹配 是就1 否是null 第3点
document.write(str.replace(“world”,”jikexueyuan”)); //替换字符串 第4点
document.write(str.toUpperCase()); //大小写转换 第5点
//第6点
字符串属性
length、prototype、constructor
字符串方法
charAt()、charCodeAt()、contact()、fromCharCode()、indexOf()、lastIndexOf()、match()、replace()、search()、slice()、substring()、substr()、valueOf()、toLowerCase()、toUpperCase()、split()
三、date日期对象 处理日期和时间
1、常用方法
var date = new Date();
document.write(date); //获得当日日期
document.write(getFullYear()); //获取年份
document.write(getTime()); //获取毫秒
document.write(setFullYear()); //设置具体的日期
document.write(getDay()); //获取星期
2、时钟操作
四、Array数组对象
1、使用单独变量名来存储一系列的值
2、数组的创建
var myArray = [“hello”,”ivy”,”me”]
3、数组的访问
通过指定数组名以及索引号码，你可以访问某个特定的元素
注意：[0]就数组的第一个元素
4、数组常用的方法
concat(); 合并数组
var a = [“hello”,”world”];
var b = [“my”,”name”];
var c = a.contact(b);
sort(); 排序
var a = [“5”,”2”,”4”,”3”,”1”];
document.write(a.sort()); //升序
document.write(a.sort(function(){
return b-a; })); //降序
push(); 末尾追加元素
var a = [“a”,”b”];
a.push(“c”);
document.write(a);
reverse(); 数组元素翻转 首尾翻转
var a = [“c”,”a”,”b”];
document.write(a.reverse());
五、math对象
执行常见的算数任务
常用方法：
round();四舍五入
document.write(Math.round(2.5));
random(); 返回0-1之间的随机数
document.write(Math.random());
document.write(parseInt(Math.random()*10));
max(); 返回最高值
document.write(Math.max(“10”,”3”,”20”,”1”));
min(); 返回最低值
abs();返回绝对值
document.write(Math.abs(10));
DOM对象控制HTML元素详解
方法
getElementByName() 获取name
getElementByTagName() 获取元素
getAttribute() 获取元素属性
setAttribute() 设置元素属性
childNodes() 访问子节点
parentNode() 访问父节点
creatElement() 创建元素节点
creatTextNode 创建文本节点
insertBefore() 插入节点
removeChild() 删除节点
offsetHeight 网页尺寸
scrolll leight 网页尺寸
JS浏览器对象
一、windows对象
windows对象 是BOM的核心 ，指当前的浏览器窗口。
所有js的全局对象 、函数、变量均自动 成为windows对象 的成员 。
全局对象是windows对象的属性
函数是windows对象的方法
document也是windows对象的属性之一
windows尺寸
window.innerHeight - 浏览器窗口的内部高度
window.innnerWidth - 浏览器窗口的内部宽度
document.write(window.innerHeight +”,” + window.innerWidth);
windows方法
window.open() 打开新窗口
function 函数名(){window.open(“index.html”,”name”,”height=200,width=200,top=100,toolbar=no,menubar=no”);}
window.close() 关闭当前窗口
function 函数名(){window.close();}
二、计时器
计时事件 - 设定一个时间间隔后来执行代码
计时方法 -
1）setInerval() 间隔指定毫秒数不停地执行指定的代码
clearInerval() 停止以上执行
2）setTimeout() 暂停指定毫秒数后执行指定的代码
clearTimeout() 停止以上执行
三、History对象
对象：window.history 对象包含浏览器的历史(url)的集合
方法：
history.back() 与在浏览器点击后退按钮相同
history.forward() 与在浏览器点击前进按钮相同
history.go() 进入历史中的某个页面
四、Location对象
window.location 对象用于获取当前页面的地址url,并把浏览器重新指向于新的页面。
Location对象属性：
location.hostname 返回web主机域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol 返回所使用的web协议 http://
location.href 属性返回当前页面的url
location.assign() 方法加载新的文档
五、Screen对象
window.screen 对象包含有关用户屏幕的信息
属性：
screen.availWidth - 可用屏幕的宽度
screen.availHeight - 可用屏幕的高度
screen.width - 屏幕宽度
screen.height - 屏幕高度
document.write(“可用高度：”+screen.availHeight +”,可用宽度：”+screen.availWidth);
document.write(“屏幕高度：”+screen.height +”,屏幕宽度：”+screen.width);
JS面向对象
一、面向对象
1、面向对象中的概念
1）一切事物皆对象
2）对象具有封装和继承的特性
3）信息隐藏