JS入门

来源：互联网发布：游戏源码社区编辑：程序博客网时间：2024/04/27 21:46

JS入门

在前端这片领域里，JavaScript是举足轻重的。JS是事件驱动且面向对象的一种脚本语言，灵活地操控HTML,CSS以及浏览器，同时实现各种编程任务，可以说前端就是JS的天下。下面我们讨论一下几个基础性问题

l 要点1：引入JS方式

这件事情看似简单，其实是很有讲究的，用哪种方式引入，在什么地方引入，绝不能随便。

引入方式：【是否需要创建函数】

[1]行内式：<p onClick="JavaScript:alert('Hello');">ClickHere</p>

[2]嵌入式：

不创建函数[页面加载时就调用]

alert("Hello");

</script>

创建函数[触发事件后调用]

function msg(){

alert("Hello");

}

</script>

[3]链接式

引入位置：【页面是从上到下加载，避免操纵空节点】

放入<head>中 VS 放入<body>中

l 要点二：事件绑定触发的方式

事件具体如何触发，这个是看怎么方便怎么弄，都可以实现同样的功能。

[1]事件处理函数

“HTML标记事件处理程序”[即调用自定义函数，或行内书写代码]

<ponclick="alert("Hello");">Click me</p>

“以属性的形式出现的事件监听程序”

<scripttype="text/javascript">

window.onload=function(){

varop=document.getElementById("myP");

op.onclick=function(){

alert("Hello");

}

</script>

<p id="myP">ClickMe</p>

[2]通用事件监听程序

“IE中用attachEvent()和detachEvent()”

functionmyClick1(){

alert("Hello,Iam myClick1");

oP.detachEvent("onclick",myClick1);

}

functionmyClick2(){

alert("Hello,I am myClick2");

}

window.onload=function(){

oP=document.getElementById("myP");

oP.attachEvent("onclick",myClick1);

oP.attachEvent("onclick",myClick2);

}

</script>

“DOM中用addEventListener()和removeEventLister()”

只需要在上面例子中换掉那两个函数就可以啦

l 要点三：数据类型与运算符

弱数据类型，数据类型都视为对象，有一系列属性和方法，如String，number，boolean，array

简单说一下数组的创建方式：

var arr=new Array();

var Map=newArray("China","USA");

varMap=["China","USA"];

运算符有很多，这里介绍几个常用的

[1]判等

“==”数值是否相等

“===”数值和类型是否全等

[2] “in”判断某个属性是否存在于某个对象中

function msg(){

var obj={title:"Name",author:"Tang"}

alert("title" in obj);

}

[3]“instanceof”判断某个对象是否为某个类的实例

function msg(){

var d=new Date();

alert(d instanceof Date);

}

[4] “typeof”返回某个对象的数据类型

function msg(){

var a="abc";

alert(typeof a);

}

[5] “delete”删除变量或其属性，系统变量和var声明的变量不能删除

y=4;

delete y;

[6]“new”创建一个对象的实例

l 要点4：函数与对象

[1]函数：可重用的代码段function fName(arg1,arg2){}，可见函数参数无类型，甚至可以不指定，调用时直接应用。若有返回值，直接用return即可。用arguments内置数组对象可以访问函数的参数列表，arguments.length返回其长度

[2]对象：

(1)浏览器对象BOM:window[alert()、confirm()、prompt()]、location、history、navigator、document、screen]

(2)JS内置对象：Date、Math、Array、String等

(3)自定义对象：var myObj=new Object();

下面对对象的几个常用方法举例：

window对象的定时操作函数

周期性执行：window.setInterval()与clearInterval()

延时后执行：window.setTimeout()与clearTimeout()，可以结合递归

<headlang="en">

<title>mytest page</title>

#main{

width: 720px;

margin: 0 auto;

text-align: left;

margin-top: 30px;

}

</style>

function $(id){

return document.getElementById(id);

}

function dispTime(){

$("clock").innerHTML="<b>"+(newDate()).toLocaleDateString()+"</b>";

}

function init(){

dispTime();

window.setTimeout(init(),1000);

}

</script>

</head>

</body>

用另一个函数只需要将

window.setTimeout(init(),1000);改为window.setInterval(dispTime,1000);

location对象的页面链接改变与回退

可回退方式用的是属性：location.href="http://www.baidu.com";

不可回退方式用方法：location.replace(http://www.baidu.com);

history主要用来控制浏览器的后退和前进，但是不能获取到URL

l 要点5：DOM操作

DOM模型中操作每一个节点node都有一系列属性和方法

访问指定节点

方式一：getElementById(),getElementsByName(),getElementsByTagName()

方式二：通过document的forms[elements属性],images等集合属性访问name，注意用下标确定具体的某一个

访问相关节点

通过已知节点的属性可以访问相关节点：documentElement,firstChild,lastChild,childNodes，parentNode，previousSibling,nextSibling等

检查节点类型

元素节点【nodeType=1】，属性节点【2】，文本节点【3】,注意属性节点和文本节点是兄弟节点，同属于元素节点的子节点

创建节点

常用方法：createElement(),createTextNode(),cloneNdoe()

操作节点

常用方法：appendChild(),insertBefore(),removeChild(),replaceChild()

实用方法：innerHTML属性

操作节点属性

getAttribute()【有时候用"元素名.属性名"更直接，如“myImg.src”】

setAttribute()【同上】

removeAttribute()

访问和修改CSS样式

通过style对象：如oP.style.color="red";【注：font-size等应写成style.fontSize等】

1 0