HTML学习笔记(JavaScript)NO.4

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对象返回,这样一个对象就创建好了。

时间: 2024-10-22 07:30:33

HTML学习笔记(JavaScript)NO.4的相关文章

学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...}); 2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dragover事件, 可以用e

HTML 学习笔记 JavaScript(面向对象)

现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让我们跟着大神的思路在捋一下.(在这里更欢迎大家阅读原博 )原博地址:http://www.cnblogs.com/dolphinX/p/4385862.html 理解对象 对象这个词如雷贯耳,同样出名的一句话:XXX语言中一切皆为对象! 对象是什么?什么觉面向对象的编程? 对象(object),台湾

HTML 学习笔记 JavaScript (prototype)

原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html 原博客的作者是一个非常牛逼的前端大神,我作为一个初学者,在此借助大神的博客进行自己的学习.在这里感谢原作者无私的分享.也强烈建议大家到原作者的博客下学习.好了,现在让我们跟着大神的脚步前进吧. 用过JavaScript的人肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都有一个prototype属性,可以为其添加函数供实例访问,其他的就不清楚了,下面我们

HTML 学习笔记 JavaScript (函数)

函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块 实例 <!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">点击这里</b

[前端JS学习笔记]JavaScript 数组

一.JavaScript数组的奇葩 大多数语言会要求数组的元素是同个类型, 但是JavaScript允许数组元素为多种类型. var arr = ["羽毛球", 666, {"json:":"666"}]; console.log(arr.length); 二.JavaScript 数组的两种声明 1.var arr = [元素]; var arr = ["坚持"]; 2.new Array(); 或者 var arr2 =

学习笔记.JavaScript应用程序(三)

1.函数传值&探测对象 window.onload = initAll; /* function initAll(){     for(i=0;i<24;i++){         var newNum = Math.floor(Math.random()*75) + 1;         document.getElementById("square" + i).innerHTML = newNum;     } } */ function initAll(){    

【学习笔记javascript设计模式与开发实践(职责链模式)----13】 http://blog.csdn.net/pigpigpig4587/article/details/50442406#t0

第13章 职责链模式 职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到一个对象处理它为止. 职责链模式的名字非常形象,一系列可能会处理请求的对象被连接成一条链,请求在这些对象之间依次传递,直到遇到一个可以处理它的对象,我们把这些对象称为链中的节点, 13.1 现实中的职责链模式 职责链模式的例子在现实中并不难找到,以下就是两个常见的跟职责链模式有关的场景. o  如果早高峰能顺利挤上公交车的话,那么估计这

[前端JS学习笔记]JavaScript CallBack

一.概念介绍 CallBack : "回调" . 在spring优秀框架回调无处不在, 回调的运用场景很多, 如 swt事件监听.netty等.它的主要作用是提高程序执行效率, 一段代码执行时不必等另一段代码执行结束才继续往下run. 在JavaScript也不例外. 二.js 回调语法 传递函数作为回调 function(ag1,ag2...,callback) { // 业务逻辑代码 } js 代码study.js window.mytest = function(str, cal

HTML 学习笔记 JavaScript(创建对象)

JavaScript 有Date Array String等这样的内置对象,功能强大实用简单,但在处理一些复杂逻辑的时候,内置对象就很无力了,往往需要开发者自定义对象. 对象是什么 从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值,对象或函数.也就是说对象是一组没有特定顺序的属性,每个属性都会映射到一个值上,是一组键值对,值可以是数据或对象. 最简单的对象 JavaScript的一对花括号{}就可以定义为一个对象,这样的写法实际上和调用Object的构造函数一样 var

HTML 学习笔记 JavaScript (变量)

变量是储存信息的容器. 实例 var x=2; var y=3; var z=x+y; 就像代数那样 x=2 y=3 z=x+y 在代数中,我们使用字母(比如 x)来保存值(比如 2).通过上面的表达式 z=x+y,我们能够计算出 z 的值为 5.在 JavaScript 中,这些字母被称为变量.提示:您可以把变量看做存储数据的容器. JavaScript 变量 与代数一样,JavaScript变量可用于存放值(比如x=2)和表达式(z=x+y). 变量可以使用短名称(x和y) 也可以使用描述性