HTML学习笔记（JavaScript）NO.4

时间：2015-02-13 21:15:50 阅读：267 评论：0 收藏：0 [点我收藏+]

JavaScript语句向浏览器发出命令。语句的作用是告诉浏览器该做什么其中分号，语句之间的分割是分号，注意：分号是可选项，有时候看到不以分号隔开的。
JavaScript是按照编程顺序执行的

标识符：

JavaScript标识符必须以字母、下划线或美元符号开始
JavaScript的关键字是不能使用的
JavaScript对大小写非常敏感
JavaScript会忽略多个空格的情况

JavaScript的变量：
变量是存储信息的“容器”如：var x=10；

数据类型
string、number、boolean、array、object、null和未定义
可以通过赋值为null的方式清除变量
var string=“fdjkaf”
var flag=true；
var arr=[];
var arr=new Array();

运算符号：
算数：+,-,*,%,/++,--
赋值运算符:=,+=,-=,*=,/=,%=
字符串操作
比较运算符：==,===(必须满足类型是相同的),!=,!==(必须满足类型是不相同的),>,<,>=,<=
逻辑运算符：&&、||、！
条件运算符：a与b的关系？条件1 ：条件2；

例子->

<p>i=100,j=10;i+j=?</p>
<p id="sumid"></p>
<button onclick="mysum()">结果</button>
<script>
function mysum(){
var i=100;
var j=10;
var m=i+j
document.getElementById("sumid").innerHTML=m;
}
</script>

条件语句if...else和switch和C语言一样，其中switch语句不要忘了写break；来进行判断中断

for循环：
for(var i=0;i<7;i++){

}
还有其他形式：
var i=[1,2,3,4,5,6];
var j;
for(j in i){
遍历i中的元素
}

while和do...while循环和C语言一样，跳转语句：break、continue、return，JavaScript的函数部分与C也一样

JavaScript的异常捕获：
try{
异常代码块
}catch(err){
对异常的处理
}

throw可以创建自定义的错误，通过throw直接抛出异常，不用catch处理

JavaScript的事件监听：
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标
onLoad 网页加载事件
onUnload 关闭网页事件

JavaScript DOM对象
HTML DOM：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

DOM操作HTML：
改变页面中所有的HTML元素、属性、CSS样式和页面中的所有事件作出反应->改变HTML输出流：绝对不要在文档加载完成之后使用document.write（）.这会覆盖前面书写的文档

寻找元素：可以通过id找到HTML元素，或者通过标签名找到HTML元素
改变HTML内容：使用属性->innerHTML
改变HTML属性：使用属性attribute->document.getelementbyid.属性 = 新的属性

DOM EventListener:
方法->
addEventListener();指定元素添加事件句柄
removeEventListener();移出方法添加的事件句柄

事件流->描述的是在页面中接收事件的顺序

事件冒泡->由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点(文档)
事件的捕获->最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

事件处理：
HTML事件处理->直接添加到HTML结构中
DOM0级事件处理->把一个函数赋值给一个事件处理程序属性

DOM2级事件处理->addEventListener（“事件名”,“事件处理函数”,“布尔值”）;

其中布尔值的取值有着不同的含义：true事件捕获，false事件冒泡

removerEventListener();则是一处事件的监听
如果是IE浏览器，则IE事件处理程序：attachEvent detachEvent

事件对象：在出发DOM事件的时候都会产生一个对象
事件对象event（常用）属性及常用方法
1、type获取事件类型
2、target获取事件目标
3、stopProgragation()阻止事件冒泡
4、preventDefault()阻止事件默认行为

JavaScript对象：
JavaScript中的所有事物都是对象：字符串，数值，数组，函数等等
每个对象带有属性和方法，JavaScript允许自定义对象
自定义对象->
1定义并创建对象实例
2使用函数来定义对象，然后创建新的对象实例

e.g.1
people = new Object();
people.name = "";
people.age ="";

e.g.2
people = { name:""; age:"";};

e.g.3
function people(name,age){
this.name = name;
this.age = age;
}
temp = new people("xxx",30);

JavaScript的字符串对象，有很多对字符串操作的方法：如：length(),indexOf(),match（），repelace("原来参数"，"要修改的内容")
大小写转换toUpperCase(),toLowerCase()

