书签分享收藏举报版权申诉 / 21

立即下载加入VIP,免费下载

当前位置：首页 > 经管营销 > 企业管理 > JavaScript学习.docx

JavaScript学习.docx

文档编号：24485570
上传时间：2023-05-28
格式：DOCX
页数：21
大小：725.27KB

JavaScript学习.docx

《JavaScript学习.docx》由会员分享，可在线阅读，更多相关《JavaScript学习.docx（21页珍藏版）》请在冰豆网上搜索。

JavaScript学习.docx

JavaScript学习

1.什么是JavaScript

Javascript是一种客户端运行的解释性脚本语言。

2.javaScript能做什么

完成客户端的交互工作（如表单验证，焦点广告，菜单效果等）;

3.javaScript的使用方式

4.引入外部js：

src指定的文件

引用内部的就不用写src

5.js代码规范：

1）一句话结尾可以用分号，也可以不用分号。

但是一般也都是加分号的

2）大小写敏感

6.jsvaScript中的变量

Var变量名称=值；在js中声明变量不用像java中，要声明类型

Var不写也行

7.数据类型

字符类型数据

1）字符型（string）：

用单引号或者双引号引上

2）转义字符：

\n换行,\r回车,\t水平制表符,\v垂直制表符,

\\反斜线,\’单引号,\”双引号

数值类型数据number：

1）可以储存整数，浮点数，可以带有符号位

布尔类型：

true，false

8.js的输出

document.write（变量名）;

9.数据类型转换，（隐士转换）

数组+boolean：

boolean类型的转换成数数字类型的。

true=1,false=0

强制转换：

parseInt:

转换成整形,parseFloat：

转换成浮点型

10.查看js编写时，错误在哪了，需要在浏览器上看

在浏览器上按f12按键

11.js中的比较运算符：

===:

三个等于号为全等，全等必须值和数据类型都要相等。

12.typeof（变量名）:

检查一个变量是什么类型的

13.inNaN（变量）;//判断这个变量是不是数子类型的。

第二天：

1.js中截取字符串：

substr（）,和substing（）,两个方法

indexOf（）;查看一个字符在这个字符串中所在的位置

lastIndexOf（）;查看这个字符最后出现的位置

charAt（int）;查看这个位置上是什么字符

3.js的数组

Varstr=newArray（）;

Str=“zheng”;还有中方式是str[‘name’]=“zheng”;直接给这个取个名

4.数组的方法：

join（）;方法，将数组的成员连接成字符串

push（）;方法，在数组的末尾在追加一个或多个成员，也可以直接追加数组

unshift（）;方法，在数组的开头添加一个或多个成员

pop（）;方法，删除数组的最后一个成员，并返回这个成员

shift（）;方法，删除数组的第一个成员，并返回这个成员

slice（）;方法，截取数组，可以传一个或两个参数

forin（）;方法，遍历数组

reverse（）;方法，控制数组的反转

5.javaScript的DATE对象

创建方法：

vardate=newDate（）;

Data.toLocaleTimeString（）;;//获得浏览当前的时间并以字符串输出

Date;的方法有

getYear（）;获取年，这个使用不正常,返回的是1900年到现在的年

getFullYear（）;也是获取年，这个是用正常

getMonth（）;得到月。

这注意使用的是国外的月，国外的0月是我们的1月

getDate（）;获取的是月的天，获得的是第几号

getDay（）;获取的是星期的第几天，

getHours（）;获取小时,24小时的时间

getMinutes（）;获取分钟

getSeconds（）;获取秒

getTime（）;或1970年元旦到现在的毫秒值

注：

相对应的还有set方法

6.javaScript中正则表达式

1）：

reg.test（String）;//检查字符串是否符合正则（reg）规则，匹配上返回true

2）：

reg.evec（String）返回第一个匹配上的字符串内容

3）：

String.match（reg）;返回全部的匹配结果

4）：

String.replace（正则,被替换的内容）;//就是把匹配的那部分的内容

替换掉

/表示转义字符

^表示用什么开头

$表示用什么结尾

[]表示要匹配的字符

{}表示可以匹配多少次

/d表示数字

在正则表达式后加i作用是让正则表达式中的字母不区别大小写比较

如：

/^\d{17}[\dx]$/i;身份证的正则表达式

意思是:

开头是数字,有17位。

后面是数字或者x结尾，不区别大小写

7.自定义函数

函数数完成某种功能的代码片段：

用关键字function函数名（参数）{

也就是跟java中的创建方法一样return返回值}

8.在js中if语句

9.js这eval（）;函数的使用

如上：

我们声明了一个s语句（注意这个语句要是字符串，而且外面要用

括号括起来）,eval（）;的作用就是能执行这个语句，不把他当字符串看

eval（）;函数是javaScript中动态的执行的函数，能随时的执行

