前端三大块
- HTML:页面结构
- CSS:页面表现—元素大小、颜色、位置、隐藏或显示、部分动画
- JavaScript:页面行为—部分动画效果、页面与用户的交互、页面功能
JavaScript介绍
JavaScript是运行在浏览器端的脚本语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互。
JavaScript是浏览器解释执行的,前端脚本语言还有JScript(微软,IE独有),ActionScript(Adobe公司,需要插件)等。
JavaScript组成
- ECMAscript javascript的语法(变量、函数、循环语句等语法)
- DOM文档对象模型 操作html和css方法
- BOM浏览器对象模型 操作浏览器的一些方法
JavaScript嵌入页面的方式
- 行间事件(主要用于事件)
- 页面script标签嵌入
部分关键字break
:终止switch或循环continue
:跳出循环并在顶端开始debugger
:停知执行JavaScript,并调用调试函数(如果可用)do...while
:执行语句块,并在条件为真时重复代码块for
:标记需要被执行的语句块,只要条件为真function
:声明函数if...else
:标记需要被执行的语句块,根据某个条件return
:退出函数switch
:标记需要被执行的语句块,根据不同的情况try...catch
:对语句块实现错误处理var
:声明变量
变量和数据结构
变量
JavaScript时一种弱类型语言,JavaScript的变量类型由它的值来决定。定义变量需要关键字’var’
var iNum = 123;
var sTr = 'asd';
同时定义多个变量可以用","隔开,公用一个’var’关键字
var iNum = 45, sTr = 'qwe', sCount = '68';
变量类型
5种基本数据类型:
- number数据类型
- string字符串类型
- boolean布尔类型:true或false
- undefined类型,变量声明未初始化,它的值就是undefined
- null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null
匈牙利命名风格
对象o Object 比如:oDiv
数组a Array 比如:altems
字符串s String 比如:sUserName
整数i Integer 比如:iItemCount
布尔值b Boolean 比如:bIsComplete
浮点数f Float 比如:fPrice
函数fn Function 比如:fnHandler
正则表达式re RegExp 比如:reEmailCheck
数组方法aList.length
:获取数组长度aList[0]
:用下表操作数组的某个数据join()
:将数组成员通过一个分隔符合并成字符串push()
:在数组最后增加成员pop()
:从数组最后删除成员unshift()
:从数组前面增加成员shift()
:从数组前面删除成员aList.reverse()
:将数组反转indexOf()
:返回数组中元素第一次出现的索引值splice()
:在数组中增加成员或删除成员
aList.splice(2,1,7,8,9);从第2个元素开始,删除一个元素,然后在此位置增加7,8,9三个元素
字符串
- 字符串合并操作:“+”
数字与字符串相加等同于字符串相加 -
parselnt()
:将数字字符串转化为整数 -
parseFloat()
:将数字字符串转化为小数 -
split()
:把一个字符串分隔成字符串组成的数组 -
charAt()
:获取字符串中的某一个字符 -
indexOf()
:查找字符串是否含有某字符 -
substring()
:截取字符串 substring(start,end) 不包括end -
toUpperCase()
:字符串转大写 -
toLowerCase()
:字符串转小写
字符串反转:str2=str1.split(’’).reverse().join(’’)
JavaScript输出
JavaScript没有任何打印或者输出的函数
JavaScript显示数据:
window.alert()弹出警告框
document.write()方法将内容写道HTML文档中
innerHEML写入到HTML元素
consle.log()写入到浏览器的控制台
操作HTML元素,使用document.getElementById(id)访问某个HTML元素
JavaScript错误 - Throw和Try to Catch
try语句是您能够测试代码块中的错误
catch语句允许您处理错误
throw语句允许您创建自定义错误
finally使您能够执行代码,在try和catch之后,无论结果如何
JavaScript对象
对象因为是变量。但是对象包含很多值。
值以 名称:值 对的方式来书写
JavaScript对象是被命名值的容器
对象方法
方法是在对象上执行的动作
方法以函数定义被存储在属性中
访问对象属性 对象名.属性
访问对象方法 对象名.方法名()
HTML DOM 文档对象模型
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被结构化为对象树
通过这个对象模型,JavaScript获得创建动态HTML的所有力量:
JavaScript能改变页面中的所有HTML元素
JavaScript能改变页面所有的HTML属性
JavaScript能改变页面所有的CSS样式
JavaScript能删除已有的HTML元素和属性
JavaScript能添加新的HTML元素和属性
JavaScript能对页面中所有已有的HTML事件做出反应
JavaScript能在页面创建新的HTML事件
什么是DOM?
DOM是意象W3C(World Wide Web Consortium)标准。
DOM定义了访问文档的标准:
“W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本的访问、更新文档的内容、结构和样式。“
W3C DOM标准被分为3个不同的部分:
Core DOM - 所有文档类型的标准模型
XML DOM - XML文档的标准模型
HTML DOM - HTML文档的标准模型
什么是HTML DOM?
HTML DOM是HTML的标准对象模型和编程接口。它定义了:
作为对象的HTML元素
所有HTML元素的属性
访问所有HTML元素的事件的方法
所有HTML元素的事件
换言之:HTML DOM是关于如何获取、更改、添加或删除HTML元素的标准。
DOM编程界面
HTML DOM能够通过JavaScript进行访问(也可以通过其他编程语言)。
在DOM中,所有HTML元素都被定义为对象。
编程界面是每个对象的属性和方法
改变HTML元素
改变元素的inner HTML:element.innerHTML = new html content
改变HTML元素的属性值:element.attribute = new value
或element.setAttribute(attribute, value)
改变HTML的样式:element.style.property = new style
添加和删除元素
创建HTML元素:document.createElement(element)
删除HTML元素:document.removeChild(element)
添加HTML元素:document.appendChild(element)
替换HTML元素:document.replaceChild(element)
写入HTML输出流:document.write(text)
创建HTML元素(节点)
如需向HTML DOM添加新元素,您必须首先创建这个元素(元素节点),然后将其追加到已有元素。
创建一个新的< p >元素:
var para = document.createElment("p");
如需向< p >元素添加文本,则必须首先创建文本节点:
var node = document.createTextNode("这是一个新段落");
向< p >元素追加这个文本节点:
para.appendChild(node);
查找一个已有的元素:
var element = document.getElementById("div1");
向已有元素追加新元素:
element.appendChild(para);
创建新HTML元素 - insertBefore()
前面的例子中appendChild()方法,追加新元素作为父的最后一个子
除此之外还可以使用insertBefore()方法;
删除已有HTML元素
如需删除某个HTML元素,需要知晓该元素的父
找到你想要删除的子,利用其parentNode属性找到父:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
替换HTML元素
使用replaceChild()方法
添加事件处理程序
document.getElementById(id).onclick = function(){code}
HTMLCollection对象
getElementsByTagName()放回HTMLCollection对象
HTMLCollection对象是类数组的HTML元素列表(集合)
下面代码选取文档中的所有< p >元素:
var x = document.getElementsByTagName("p");
该集合中的元素可通过索引号进行访问。
如需访问第二个< p >元素,可以这样写:
y = x[1];
HTML HTMLCollection长度
length属性定义了HTMLCollection中元素的数量:
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
改变所有< p >元素的背景色:
var myCollection = document.getElementsByTagName("p");
for (var i=0; i<myCollection.length; i++){
myCollection[i].style.backgroundColor = "red";
}
HTML DOM NodeList对象
NodeList对象是从文档中提取的节点列表(集合)
NodeList对象与HTMLCollection对象几乎相同
如使用getElementsByVlassName()方法,某些(老的)浏览器会返回NodeLiset对象而不是HTMLCollection
所有浏览器都会为childNodes属性返回NodeList对象
大多数浏览器会为querySelectorAll()方法返回NodeList对象
选取文档中的所有< p >节点:
var mayNodeList = document.querySelectorAll("p");
HTML DOM Node List长度
length属性定义节点列表中的节点数:
var myNodeList = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;
HTMLCollection与NodeList的区别
HTMLCollection是HTML元素的集合
NodeList是文档节点的集合
NodeList和HTML集合几乎完全相同
HTMLCollection和NodeList对象都是类数组的对象列表(集合)
他们都有定义列表(集合)中项目数length属性
它们可以通过索引(0,1,2,3,…)像数组那样访问每个项目
访问HTMLCollection项目,可以通过它们的名称、id或索引号
访问Node List项目,只能通过他们的索引号
只有NodeList对象能包含属性节点和文本节点
节点列表不是数组
节点数组看起来像数组,但并不是
我们能够遍历节点列表并像数组那样引用其节点
不过,无法对节点使用数组方法
BOM
- window
- location
- history
- 弹出框
- timing
window对象
所有浏览器都支持window对象,它代表浏览器的窗口
所有全局JavaScript对象,函数和变量自动成为window对象和成员
全局变量是window对象的属性
全局函数使window对象的方法
甚至(HTML DOM的)document对象也是window对象属性window.document.getElemetById("header");
等同于:document.getElementById("header");
窗口尺寸
两个属性可用于确定浏览器窗口的尺寸
这两个属性都已像素返回尺寸:window.innerHeight
- 浏览器窗口的内高度(像素)window.innerWidth
- 浏览器窗口的内宽度(像素)
locationwindow.location.href
获取或者重定url地址window.location.search
获取地址参数部分window.location.hash
获取页面锚点或者叫哈希值
Window History
window.history对象可以不带window书写
为了保护用户的饮祀,JavaScript访问此对象存在限制
一些方法:history.back()
- 等同于在浏览器点击后退按钮history.forward()
- 等同于在浏览器点击前进按钮
JavaScript有三种类型的弹出框:警告框、确认框和提示框
警告框
如果要确保信息传递给用户,通常会使用警告框
当警告框弹出时,用户需要单击”确定“来继续
语法:
window.alert("sometext");
window.alert()方法可以不带window前缀来写
确认框
语法:window.confirm('sometext");
var r = confirm('请按按钮");
if(r == true){
x = '您按了确认!';
}else{
x = '您按了取消!';
}
提示框
语法:window.prompt("sometext", "defaultText");
var person = prompt('请输入您的姓名', '比尔盖茨');
if(person != null){
document.write('欢迎你,'+person);
}
如果需要在弹出框中显示折行,使用\n
JavaScript可以在时间间隔内执行
这就时所谓的定时时间(Timing Event)
Timing 事件
window对象允许以指定的时间间隔执行代码
这些时间间隔被成为定时时间
setTimeout(function, milliseconds)
在等待指定的毫秒数后执行函数
setInterval(function, milliseconds)
每隔指定毫秒执行函数
定时器
定时器在JavaScript中的作用
- 制作动画
- 异步操作
- 函数缓冲与节流
定时器类型及语法
setTimeout:只执行一次的定时器
clearTimeout:关闭只执行一次的定时器
setInterval:反复执行的定时器
clearInterval:关闭反复执行的定时器