脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-web学习笔记之js，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

javascript的简介

是基于对象和事件驱动的语言，应用于客户端

基于对象：

提供了好多对象，可以直接拿过来使用

事件驱动：

htML做网站静态效果，javascript动态效果

客户端：

专门指的是浏览器

js的特点

(1)交互性

信息的动态交互

(2)安全性

js不能访问本地磁盘的文件

(3)跨平台性

java里面跨平台性，虚拟机

只要能够支持js的浏览器，都可以运行

javascript和java的区别

(1)java是sun公司，现在oracle;js是网景公司

(2)javascript是基于对象的，java是面向对象

(3)java是强类型的语言，js是弱类型的语言

比如 java int i="10";不可以

js VAR i=10;var m="10";可以

(4)js只需解析就可以执行，而java需要先编译成字节码文件在执行

js的组成

三部分组成

(1)ECMAScript

ECMA:欧洲计算机协会，由ECMA组织制定的js语法，语句，规则

(2)BOM

broswer object model：浏览器对象模型

(3)DOM

document object model：文档对象模型

js和html的结合方式(两种)

第一种：

使用一个标签

第二种：

使用script标签，引入一个外部的js文件

创建一个js文件，写js代码

js的原始类型和声明变量

定义变量 都使用关键字 var

js的原始类型(五个)

string：字符串

var str="abc";

number：数字类型

var flag=123;

boolean:true和false

var flag=true;

null

var date=new Date();

获取对象的引用，null表示对象引用为空，所有对象的引用也是object

undifined

定义一个变量，没有赋值

var a;

tyPEof();查看当前变量的数据类型

js的语句

与java里面一样，不多作介绍了

运算符==和===区别

都是做判断

==比较的只是值

===比较的是值和类型

字符串相加操作是字符串连接，相减就是相减运算

(引入知识)

直接向页面输出的语句,里面可以写值也可以写html代码

document.wrITe("s");