8.DHTML（DynamicHtml）动态的html

有分DOM（DocumentObjectModel），文档对象模型

提供处理HTML/XML文档的API

BOM（BrowserObjectModel），浏览器对象模型，提供

与浏览器相关的API。

7.DOM

在html中，,我们称之为元素或者标记，但是在

表示的是整个的HTML文档，的节点，根节点是节点的一种，

所以也在文档节点中

Element：

表示这个文档中的所以元素，元素节点只是html标记，但是

Document中却不止这些，像我们自己声明的id也是

Html中的元素，就叫HTMLElement,

HTMLElement的下一级就叫：

HTMLtableElement.....img,li,等，

每个元素对应一个

Attr：

是Attribute（属性）的简写，Element有个方法getAttribute（）;得到这个

元素的属性；

相应的还有setAttribute（）;设置属性方法，这个方法可以传入哪种属性

和，这个属性的值，如：

setAttribute（‘align’,’center’）;

align=排列，center=居中

Document的方法：

varid=Document.getElementById（id）;得到一个元素的id

10.

如上这张图，创建一个DOM方法，用function

在下面用onclick引用。

其中setAttribute（）;方法是对pEle

这个id对应的元素进行改变，align=排列，center=居中。

11.window.alert（）;输出一个窗口提示框。

Window=窗口，alert=警告

Node=节点。

12.window.confirm（value）;//这个与alert的使用差不多，就是这个只有一个选项。

而confirm有两个选项，一个确认一个取消。

而且这个有返回值

varcon=confirm（“你好吗”）;

13.window.prompt（“中午吃什么","麻辣烫"）;

这个函数也是谈窗口，其中前面的那句是固定的，后面那句是在输入框中。

所以后面这个值能被用户修改。

如下图样式

14.window.open（url）;函数

这个函数是在其中写的一个地址，当执行到这的时候，也没就会自动的

setInterval（执行的代码,间隔时间）

如上图：

用setInterval函数通过定时器改变id=input的值，每1000毫秒

执行一次，当执行clerInterval（变量名）;的时候就结束这个定时器

这个变量名是创建setInterval的时候的变量名。

一次性定时器：

到一定时间后执行一次

setTimeout（“代码”,时间）;//这个函数就只是到了一定时间执行一次这个代码

如果还没到这个时间执行了clerInterval函数的时候就不会执行定时器了

13.文本节点

第二天：

DOM编程

1.通过Element的方法document.getElementById（id）;得到一个节点的id

2.Node.COMMENT_NODE=8;//注释类型的节点

Node.ELEMENT_NODE=1;//元素类型的节点

Node.ATTRIBUTE_NODE=2;属性类型的节点；

Node.TEXT-NODE=3;//文本类型的节点

Node.DOCIMENT_NODE=9;//文档类型的节点；

以上是常用的一些的节点。

3.setAttribute（“属性”,”值”）;//改变节点的属性值

getAttribute（“属性”）;//得到这个属性的值

所以我们通过上面的get方法得到的不同的值，然后用if（）{}else{}

来进行改变属性

window.alert（值）;得到当前‘值’的对象

4.VartxtNode=id.firstChild;获取当前id对应的文本对象节点的值

如：

你好吗？

这段代码

我们通过:

varip=document.getElementById（"ip"）;获得id值

然后通过：

varSip=ip.firstChild;获得第一个子项的值

对于这个id，所对应的是

标记，那个它的子项就只有（你好吗）这个值了

txtNode.nodeValue=”新的值”;//把这个节点的value值进行改变。

注：

以上的两个方法也可以写在一起的：

ip.firstChild.nodeValue=””;

5.document是顶级的父节点

nodeName;//获取这个节点的名称

nodeType;//获取这个节点的类型

children;//获取这个节点下的所有子节点。

children[0];//根据下标来取节点

childNodes;//获取所有下级节点

6.innerHTML和innerText的区别

innerHTML是把开始标记到结束标记中的所有内容都替换，

不管其中的是文本内容还是其他的元素标记都会清掉。

innerText是把开始标记和结束标记中的文本内容替换掉，其他的

元素和标记不会动。

5.setAttribute（属性类型,属性值）;

className（属性值）;//这个与setAtrribute（）;的区别就是这个只能设置class的值

getAttribute（属性类型）;是得到属性的值,和设置属性的值

那么删除属性：

用的方法是：

removeAttribute（）;方法

7.调用function的方法的时候创建对象

Elementdocument.getElementById（“id”）;//可以根据id得到一个对象

通过id获得这个元素之后用：

Element.getElementsByTagName（元素名）;

就是用varuel=getElementById（id）;//获得这个元素后，

再用uel.getElementsByTagName（元素名）;//取得这个uel下所有这个

元素名称的元素。

并且返回的是一个集合，可以遍历这个集合

