本文详细介绍了JavaScript的核心组成部分、特点、语法、数据类型、运算符、函数、面向对象、内置对象、数组操作以及DOM文档对象模型的使用。还探讨了事件处理，包括事件驱动编程和各种事件属性。此外，文章还涵盖了JavaScript在HTML页面中的应用，如脚本嵌入、外部引用以及变量声明和赋值。
JavaScript
JavaScript简称JS，是解释型或即时编译型的变成语言。
JavaScript组成部分
- ECMAScript(核心)
- DOM(文档对象模型)
- BOM(浏览器对象模型)
JavaScript特点
- 是一种解释性脚本语言
- 主要用于HTML页面添加交互行为
- 可以直接嵌套HTML，可以写成单独的js文件有利于结构和行为分离
JavaScript编写的位置
别写在html的script标签中
<!DOCTYPE html>
<html>
<head>
<script>
alert('hello world');
</script>
</head>
<body>
</body>
</html>
编写在JS文件中
alert("hello world");
引用js文件
<script type="text/javascript" src="JS文件的路径"></script>
注：此处的script标签不能使用"/"结束，否则js代码无效
基本语法
-
JavaScript与Java的标识符一致
-
JavaScript严格区分大小写
-
JavaScript程序代码格式";"结束
-
JavaScript的注释与Java一致
// /**/ /***/ -
JavaScript关键字保留字与Java基本相似
变量声明
使用var关键字var username;初始化，默认值undefined
声明变量时顺便赋值var username=“值”;
单独设置变量username=18;
打印变量
- alert(值)，弹出框
- console.log(值)，在console中现实
常见类型
- Number(数字类型)
- Boolean(布尔类型)
- String(字符串)
- 其他变量(null,undefined)
- typeof运算符(获取变量的数据类型)
运算符
比较运算符
| 运算符 | 作用 |
|---|---|
| = | 赋值 |
| == | 比较可以类型不一样 |
| === | 比较类型一定要一样 |
逻辑运算符
逻辑运算符中0、""、false、NaN、undefined、null表示false，其他类型的数据表示为true。
&&和||运算区别
&&操作：从左往右依次判断，返回第一个为false的值，否则返回最后一个值
||操作：从左往右依次判断，返回第一个为true的值，否则返回最后一个值
函数的定义
普通函数
function 函数名(参数列表){
//程序代码
[return 值;]
}
匿名函数
var 名 = function(参数列表){
return 返回值;
}
如果方法没有返回值，则变量值为undefined
面向对象
JavaScript提供了一个构造函数(Custructor)模式。所谓的"构造函数"就是一个普通函数，但是内部使用this变量。
//构造函数
function Person(name,age){
this.name = name;
this.age = age;
thia.fun=function(){
console.log("执行了fun方法");
}
}
//使用new关键字创建对象
var p1 = new Person("张三",20);
var p2 = new Person("李四",18);
注：
- 此时Person称为构造函数也称为类，构造函数就是类
- 面向对象就是需要new出来的对象
- 构造函数首字母要大写，遵循驼峰
内置对象
Object父类，所有对象都有的属性
| 属性 | 作用 |
|---|---|
| constructor | 创建对象的函数引用 |
| prototype | 对该对象的原型引用 |
Object父类，所以头对象都有的方法
| 方法 | 作用 |
|---|---|
| hasOwnProperty(property) | 判断对象是否又某个特定属性 |
| isPrototypeOf(object) | 判断对象是否是另外一个对象的原型 |
| propertyIsEnumerable() | 判断给定的属性是否可以使用for…in语句进行枚举 |
| toString() | 返回对象的原始字符串表示。 |
常用对象
Date
| 方法 | 作用 |
|---|---|
| Date() | 返回当前的日期和时间 |
| getFullYear() | 获取Date对象中四位数字的年份 |
| getMonth() | 获取Date对象中的月份(0~11) |
| getDate() | 获取Date对象中的天(1~31) |
| getHours() | 获取Date对象中的小时 |
| getMinutes() | 获取Date对象中的分钟 |
| getSeconds() | 获取Date对象中的秒 |
String
在String对象中有一个属性length该属性可以获取字符串的个数
| 方法 | 作用 |
|---|---|
| charAt(index) | 返回指定位置的字符 |
| concat(string1,string2…) | 拼接字符串 |
| fromCharCode(num) | 将number类型的数字转换成unicode中的一个字符 |
| subString(start,stop) | 截取字符串内容 |
| toUpperCase() | 把字符串转换成大写 |
| toLowerCase() | 把字符串转换成小写 |
| indexOf(cha) | 查找字符 |
| split(cha) | 分割字符串 |
Math
| 方法 | 作用 |
|---|---|
| ceil() | 向上取整 |
| floor() | 向下取整 |
| round() | 四舍五入 |
| random() | 随机数 |
historyd
在historyd对象中length属性的作用是返回浏览器历史列表的url数量
| 方法 | 作用 |
|---|---|
| back() | 加载history列表中的前一个url |
| forward() | 加载history列表中的下一个url |
| go() | 加载history列表中的某个具体的页面 |
localtion
属性
| 属性 | 作用 |
|---|---|
| hash | 返回从#开始的锚 |
| host | 返回url的主机名和端口号 |
| hostname | 返回url的主机名 |
| href | 返回完整的url |
| pathname | 返回url的端口号 |
| protocol | 返回url的协议 |
| search | 返回?开始的url查询部分 |
方法
| 方法 | 作用 |
|---|---|
| assign() | 加载新的文档 |
| reload() | 重新加载当前文档 |
| replace() | 用新的文档代替当前文档 |
navigator
属性
| 属性 | 作用 |
|---|---|
| appCodeName | 浏览器代码名 |
| appName | 浏览器的名字 |
| appVersion | 浏览器的版本 |
| platform | 浏览器的操作平台 |
| userAgent | 返回发送到服务器user agent的头部值 |
screen
属性
| 属性 | 作用 |
|---|---|
| width | 返回屏幕分辨率的宽 |
| height | 返回屏幕分辨率的高 |
| availWidth | 返回访问者屏幕的宽度 |
| availHeight | 返回访问者屏幕的高度 |
数组
创建数组的方式
- var arr1 = new Array();
- var arr2 = new Array(“张三”,“李四”,“王五”);
- var arr3 = new Array(3);
- var arr4 = [“张三”,“李四”,“王五”]
第一种是创建一个数组对象
第二个是创建一个数组对象并赋值
第三个是创建指定长度的数组对象
第四种是常用操作种最常见的一种，创建并赋值
注：对于JavaScript种的数组不会出现数组越界异常，也不是定长的
属性
在数组中length可以获取素组的长度
方法
| 方法 | 作用 |
|---|---|
| concat(array1,array2…) | 连接两个或多个数组 |
| join(separator) | 将数组的所有元素放入一个字符传中，参数是你的分隔符号 |
| reverse() | 将数组颠倒顺序 |
| slice(start,end) | 返回选定的数组 |
| pop() | 删除最后一个元素 |
| shift() | 删除第一个元素 |
| push(newelement1,newelement2…) | 在数组末尾添加一个或多个元素，并且返回新得长度 |
| unshift(newelement1,newelement2…) | 在数组开头添加一个或多个元素，并且返回新得长度 |
| splice(index,howmany,element1…) | 用于插入、删除、替换数组元素 |
遍历数组
-
for
var arr = ['a','b','c','d']; for(var i = 0 ; i < arr.length ; i++){ console.log(arr[i]); } -
forEach
var arr = ['a','b','c','d']; arr.forEach(function(item,index,array){ console.log(item) })第一个参数是数组得元素
第二个参数是数组得引用
第三个参数是数组本生
-
map
var arr = ['a','b','c','d']; var newArr = arr.map(function(item,index,array){ return item+index; });第一个参数是数组得元素
第二个参数是数组得引用
第三个参数是数组本生
此处返回得是一个新得数组，新数组的元素是map中的return值
-
for-in
可以遍历数组，也可以遍历对象
var arr = ['a','b','c','d']; for(var i in arr){ console.log(i);//索引 console.log(arr[i]);//元素 } //遍历object对象中的属性 var obj = new Object(); for(var name in obj){ console.log(name);//属性名 console.log(obj[name]);//属性值 }
DOM
DOM是Document Object Model文档对象模型的缩写。DOM可以动态的修改xml和html。
获取元素
- 通过元素的Id进行获取(getElementById)，返回第一个元素，如果不存在返回null。
- 通过标签名字进行获取(getElementsByTagName)，返回所有标签名字相同的元素集合，如果没有匹配的返回空集。
- 通过class名字进行获取(getElementsByClassName)，返回所有class名称相同的元素集合，如果没有匹配的返回空集
- 通过name名称进行获取(getElemenetsByName)，返回所有name名称相同的元素集合，如果没有匹配的返回空集
元素属性操作
获取属性值方式
- 元素.属性
- 元素[“属性”]
- 元素.getAttribute(“属性名”)
设置属性值方式
- 元素.属性=值
- 元素[“属性”]=值
- 元素.setAttribute(“属性名”,“属性值”)
注：获取与设置1和2不能设置自定义属性，只能设置普通属性，如果需要设置与获取自定义的属性请使用setAttribute和getAttribute
Node
属性
| 属性 | 作用 |
|---|---|
| firstChild | 返回子节点中第一个的节点 |
| lastChild | 返回子节点的最后一个节点 |
| childNodes | 获取所有节点的列表 |
| previousSibling | 获取上一个同级节点，没有返回null |
| nextSibling | 获取下一个同级节点，没有返回null |
| parentNode | 获得父节点 |
方法
| 方法 | 作用 |
|---|---|
| hasChildNodes() | 是否拥有子节点 |
| appendChild(node) | 添加一个新的节点在子节点的末尾 |
| removeChild(node) | 从节点中删除节点 |
| replaceChild(newNode,oldNode) | 替换子节点 |
| insertBefore(newNode,refNode) | 在子节点之前添加一个子节点 |
事件处理
事件驱动编程
通俗：怎么触碰按钮，触碰按钮后会处理什么事情。
鼠标事件
| 属性 | 作用 |
|---|---|
| onclick | 单击事件 |
| ondblclick | 双击事件 |
| onmousedown | 按钮按住事件 |
| onmouseleave | 鼠标移除事件 |
| onmousemove | 鼠标移动事件 |
| onmoseover | 鼠标移动元素事件 |
| onmouseout | 鼠标移开元素事件 |
| onmouseup | 鼠标松开事件 |
键盘事件
| 属性 | 作用 |
|---|---|
| onkeydown | 键盘按下事件 |
| onkeypress | 键盘按下并松开事件 |
| onkeyup | 键盘松开事件 |
表单事件
| 属性 | 作用 |
|---|---|
| onblur | 元素失去焦点触发 |
| onchange | 元素内容发生改变触发 |
| onfocus | 元素获取焦点触发 |
| onsubmit | 表单提交触发 |
事件绑定
-
在元素上直接绑定
<input type="button" value="点我啊" onclick="alert('点位干嘛');"/> -
通过元素绑定事件(常见用法)
<input type="button" value="点我啊" id="btn"/>var btn = document.getElementById("btn"); btn.onclick=function(){ alert("点位干嘛"); }使用此种方式可以将html代码和js代码完全分离，比较适合开发与管理
-
通过元素对象的方法绑定事件
IE：attachEvenet
非IE和IE9以上：addEvenetListener
window.onload=function(){ var btn = document.getElementById("btn"); btn.addEvenetListener("click",function(){ alert("点我干嘛"); }) btn.addEvenetListener("click",function(){ alert("不要点了"); }) }此种方式可以设置点击后触发多个事件
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