字符串转换为数组
e.g.
var str2 = "hello,shuai,ge";
var s = str2.split(",");//将str2通过逗号将其分割成为数组

Date对象：日期对象用于处理日期和时间
获得当日的日期

Array对象也有很多的方法：contact()合并数组
sort()排序 push（）末尾追加元素 reverse()数组元素翻转
a.sort()默认升序排序
a.sort(function(a,b){
return a-b;//升序排列
})
a.sort(function(a,b){
return b-a;//降序排列
})

Math对象abs(),round(),max(),min()

DOM对象控制HTML
常用方法->
getElementById()
getElementByName()获取name

getElementByTagName()获取元素

**（byName和ByTagName获取的是一个相同名称标签的一个数组集合）

getAttribute（）获取元素属性
setAttribute（）设置元素属性
childNodes()访问子节点
parentNode()访问父节点
createElement（）创建元素节点
createTextNode（）创建文本节点
insertBefore（）插入节点
removeChild（）删除节点
offsetHeight网页尺寸不包含滚动条，其次除了高度还有宽度的相应的设置

scrollHeight网页尺寸

例子

1.动态的插入元素
function addElement(){
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "按钮"；
body.appendChild（input）;
}

2.获取网页的尺寸
var w = document.body.offsetWidth||
document.documentElementWidth;

3.创建节点与插入节点
fuction insertNode(){
var div = document.getElementById("div");
var node = document.getElementById("pid");
var newnode = document.createElement("p");
newnode.innerHTML = "动态创建一个P元素"；
div.insertBefore(newnode,node);
}

JavaScript的浏览器对象：
window对象是BOM的核心，window对象指当前的浏览器窗口
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一
window对象尺寸->window.innerHeight浏览器的内部高度/宽度，innerWidth
window方法open(),close（）打开/关闭窗口

JS浏览对象-计时器
计时事件->通过使用JavaScript，可以在一个设定的时间间隔之后来执行代码，而不是在函数被调用之后立即执行，这个称之为计时事件。

计时的方法->
setInterval()间隔指定的毫秒数不停地执行指定的代码
clearInterval()方法用于停止上述的方法

setTimeout()暂停指定的毫秒数后执行指定的代码

clearTimeout()方法用于停止上述的方法

e.g.
var mytime = setInterval(function(){
time();
},delay的时间毫秒级)

function time(){
var d = new Date();
var t = d.toLocalTimeString();
document.getElementById("ptime").innerHTML = t
}

JS浏览器对象-History对象
window.history对象包含浏览器的历史url的集合
Histroy方法
back()与在浏览器点击后退按钮相同
forward（）与在浏览器中点击按钮向前相同
go（）进入历史中的某个页面

Location对象
window.location对象用于获取当前页面的地址url，并把浏览器重定向到新的页面
Location对象的属性
location->
hostname返回web主机的域名
pathname返回当前页面的路径和文件名
port返回web主机的端口
protocol返回所使用的web协议
href属性返回当前页面的url
assign()方法加载新的文档

Screen对象->
window.screen对象包含有关用户屏幕的信息
screen.availWidth可用的屏幕宽度
screen.availHeight可用的屏幕高度
screen.Height屏幕高度
screen.Width屏幕宽度
通过以上的属性可以进行很好的屏幕适配的工作

详解JS的面向对象
e.g.
如何创建类-》
function People(){

}

People.prototype.say = fucntion(){

}
如何继承-》
fucntion Student(){}
Student.prototype = new People();

JS类的封装
（fucntion(){
fucntiuon People(){

}
window.People = People;//这样外界通过window的顶

层来访问到People对象
}()）

function Person(){
var _this = {};
_this.say = fucntion(){
alert("nihao");
}
return _this;
}
上述代码的含义：通过方法Person，在其内部首先创建了一个空的_this对象，然后通过fucntion的来定义其对象中的一个方法，最后将创建好的_this对象返回，这样一个对象就创建好了。

HTML学习笔记（JavaScript）NO.4

标签：html javascript js web

原文地址：http://blog.csdn.net/zs2538596/article/details/43799753

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行