Elementdocument.createElement（“节点”）;创建一个新的节点

这样创建了这个节点还是游离的，我们还要把它放在dom树上

方法是用appendChild（）;是向这个节点的子节点末尾添加

insertBefore（,）;//也是添加节点。

还有:

textNodecocument.createTxtNode（StringValue）;创建一个文本节点

createComment:

创建一个注释的节点；HTML的注释

---->

CommentNodedocument.createComment（Stringvalue）;//创建一个html的

还有创建属性节点方法：

Vardate=document.createAttribute（‘date’）;//

给这个属性赋值：

date.nodeValue（值）;

newNode.type=”text”;

newNode.value=”mary”;

newNode.style.color=”red”;

如下：

创建一个

并在

中添加一个段落节点

8.Node:

接口的一些方法

appendChild（）;//在得到的节点下追加一个子节点；append=附加

怎么得到这个节点：

我们通过方法document.getElementById（）;可以根据

id得到对象，那么我们通过document.节点名，直接得到这个节点也可以

如：

要在节点下添加的时候，直接document.body:

得到这个节点的

对象，在用appendChild（）;方法追加一个子节点就成。

还有方法：

object.insertBefore（newNode,[refNode]）;//只传入一个节点时，

可以代替：

appendChild（）;方法。

appendChild（）;方法有的浏览器不兼容

insertBefore（）;方法可以传一个参照节点，在一个节点中，有多个子节点

的时候，我们可以指定位置传入一个子节点，就用这个方法。

在多个子节点

之间插入，不在最后插入。

代码如下：

9.NodeListlist=id.childNodes（）;//得到是id这个节点下的所以子节点

这些节点组成了一个集合。

9.parentNode：

父节点

10.替换原有的节点，先得到原有节点，在创建新的节点

在用方法：

replaceChild（）;方法实现节点的替换replace=取代

11.删除节点的方法：

父节点.removeChild（节点）;

第三天

1.HTMLDOM：

提供了只能处理HTML的API

2.W3CDOM能处理HTML和XML文档，HTMLDOM只能处理HTML文档

3.如果html中出现了驼峰标记（多个单词组成的标记）：

那么就会出现问题,

这个时候，有罗峰标记的，可以用css样式替代

4.HTML标记的class属性，在htmlDOM中应用className取代，因为class

是ECMAscript中预保留的关键字。

这段代码使用css样式的类标记来改变样式，用HTMLDOM可以直接

修饰样式，不用像W3CDOM的要用setAttibute（）;来修改。

这段代码是直接修饰图片的属性用的，也不用setAttrbute（）;来进行修改属性

注：

在HTMLDOM中访问，cass样式的类标记用calssName=’类名’;的方法

color:

改颜色

5.访问HTML对象的文本

object.innerText=“值”//所有的文本都认为是纯文本，包括HTML标记

object.innerHTML=“值”//这个的HTML标记会被解析

6.在HTMLDOM节点的创建都需要通过W3CDOM来实现：

如下图

7.HTMLDOM的节点，都有自己的删除和创建的方法。

以前创建图像标记用：

createElementImage方法

现在可以用：

newImage（width,height）;方法来创建

8.列表框的事件：

onchange=””事件;与onclick事件一样用

第四天

1..比如我们有复选框：

checkbox，生成的一个表格，里面放的是邮件

要点击一个选项按钮，把所有邮件都选中的方法是：

把下面的所有

复选框的name值设置为一样，然后用document.getElementByName（）

;方法，可以得到所有name值一样的所有选项。

2.怎么判断复选框没有被全部选中：

可以选获得复选框的所有总数。

3.JS对下拉选的支持

效果：

4.window.screen属性

作用是可以显示出这个浏览器当前的一些信息,宽高，颜色....

5.location.replace;

作用是返回到历史记录，就是跳到上一个历史页面

6.location.href=”地址”;

作用可以直接跳转到指定地址的页面

7.navigator对象，包含有关浏览器的信息

这个对象中属性很多，但是最重要的是：

userAgent属性的值

这个属性能，返回浏览器的版本信息

8.事件

点击事件：

9.onload事件

window.onload=“代码”;//事件是在整个页面的html代码或图片加载完成后执行

10:

事件的冒泡处理机制：

就是点击最里面的元素，触发了事件

如果外面也有这个事件的话，那么外面的元素的事件也会执行、

任何事件都有冒泡机制。

如这：

我点击111111这，但是控制台会输出123，点击22222的时候

会输出23.

这个时间冒泡，在不同的浏览器上有不同的兼容性k

11.每个事件的产生都会有个event对象的产生

我们可以根据event这个对象的属性或者这个事件产生的很多现象。

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: JavaScript 学习

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：JavaScript学习.docx
链接地址：https://www.bdocx.com/doc/24485570.html

JavaScript学习.docx

热门标签