XTY的Web前端学习之旅
一. 加入JavaScript代码细节
- 加在标签中的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<script>
add here
</script>
<link href="task10.css" rel="stylesheet">
</head>
<body>
</body>
</html>
2.将JavaScript代码存放在以.js为扩展名的独立文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<script src="file.js">
add here
</script>
<link href="task10.css" rel="stylesheet">
</head>
<body>
</body>
</html>
3.将script标签放在HTML文档的最后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="task10.css" rel="stylesheet">
</head>
<body>
<script src="file.js">
add here
</script>
</body>
</html>
嵌入代码与外部文件
- 可维护性高
- 可缓存(多个页面需要同一个文件时,只需下载一次)
- 适应未来(可更改HTML或XHTML代码)
文档模式
- 混杂模式(向后兼容)
- 标准模式(最新标准)
延迟脚本
defer="defer"
- 有这个derfer属性的脚本会被延迟到整个页面都解析完毕后再运行。
异步脚本
async="async"
- 脚本会被延迟到整个页面都解析完毕后再运行,与defer类似
- 只适用于外部脚本文件
- 不能保证执行顺序
- 从而异步加载页面其他内容
XHTML中不兼容问题
- <可以用&%代替
- 用
<![CDATA[.........]]>
来包含JavaScript代码内容 - 上述方法不兼容时写成下述形式
// <![CDATA[
// ]]>
二.JavaScript语法
注释
//这是被注释内容
/*这是被注释
段落*/
变量,数据类型,命名
var mood = "happy";
var age = 33;
或
var mood = "happy" , age = 33;
数据类型:
简单数据类型
- undefined
- null
- number
- boolean
- string
-
复杂数据类型
- object
函数名,方法名,对象属性命名采用驼峰命名法
对象
- 内建对象
Object
创建方式:
var obj = new Object();
obj.name = "xty";
obj.age = 19;
或
对象字面量
var obj = {
name:"xty";
age:19;
}
或
var obj = {};
obj.name = "xty";
obj.age = 19;
属性:使用obj.name
或obj["name"]
String
Math
Boolean
Function
宿主对象
BOM,DOM自定义对象
操作符
一元操作符
- 递增递减
- 正负
位操作符
- 按位与(&)
- 按位非(~)
- 按位或(|)
- 按位异或(^)
- 左移(<<位数)
布尔操作符
- 逻辑与
- 逻辑或
- 逻辑非
乘性操作符
- 乘法
加性操作符
- 加法
- 减法
关系操作符 - 大于
- 小于
- 大于等于
相等操作符
- 相等,不相等
- 全等,不全等
条件操作符
- xxx?xxx:xxx
赋值操作符
- *=
- <<=左移
- >>=有符号右移
- >>>=无符号右移
逗号操作符
语句
JavaScript语句参考c++,在此不多描述。
比较特殊的有:
- for-in语句
var obj = new Object;
obj.neme="xty";
obj.age=19;
for(var n in obj){
console.log(obj[n]);//属性值
console.log(n);//属性名
}
- label标签
start:for(var i=0;i<count;i++){
alert(i);
}
- with语句
with(location){
var qs = search.substring(1);
var hostName = host
}
三.DOM
1.D
D指document,DOM把编写的网页文档转换为一个文档对象
2.O
O指object,JavaScript中有三类对象
用户指定对象(user-defined object):有程序员自行创建的对象
内建对象(native object):内建在JavaScript语言内的对象
宿主对象(host object):有浏览器提供的对象
3.M
M指model,即文档的结构
四.节点
1.元素节点(element node)
指的是
- 之类的元素
2.文本节点(text node)
指元素包含的文本
3.属性节点(attribute node)
指
title="a gentle reminder"
这种属性
五.DOM方法
DOM方法
1.document.getElementById("id")
返回一个与那个有着给定id属性值得元素节点对应的对象。
2.document.getElementByTagName("tag")
返回一个具有相同标签的数组。
3.document.getElementByClassName("class")
返回一个具有相同类名的元素数组
4.document.createElement("p")
创建一个新元素节点
5.parent.appendchild(child)
把child节点插入parent节点中
6.document。createTextNode("hello world")
创建hello world文本节点
7.parentElement.insertBefore(newElement,targetElement)
把一个新元素插入一个现有元素之前
事件处理函数
onclick = "show(this);return false"
作用为:在特定事件发生时调用特定的JavaScript代码。其中return false防止了转到目标链接窗口。
六.DOM属性
childNodes
属性可以用来获得任何一个元素的所有子元素。
firstChild
代表childNodes数组的第一个元素。
nodeValue
代表节点的值。
nodeType
元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3
七.Ajax
Ajax技术的核心为XMLHttpRequst对象,具有异步请求的特性。
XMLHttpRequest对象的方法:
- open 方法允许程序员用一个Ajax调用向服务器发送请求。
open(method, url, asynch):
- send 方法可为已经待命的请求发送指令data:将要传递给服务器的字符串。若选用的是 GET请求,则不会发送任何数据, 给 send 方法传递 null 即可
send(data):
status,服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息,并且属于超文本传输协议中的一部分。
常用状态码及其含义:404没找到页面(notfound)
403禁止访问(forbidden)
500内部服务器出错(internalservice error)
200一切正常(ok)
304没有被修改(notmodified)(服务器返回304状态,表示源文件没有被修改)
responseText 属性包含了从服务器发送的数据。
八.jQuery
一个快速简洁的JavaScript库
九.JavaScript优化方面
1.平稳退化:确保网页在没有JavaScript的情况下也能正常工作。
2.向后兼容性:确保老版本的浏览器能兼容所写的JavaScript语句。其中使用对象检测。
3.性能考虑:尽量减少访问DOM和标记,合并放置脚本,压缩脚本。
十.HTML5
视频标签
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
音频标签
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>