JavaScript笔记
JavaScript基础
JavaScript介绍
JavaScript是互联网上最流行的脚本语言,这门语言可用于web和HTML,更可广泛用于服务器、pc端、移动端。
JavaScript脚本语言:
JavaScript是一种轻量级的编程语言
JavaScript是可插入HTML页面的编程代码
JavaScript插入HTML页面后,可由所有的浏览器执行
JavaScript实现
JavaScript用法:
HTML中的脚本必须位于<script></script>
标签之间
脚本可被放置在HTML页面的<body>
和<head>
部分中
JavaScript标签:
在HTML中插入JavaScript,使用<script>
标签
在<script></script>
之间书写代码
JavaScript使用限制:
在HTML中,不限制脚本数量
通常会把脚本放置于<head>
标签中,以不干扰页面内容
JavaScript输出
JavaScript通常用来操作HTML
文档输出:documnet.write("<p>this is my first JavaScript</p>");
JavaScript语法
1-JavaScript语句:JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
2-分号:语句之间的分割是分号(;),注意:分号是可选项,有时候看到不以分号隔开的。
3-JavaScript代码:按照编写顺序依次执行
4-标识符:
JavaScript标识符必须以字母、下划线或美元符号开始
JavaScript关键字
5-JavaScript对大小写敏感:JavaScript同样对大小写很敏感
6-空格:JavaScript会忽略到多余的空格
7-代码换行:
8-保留字:
JavaScript注释
单行注释://
多行注释:/**/
JavaScript变量
变量是用来储存信息的“容器”,var i=10;
JavaScript数据类型
字符串(String)
数字(Number)
布尔(Boolean)
数组(Array)
对象(Object)
空(null)
未定义
可以通过赋值为null的方式清楚变量
JavaScript语法
JavaScript运算符
算数运算符:+
、-
、*
、%
、/
、++
、--
赋值运算符:=
、+=
、-=
、*=
、/=
、%=
字符串操作:
比较运算符:==
、===
、!=
、!==
、>
、<
、>=
、<=
逻辑运算符:&&
、||
、!
条件运算符:x<10?"x比10小":"x比10大"
JavaScript条件语句
if...else
switch
JavaScript循环语句
for
循环、 for/in
while
循环、 do...while
JavaScript跳转语句
break
跳出当前循环,不再进行下一次循环
continue
跳出本次循环,进行下一次循环,结束当前循环的迭代
JavaScript函数
了解函数
函数:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
定义函数
定义函数:function 函数名(){函数体;(代码块)}
注意:JavaScript对大小写十分敏感,所以这里的function必须小写。在函数调用时,也必须按照函数的相同名称来调用函数
函数调用
函数调用:函数在定义好之后,不能自动执行,需要进行调用
调用方式:
- 在
<script>
标签内调用 - 在
HTML
文件中调用
带参数的函数
函数参数:在函数的调用中,也可以传递值,这些值被称为参数。demo(arg 1,arg 2);
参数的个数可以为任意多,每个参数通过“,”隔开
注意:参数在传递时,其顺序必须一致
参数意义:通过传递参数的个数以及参数的类型不同完成不同的功能
带返回值的函数
返回值:有时,我们需要将函数的值返回给调用他的地方
通过return语句就可以实现
注意:在使用return语句时,函数会停止执行,同时返回值
局部变量和全局变量
局部变量:只能在当前函数中使用
全局变量:任何地方都可以使用
JavaScript异常捕获
异常:当JavaScript引擎执行JavaScript代码时,发生了错误,导致程序停止运行。
异常抛出:当异常产生,并且将这个异常生成一个错误信息
异常捕获:try{发生异常的代码块;}catch(err){错误信息处理;}
Throw语句:通过throw语句创建一个自定义错误
JavaScript事件
什么是事件:事件是可以被JavaScript侦测到的行为
主要事件:
- onClick:单击事件
- onMouseOver:鼠标经过事件
- onMouseOut:鼠标移出事件
- onChange:文本内容改变事件
- onSelect:文本框选中事件
- onFocus:光标聚集事件
- onBlur:移开光标事件
- onLoad:网页加载事件
- onUnload:关闭网页事件
JavaScript-DOM
DOM简介
HTML DOM:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
DOM操作HTML:
- JavaScript能够改变页面中的所有HTML元素
- JavaScript能够改变页面中的所有HTML属性
- JavaScript能够改变页面中的所有CSS样式
- JavaScript能够对页面中的所有事件做出反应
DOM操作HTML
1-改变HTML输出流:注意:绝对不要在文档加载完成之后使用document.write()
。这会覆盖该文档。
2-寻找元素:
通过id找到HTML元素
通过标签名找到HTML元素:相同元素中的第一个
3-改变HTML内容:使用属性:innerHTML
4-改变HTML属性:使用属性:attribute
DOM操作CSS
通过DOM对象改变CSS:语法:document.getElementById(id).style.property=new style
DOM EventListener
DOM EventListener:
方法:addEventListener(): removeEventListener():
addEventListener():方法用于向指定元素添加事件句柄
removeEventListener():移除方法添加的事件句柄
JavaScript事件详解
事件流
事件流:描述的是在页面中接受事件的顺序
事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)
事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件
事件处理
1-HTML事件处理:直接添加到HTML结构中,事件名修改后处理不方便
2-DOM0级事件处理:把一个函数赋值给一个事件处理程序属性,会被后面的覆盖
3-DOM2级事件处理:不会被覆盖,比较常用
addEventListener(“事件名”,“事件处理函数”,“布尔值”);
true:事件捕获
false:事件冒泡
removeEventListener();
4-IE事件处理程序:<=IE8的版本中使用
attachEvent
detachEvent
事件对象
事件对象:在触发DOM事件的时候都会产生一个对象
事件对象event:
- type:获取事件类型
- target:获取事件目标
- stopPropagation():阻止事件冒泡
- preventDefault():阻止事件默认行为
JavaScript内置对象
什么是对象
1-什么是对象:JavaScript中的所有事物都是对象:字符串、数值、数组、函数…
每个对象带有属性和方法
JavaScript允许自定义对象
2-自定义对象:
定义并创建对象实例
使用函数来定义对象,然后创建新的对象实例
String字符串对象
String对象:String对象用于处理已有的字符串,字符串可以使用双引号或单引号
在字符串中查找字符串:indexOf()
内容匹配:match()
替换内容:replace()
字符串大小写转换:toUpperCase()
/toLowerCase()
字符串转为数组:strong>split()
字符串的属性和方法:
- 属性:
length
、prototype
、constructor
- 方法:
charAt()
、charCodeAt()
、concat()
、fromCharCode()
、indexOf()
、lastIndexOf()
、match()
、replace()
、search()
、slice()
、substring()
、substr()
、valueOf()
、toLowerCase()
、toUpperCase()
、split()
Date日期对象
Date对象:日期对象用于处理日期和时间
获得当日的日期:
常用方法:
getFullYear()
:获取年份getTime()
:获取毫秒setFullYear()
:设置具体的日期getDay()
:获取星期
时钟实例
Array数组对象
Array对象:使用单独的变量名来存储一系列的值
数组的创建:var myArray=["hello","iwen","ime"];
数组的访问:通过制定数组名以及索引号码,你可以访问某个特定的元素;注意:[0]是数组的第一个元素,[1]是数组的第二个元素。
数组常用方法:
- concat():合并数组
- sort():排序
- push():末尾追加元素
- reverse():数组元素翻转
Math对象
Math对象:执行常见的算数任务
常用方法:
- round():四舍五入
- random():返回0~1之间的随机数
- max():返回最高值
- min():返回最低值
- abs():返回绝对值
JavaScriptDOM对象控制HTML
方法:
- getElementsByName():获取name
- getElementsByTagName():获取元素
- getAttribute():获取元素属性
- setAttribute():设置元素属性
- childNodes():访问子节点
- parentNode():访问父节点
- createElement():创建元素节点
- createTextNode:创建文本节点
- insertBefore():插入节点
- removeChild():删除节点
- offsetHeight:网页尺寸,不包含滚动条
- scrollHeight:网页尺寸,包含滚动条
JavaScript浏览器对象
window对象
1-window对象:
window对象是BOM的核心,window对象指当前的浏览器窗口
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一
2-window尺寸
window.innerHeight
-浏览器窗口的内部高度
window.innerWidth
-浏览器窗口的内部宽度
3-window方法
window.open()
-打卡新窗口
window.close()
-关闭当前窗口
计时器
计时事件:通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件
计时方法:
setInterval()
:间隔指定的毫秒数不停地执行指定的代码clearInterval()
:用于停止setInterval()
方法执行的函数代码setTimeout()
:暂停指定的毫秒数后执行指定的代码clearTimeout()
:用于停止执行setTimeout()
方法的函数代码
History对象
History对象:window.history对象包含浏览器的历史(URL)的集合
History方法:
history.back()
:与在浏览器点击后退按钮相同history.forward()
:与在浏览器中点击按钮向前相同history.go()
:进入历史中的某个页面
Location对象
Location对象:window.location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面。
Location对象的属性:
location.hostname
:返回web主机的域名location.pathname
:返回当前页面的路径和文件名location.port
:返回web主机的端口location.protocol
:返回所使用的web协议(http://或https://)location.href
:属性返回当前页面的URLlocation.assign()
:方法加载新的文档
Screen对象
Screen对象:window.screen对象包含有关用户屏幕的信息
属性:
screen.availWidth
:可用的屏幕宽度screen.availHeight
:可用的屏幕高度screen.Height
:屏幕高度screen.Width
:屏幕宽度
JavaScript瀑布流效果
布局
实例
JavaScript面向对象
认识面向对象
面向对象中的概念:
一切事物皆对象
对象具有封装和继承特性
信息隐藏
基本面向对象
var person={
name:"iwen",
age:30,
eat:function(){
alert("能吃")
}
}
函数构造器构造对象
function Person(){}
Person.prototype = {
name:"iwen",
age:30,
eat:function(){
alert("我在吃")
}
}
var p = new Person();
p.name
深入JavaScript面向对象
(function(){
var n = "ime";
function People(name){
this._name = name;
}
People.prototype.say = function(){//扩展方法
alert("peo-hello"+this._name+n);
}
window.People = People;
}());
(function(){
function Student(name) {
this._name = name;
}
Student.prototype = new People();//Student继承People
var superSay = Student.prototype.say;
Student.prototype.say = function(){//复写父类方法
superSay.call(this);
alert("stu-hello"+this._name);
}
window.Student = Student;
}());
var s = new Student("iwen");
s.say()
function Person(name){
var _this = {}
_this._name = name;
_this.sayHello = function(){
alert("PHello"+_this._name);
}
return _this;
}
function Teacher(name){
var _this = Person(name);
var superSay = _this.sayHello;
_this.sayHello = function(){
superSay.call(_this);
alert("Thello"+_this._name);
}
return _this;
}
var t = Teacher("iwen");
t.sayHello();