Web前端学习之旅
XTY的Web前端学习之旅
一. 加入JavaScript代码细节
- 加在标签中的
<html>
<head>
<meta charset="utf-8">
<title>Examplestitle>
<script>
add here
script>
<link href="task10.css" rel="stylesheet">
head>
<body>
body>
html>2.将JavaScript代码存放在以.js为扩展名的独立文件中
<html>
<head>
<meta charset="utf-8">
<title>Examplestitle>
<script src="file.js">
add here
script>
<link href="task10.css" rel="stylesheet">
head>
<body>
body>
html>3.将script标签放在HTML文档的最后
<html>
<head>
<meta charset="utf-8">
<title>Examplestitle>
<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中不兼容问题
- <可以用&%代替
- 用
来包含JavaScript代码内容 - 上述方法不兼容时写成下述形式
// 二.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;ii++){
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
视频标签
音频标签
本人初学者，如有错误欢迎指正。
