JavaScript基础学习
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对象:最顶层对象。
时间循环控制案例
<script type="text/javascript" charset="utf-8">
var interval;
window.onload=function(){
interval = window.setInterval("startTime()", 1000);
}
function startTime(){
var nowDate = new Date();
document.getElementById("edu").value=nowDate.toLocaleString();
}
function stopTime(){
window.clearInterval(interval);
}
</script>
</head>
<body>
<input type="text" id="edu" size="60"><input type="button" id="btn" onclick="stopTime()" value="停止" >
</body>
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 它是用于区取标签中文本。