HTML学习笔记(JavaScript)NO.4

当前位置 : 首页 > 网页制作 > CSS > HTML学习笔记(JavaScript)NO.4

HTML学习笔记(JavaScript)NO.4

来源: 作者: 时间:2016-01-20 09:22
JavaScript语句向浏览器发出命令。语句的作用是告诉浏览器该做什么其中分号,语句之间的分割是分号,注意:分号是可选项,有时候看到不以分号隔开的。JavaScript是按照编程顺序执行的
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;


例子->

i=100,j=10;i+j=?




<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()阻止事件默认行为


Script对象:
中的所有事物都是对象:字符串,数值,数组,函数等等
每个对象带有属性和方法,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对象返回,这样一个对象就创建好了。

Tag:
网友评论

<