document.write("

");

js数组

第一种：var arr=[1,2,3];数组装什么都可以

第二种：使用内置对象Array对象

var arr1=new Array(5);//定义一个长度为5的数组

arr1[0]="3";//数组赋值

第三种：使用内置对象 Array

var arr2=new Array(1,5,6);

数组有一个length的属性

js函数定义

函数的参数列表不需要写var，直接写参数名称

第一种：

使用关键字function

function 方法名(参数列表){

方法体;

返回值;(根据实际需要看写不写)

}

第二种：

匿名函数

var add=function(参数列表){

方法体;

返回值;(根据实际需要看写不写)

}

第三种：(用的少，了解)

动态函数,使用到js里面的一个内置对象Function

var add=new Function("参数列表","方法体和返回值");

js的全局变量和局部变量

全局变量：在script标签里面定义变量就是全局变量

局部变量：定义在方法中

script标签位置的存放

建议把script标签放在后面

1.js的string对象

创建string对象

var str="asd";

方法和属性(文档)

属性length：字符串的长度

方法：

(1)与html相关的方法

bold();:加粗

fontcolor():字符串颜色

fontsize():设置字体大小

link():将字符串显示成超链接

sub() sup():上标和下标

(2)与java相似的方法

concat():连接字符串

charAt():返回指定位置的字符串

indexOf():返回字符串位置

split():切分字符串

replace():替换

substr():从第几位开始向后截取几个字符，需要传两个值

substring():从第几位开始到第几位结束，需要传两个值，包含头不包含尾

2.js的array对象

创建数组(三种)

var arr1=new Array(5);

var arr2=new Array(1,5,6);

var arr=[1,2,3];

属性length：数组长度

方法：

(1)concat():将两个数组连接在一起

(2)join():将指定字符传入数组，将数组进行分割

(3)push():向数组末尾添加元素，返回数组的新的长度，如果添加的是一个数组，这个时候会把数组当作一个整体字符串添加进去

(4)pop():删除并返回最后一个元素

(5)reverse():颠倒数组中元素的顺序

3.js的Date对象

在java里面获取当前时间

Date date=new Date();

格式化转成本地格式toLocaleString()

js里面获取当前时间

var date=new Date();

转成习惯的格式

date.toLocaleString()

获取当前的年方法

getFullYear():得到当前的年

获取当前的月方法

getMonth():得到当前的月

获取当前的星期

getDay():星期，返回的是0-6，老外把星期日作为一周的第一天，所以星期日返回的是0

获取当前的日

getDate():得到当前的天

获取当前的小时

getHours()

获取当前的分钟

getMinutes()

获取当前的秒

getSeconds()

获取毫秒数

getTime()

返回的是1970 1 1 至今的毫秒数，应用场景：使用毫秒数处理缓存的效果

js的Math对象

都是静态方法，直接使用Math.方法()

ceil(x):向上舍入

floor(x):向下舍入

round(x):四舍五入

random():得到随机数

js的全局函数

由于不属于任何一个对象，直接写名称使用

eval():执行js代码(如果字符串是一个js代码，使用方法可以直接执行)

encodeURI():对字符进行编码

decodeURI():对字符进行解码

isNaN():判断当前字符串是否是数字，是数字返回false，不是返回true

parseInt():类型转换

js函数的重载

重载，方法名相同，参数不同

js不存在重载，它会调用最后一个方法，但是可以通过其他方式模拟重载(arguments数组)

js的bom对象

bom：broswer object model。浏览器对象模型

对象：

navigator:获取客户机的信息(浏览器的信息)

例：navigator.appName,还有其他属性不一一列举了，查文档

screen:获取屏幕的信息，与上面的类似，请查文档

location:请求url地址

href属性

获取到请求的url地址location.href

设置url地址location.href="网页路径";

例：

function 方法{

location.href="网页路径";

}

history:请求url的历史纪录

可以实现浏览器的后退，前进效果，请参见文档和上面的方法

上一个页面：history.back();

history.go(-1);

下一个页面：history.forward();

history.go(1);

window

窗口对象

顶层对象(所有的bom对象都是在window里面操作的)

方法：

alert():页面弹出一个框，显示内容

confirm():确认框

var flag=window.confirm("显示的内容");

prompt():输入的对话框(不常用)

window.PRompt("文本","默认显示的内容");

open():打开一个新的窗口

open("打开的新窗口的地址url","","窗口特征，宽高之类的","");

close():关闭窗口

做定时器

setInterval("js代码",毫秒数) 1秒=1000毫秒

表示每三秒执行一次alert方法

var id1=setInterval("alert('12')",3000);

setTimeout("js代码",毫秒数)

表示在毫秒数之后执行，但是只会执行一次

var id2=setTimeout("alert('12')",3000);

clearInterval():清除setInterval设置的定时器

clearInterval(id1);

clearTimeout():清除setTimeout设置的定时器

clearTimeout(id2);

js的dom对象

dom:document object model:文档对象模型

文档：超文本文档(超文本标记文档) html、XMl

对象：提供了属性和方法

模型：使用属性和方法操作超文本标记型文档

可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装成对象

需要把html里面的标签、属性、文本内容都封装成对象，并解析标记型文档，

解析过程：

根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象，

document对象：整个文档

常用方法：

write()方法：

(1)向页面输出变量(值)

(2)向页面输出html代码

document.write("a");

document.write("

");

getElementById();(常用)

通过id得到元素(标签)

返回的是一个对象，需要定义对象接收

通过标签得到标签属性

getElementsByName();

通过标签的name的属性值得到标签

返回的是一个集合(数组)，需要定义数组接收

通过遍历数组来获取标签属性

getelementsbytagname();

通过标签名称得到标签

返回的是一个集合(数组)，需要定义数组接收

通过遍历数组来获取标签属性

element对象：标签对象

要操作element对象，首先必须要获取到element。

使用document里面相应的方法获取。

常用方法：

获取属性里面的值

getAttribute("属性名称");

例：var text1=document.getElementById("ceshi");

alert(text1.name);

alert(text1.getAttribute("name"));

设置属性

setattribute("属性名称","属性值");

例：var text1=document.getElementById("ceshi");

text1.setAttribute("class","one");

alert(text1.getAttribute("class"));

删除属性

removeAttribute("属性名称");

与上面类似，不列举了(注意)不能删除value

获取标签中的子标签内容，比如ol中的li

getElementsByTagName("子标签名称");

例：var neirong=document.getElementById("bumen");

var as=neirong.getElementsByTagName("li");

还可以使用childNodes,但是这个属性兼容性很差

属性对象

文本对象

Node节点对象：这个对象是这些对象的父对象

如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

Node对象属性一：

nodeName

nodeType

nodeValue

使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象。

标签节点对应的值

nodeName:大写的标签名称

nodeType:1

nodeValue:null

属性节点对应的值

nodeName:属性名称

nodeType:2

nodeValue:属性的值

文本节点对应的值

nodeName:#text

nodeType:3

nodeValue:文本内容

Node对象属性二：

父节点

子节点

同辈节点

例：

aaa

sss

ddd

父节点

ul是li的父节点

parentNode：子节点通过它获得父节点

var i1=document.getElementById("id1");

var fu=i1.parentNode;

子节点

li是ul的子节点

childNodes:得到所有子节点，但是兼容性差

FirstChild:获取第一个子节点

var ul=document.getElementById("ulid");

var one=ul.firstChild;

lastChild:获取最后一个子节点

var ul=document.getElementById("ulid");

var two=ul.lastChild;

同辈节点

li直间的关系是同辈节点

nextSibling：返回一个给定节点的下一个兄弟节点

var i1=document.getElementById("id1");

var next=i1.nextSibling;

previousSibling：返回一个给定节点的上一个兄弟节点

var i1=document.getElementById("id1");

var next=i1.previousSibling;

操作dom树

添加(1)appendChild方法

添加子节点到末尾

特点：类似于剪切黏贴的效果

添加(2)insertBefore(newNode,oldNode)方法

在某个节点之前插入一个新的节点

两个参数

要插入的节点

在谁之前插入

插入一个节点，节点不存在，创建

1、创建标签

2、创建文本

3、把文本添加到标签下面

例：

东邪

西毒

南帝

北丐

var oldli=document.getElementById("3");

var tianjia=document.createElement("li");

var text=document.createTextNode("中神通");

tianjia.appendChild(text);

var father=document.getElementById("100");

father.insertBefore(tianjia,oldli);

removeChild方法:删除节点

通过父节点删除，不能自己删除自己

和上面使用同一个例子

var fathers=document.getElementById("100");

var zi=document.getElementById("4");

fathers.removeChild(zi);

replaceChild方法;(替换节点)

replaceChild(newNode,oldNode)

两个参数

新节点和旧节点

通过父节点进行替换，不能自行替换

和上面使用同一个例子

var father=document.getElementById("100");

var tihuan=document.createElement("li");

var text=document.createTextNode("大帅哥");

tihuan.appendChild(text);

var old=document.getElementById("1");

father.replaceChild(tihuan,old);

cloneNode(boolean):复制节点

思路：获取要复制的数据，执行复制方法，添加到目的地

var yuan=document.getElementById("100");

var jia=yuan.cloneNode(true);

var di=document.getElementById("pid");

di.appendChild(jia);

innerHTML属性

这个属性不是dom的组成部分，但是大多数浏览器都支持的属性。

第一个作用：获取文本内容

还有谁

var span=document.getElementById("sid");

alert(span.innerHTML);

第二个作用：向标签里面设置内容(可以是html代码)

var p=document.getElementById("pid");

p.innerHTML="

kkk";

DHTML:是很多技术的简称

html：封装数据

css：使用属性和属性值设置样式

dom：操作html文档(标记型文档)

javascript：专门指的俄式js的语法语句

*表单提交方式

1.使用submit提交

2.使用button提交表单(实现方法)

3.使用超链接提交

使用超链接提交

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-web学习笔记之js全部内容，希望文章能够帮你解决javascript代码实例教程-web学习笔记之js所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。