JavaScript基础
2017-11-23 21:28
218 查看
1. JavaScript简介
JavaScript主要用于在页面中编写特效,和HTML/CSS一样都是由客户端浏览器解析。1.1. 输出
alert("字符串"); document.write("字符串");
1.2. 调试
console.log(变量);
1.3. 引入js
引入外部js文件。 如。使用将js语句嵌入到HTML中。
href=”javascript:代码”,form标签的action属性也类似。
js事件
1.4. 大小写
在js中,严格区别大小写,无论是变量还是函数,都区分大小写。而在PHP中,变量区分大小写,函数不区分大小写。
1.5. 单引号和双引号
在js中,单引号和双引号没有区别。1.6. 注释
// 单行注释 /* */ 多行注释
2. 变量和数据类型
2.1. 变量
var 变量名称=值;
变量的命名规则:
变量名只能由字母、数字、下划线和$符号组成。
不能以数字作为开头。
不能使用关键字。
不能包含短横线。
严格区分大小写。
2.2. 数据类型
typeof(变量名);
可以说js中只有一种数据类型“对象”。
数据类型 | 描述 |
---|---|
string | 字符串型。连接两个字符串用+(PHP中用.)。如var str=’ab’+’c’; |
number | 数值型。包含整型、浮点型、双精度浮点型。如var num=10; |
boolean | 布尔型。如var b=true; |
array | 数组型。如var arr=[1,2,3]; 在js中,数组不能指定下标,下标只能是默认索引下标。 |
object | 对象。 |
function | 函数。 |
undefined | 未申明。 |
2.3. 强制类型转换
parseInt():将字符串型转换成整型数据。parseInt('3a241'); // 返回3 parseInt('a241') // 返回NaN
3. 运算符
重点注意算术运算符中的+。当+两边都是数值类型时,才会执行加法运算;否则,就执行字符串连接。
3.1. 逻辑运算符
逻辑与(&&)逻辑或(||)
逻辑非(!)
在js中,逻辑非和PHP中的逻辑非一样,返回的都是布尔值。但是,逻辑与和逻辑或返回的结果就不一定是布尔值,而是整个逻辑表达式的值。这一点很重要。
console.log(!0); // true console.log(!3); // false console.log(3&&5); // 5 console.log(3&&0); // 0 console.log(0&&3); // 0 console.log(null&&0); // null console.log(3||5); // 3 console.log(3||0); // 3 console.log(0||3); // 3 console.log(null||0); // 0 console.log(null||NaN); // NaN
4. 条件判断和流程控制
同PHP中的语法类型。5. 函数
函数只有调用时,才会执行。通过函数名称进行调用(可以在声明之前调用,也可以在声明之后调用)。
函数名后带括号时表示调用;不带括号时,表示这个函数本身。
函数也是一种数据类型,可以当做变量进行处理。
JavaScript是一种基于对象的脚本语言,所有的函数都是基于对象的操作方式。
5.1. 函数的声明
声明一个函数时,可以给多个参数,但不能有默认值。function foo(a){ console.log(typeof(a)); } var a=[1,2]; foo(a);
5.2. 局部变量和全局变量
局部变量:在函数内部声明的变量是局部变量。局部变量的生命周期:从变量声明到函数调用结束。局部变量在函数外部是无法访问的。
全局变量:在函数外部声明的变量是全局变量。
全局变量的生命周期:从变量声明到浏览器关闭。
在js中,函数体内可以直接使用全局变量。而在PHP中,如果想要在函数体内使用全局变量,必须用global在函数体内声明。
6. 数组
6.1. 数组的声明
var 数组名=[元素1,元素2, ...]; // 快速声明一个数组 var 数组名=new Array("元素1","元素2", ...); // new一个数组
6.2. 遍历数组
for循环6.3. 数组的常见操作
var arr = ['a', 'b', 'c']; console.log(arr.length); // length为数组的长度属性 arr.push('d'); // 将一个或多个元素添加到数组的末尾,并返回新数组的长度。 arr.pop(); // 删除数组中的最后一个元素,并返回该元素。 arr.unshift('aaa'); // 将一个或多个元素插入到数组的头部,并返回新数组的长度。 arr.shift(); // 删除数组中的第一个元素,并返回该元素。
7. 对象
将相关的操作使用一个对象进行封装,把它们看作是一个整体。常见的系统对象有:String对象、Math对象、Date对象、Array对象、RegExp对象等。
7.1. 对象中的内容
对象主要由属性和方法组成。7.2. 对象的使用
先创建一个对象实例,然后使用对象实例的属性和方法。对象实例.属性 // 可对属性进行取值或赋值 对象实例["属性"] // 这种写法,属性可以为变量名 对象实例.方法() // 调用对象实例的方法。 with(new Array('a','b')){ console.log(length); } // 简写形式
7.3. 自定义对象
对象的声明:由于js中没有类(class)的概念,所以声明一个对象也是用关键字function。7.4. 对象的遍历
for(变量 in 对象){}
var obj=document; for(pro in obj){ console.log("document."+pro+"="+obj[pro]+"<br>"); } // 遍历document对象
7.5. 常用的系统内置对象
Math对象。是一个固有对象,不能用new创建。直接通过 Math.属性 或 Math.方法() 进行操作。如Math.random()。String对象。可以通过new创建,也可以直接写一个字符串,只是二者有所不同。
Array对象。可以通过new创建,也可以直接写一个数组。
Date对象。需要通过new创建。如var dateObj = new Date();
RegExp对象。可以通过new创建,也可以直接写一个正则表达式。如 var reg=/^a/i; 等同于 var reg=new RegExp(“^a”,”i”);
注意: 在js中,直接写正则表达式时,不用引号括起来。
7.6. 正则验证
正则验证有两种写法:正则表达式.test(字符串)
字符串.match(正则表达式)
8. DOM 对象
DOM(Document Object Model),即文档对象模型。利用DOM对象,可以操作HTML文档的任何内容。
操作属性(获取值、修改值):
HTML元素本身有的属性,其对应的元素节点就有相应的属性。
注意:HTML元素的class属性对应元素节点的className属性。
操作内容(获取值、修改值):
innerText 双标签的内部文本(火狐不支持该属性,可以改用textContent) innerHTML 双标签的内部文本和HTML元素 outerText outerHTML value 表单元素的值
操作样式(获取值、修改值):
obj.style.backgroundColor 注意:CSS中所有的样式属性遇到"-" 需要转化成小驼峰。而且,这种操作单个style的方式,操作的是内联样式。 obj.className 需要操作多个样式时,可以直接通过类名来操作。 obj.className="test"; // 设置一个类名 obj.className="test demo"; 或 obj.className+=" demo"; // 设置多个类名 obj.className=""; // 删除所有的类名
8.1. 获取DOM的元素节点
常用的三种方法:var obj = document.getElementById("id属性值"); 单个对象 var objs = document.getElementsByTagName("标签名称"); 对象的集合 var objs = document.getElementsByName("name属性值"); 对象的集合
8.2. 节点
在 HTML DOM (文档对象模型)中,每个部分都是节点:文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点
父节点 parentNode 子节点(第一个,最后一个) childNodes firstChild lastChild 同胞节点(上一个,下一个) siblings previousSibling nextSibling
节点类型(nodeType) :元素节点(1)、属性节点(2)、文本节点(3)、注释节点(0)、文档节点(9)
节点名称(nodeName):元素节点的标签名、属性节点的属性名、文本节点的nodeName永远是#text、文档节点的nodeName永远是#document
节点值(nodeValue):文本节点的文本、属性节点的属性值,nodeValue属性对于元素节点和文档节点不可用。
document.createElement("div") # 创建元素节点,创建的节点是放在内存中的 appendChild(obj) # 插入节点,在父节点内追加子节点 insertBefore(obj,mobj) # 在父节点内的某一个子节点之前插入子节点 removeChild(obj) # 删除节点,在父节点内删除子节点
9. BOM 对象
BOM(Browser Object Model),即浏览器对象模型。利用BOM对象,可以和浏览器窗口进行交互。
window对象表示浏览器中打开的窗口。window对象是BOM的顶层对象,所有对象都是window的子对象。
window对象的子对象:document、location、history、frames、screen、navigator等。
使用window对象的属性和方法时,可以省略window. 。
9.1. window对象的方法
alert() 显示带有一段消息和一个确认按钮的警告框。confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval() 按照指定的时间间隔(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的定时器,参数为setInterval()的返回值。
setTimeout() 在指定的毫秒数后,只调用一次函数或计算表达式。
clearTimeout() 取消由 setTimeout() 设置的定时器,参数为setTimeout()的返回值。
close() 关闭浏览器窗口。
10. 错误处理
try 测试代码块的错误。catch 捕获并处理错误。
finally 无论是否有错误,都会执行的语句。
throw 抛出自定义的错误。
try{ throw new Error('test'); }catch(e){ console.log(e.message); }finally{ console.log('always exec'); }
相关文章推荐
- JavaScript基础
- JavaScript基础
- javaScript基础
- JavaWeb--------JavaScript基础
- 【译】jquery基础教程(jQuery Fundamentals)——(第二部分)javascript基础
- javascript基础
- javascript基础――String
- Javascript基础
- javascript基础
- javascript基础
- JavaScript基础
- JavaScript基础
- JavaScript基础
- javascript基础
- JavaScript基础
- Javascript基础
- javascript基础
- JavaScript基础
- javascript基础
- JavaScript基础