JavaScript基础学习

来源：互联网发布：中国邮政数据传媒中心编辑：程序博客网时间：2024/06/06 04:04

JavaScript基础学习

javaScript是由EcmaScript（语法基础）、Dom(文档对象模型)、Bom(浏览器对象模型)组成，目前有Mozilla公司延续开发。脚本语言又叫动态语言，也叫解释型的语言，一般不能独立运行，需要嵌入到html代码中，又浏览器解析执行。

javaScript的作用

1.表单校验操作。

2.通过javascript对html代码内容进行修改，对html中的css样式进行修改。

引入JavaScript的方式；

第一种：直接在html页面，使用<script>标签；

第二种：直接<script src="">,通过src的属性值导入html文件。（外部导入的<script>标签中不能再书写javaScript代码了）

变量声明：

var num ;

注意事项：声明一个变量时可以包含数字字母下划线，但是不能以数字开头。

javascript是一种弱类型语言，可以任意改变变量的类型。

数据类型

原始数据类型：

Number 数值类型、Boolean 逻辑类型、String 字符类型、undefined类型变量未初始化、null类型对象不存在。

引用数据类型：引用数据类型，它一般是指类或对象，在javascript中它是不具有真实类。

在javascript中有一个Object,它本身没有什么意义，与java中的Object类意义一样。对象是由new关键字创建的

JavaScript中的数据类型转换

在javaScript中boolean值，数字，字符串他们都是原始数据类型，但是他们也是伪对象，也就是说，他们可以具有属性和方法。

1.转换成字符串使用toString()方法

2，转换成数字，可以使用parseInt(值), parseFolat(值)

3，强制类型转换

a)值转换成Boolean类型，Boolean(值)

b)值转换成Number类型，Number(值)

JavaScript中的运算符和表达式（略）

逻辑运算符、算数运算符、关系运算符、三元运算符、赋值运算符、逗号运算符（一条语句中执行多条语句）；

流程控制语句

if(条件){

}else{

}

switch(语句){

case 值：语句 break;

}

while(){

}

do {

}while(条件)；

for循环

JavaScript的常用对象

String 、Math、Date、Array、RegExp

JavaScript函数

函数就是方法，他们都是完成特殊功能的一段代码。

创建函数的三种方式：

方式一：使用function关键字

function 函数名（参数）{

函数体；

}

方式二：

var 函数名 = function(参数){

函数体；

}

方式三：

使用到了Function对象

var 变量名 = new Function（参数，函数体）；

关于函数的参数与返回值的问题

1.函数的参数是无数据类型的

2.函数在调用的时候，不必传递指定的个数和匹配的类型。

3.函数中有一个argument对象，它就是用于接收所有参数的，他就是一个数组。

4.javaScript中没有函数重载的概念。

a:如果方法有返回值，可以使用retur返回，并且不用声明返回值类型。

javaScript的全局函数

无需再定义，可以直接使用的函数

JavaScript的事件

事件一般与函数配合使用，当事件产生时，相对应的函数可以执行。

常用事件：

onclick：鼠标点击某个对象。

onload：某个页面或图像被完成加载

Bom（浏览器对象模型）

bom下的主要对象：（其中window和history为主要对象）

Windows对象：最顶层对象。

时间循环控制案例

JavaScript中的dom对象（文档对象模型）

Dom是html和xml的应用程序接口（api）,dom将整个页面规划为由节点组成的文档。

我们可以通过dom提供的api来操作页面上的所有节点。

Dom组成

核心dom,针对于结构化文档的标准模型。

xml Dom 针对于xml文档操作

HTML Dom 针对于html文档操作

html它也是一个xml,也就是说，可以通过xmldom来操作。

Html dom它是xml dom 的扩展。

通过xml dom来操作html语法比较复杂，但是它不存在浏览器的兼容问题。

通过html dom 来操作html , 他语法比较简单，但是会存在浏览器的兼容问题。

节点分类：

文档:document

元素：Element

属性节点：Attribute

文本节点：Text

xml dom的api

Dom操作的三个属性；

nodeName

nodeValue

nodeType

节点与节点的关系

parentNode、childNodes、firstNode、lastNode、nextSibling、previousSibling

Xml Dom获取节点

元素节点: getElementsByTagName() 返回的是一个数组

属性节点:getAttribute()

文本节点:nodeValue

Xml Dom改变节点

元素节点: 没有

属性节点:setAttribute()

文本节点: nodeValue

Xml Dom删除节点

元素节点: removeChild() 注意，必须通过父元素来删除子元素

属性节点:removeAttribute()

文本节点: removeChild()

Xml Dom替换节点

元素节点: replaceChild(新节点，旧节点)

属性节点:没有

文本节点: nodeValue

Xml Dom创建节点

元素节点:createElement()

属性节点:setAttribute()

文本节点: createTextNode() 也可以直接指定它的文本值 innerHTML

Xml Dom添加节点

元素节点:appendChild() insertBefore()

属性节点:setAttribute()

文本节点:innerHTML

Xml Dom克隆节点

cloneNode() 方法创建指定节点的副本。

cloneNode() 方法有一个参数（true或 false）。该参数指示被复制的节点是否包括原节点的所有属性和子节点。

Html Dom 操作

Html的dom它可以更方便对html元素进行操作

在xml dom中获取元素

document.getElementsByTagName() 它返回的是数组根据标签名称来获取

document.getElementById() 它返回的就是一个元素根据元素的id值来获取

在html dom中获取元素

document.getElementByName()它返回的也是一个数组根据元素的name属性获取

注意：在html dom中也可以使用xml dom.

在html的dom中还有一个特殊的属性innerHTML它是用于区取标签中文本。

阅读全文

0 0