JavaScript
来自Wiki.Citydatum
JavaScript(通常简写为JS),是一种高级解释型编程语言,具有动态、弱类型、基于原型和多范式特征。HTML、CSS、JavaScript是万维网(World Wide Web)的三大核心技术。JavaScript赋予网页可交互的特性,因而成为网络应用的必要基础。大量的网站采用了JavaScript技术,所有的主流浏览器均带有专有的JavaScript解释引擎来执行脚本。
目录
概述
组成部分
应用
网页以外的其他应用
- 嵌入的脚本语言
- 脚本引擎
- 应用平台
上手
SoloLearn JavaScript课程是非常适合初学者的交互式教程(英文,免费),以下内容是根据该课程整理的知识要点。
概述
- <script>标签:用于在页面中嵌入JavaScript脚本;可放置在<head><body>内,调用的时间有所不同,一般放在<body>末尾处;
- <script>标签的属性:language、type属性,用于指定脚本语言与格式,通常不需要;src属性,用于引用外部js脚本文件;
- <noscript>标签:放置需要在不支持JavaScript的浏览器中显示的内容;
- 注释://单行注释;/*多行注释*/;
基本概念
- 变量
- 命名规则:可包括英文字符、数字、下划线(_)、美元符号($),大小写敏感,不能以数字开头;
- 变量类型:数字(number)、字符(string)、布尔(boolean);
- 运算符
- 逻辑运算符
条件与循环
- if
- for
- while
- do while
函数
- 函数定义:function name(parameter1, parameter2) { code block; }
- 函数调用:function name(argument1, argument2);
- 三种类型的弹出框:alert(),prompt(),confirm();
对象
- 对象属性
- 对象构建器
- 对象方法
核心对象
- array
- Math
- 常见属性(数学常数):E,LN2,LN10,LOG2E,LOG10E,PI;
- 常见数学对象方法:abs(x), acos(x), asin(x), atan(x), atan2(y,x), ceil(x), cos(x), exp(x), floor(x), log(x), max(x,y,z,…,n), min(x,y,z,…,n), pow(x,y), random(), round(x), round(x), sin(x), sqrt(x), tan(x);
- Date
- 创建日历对象:new Date(),获取包括当前日期、时间信息的对象,一经创建,不会随时间自动变化;
- 日历对象方法:getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds(), getMilliseconds();
DOM
- 选择HTML元素:
- document.getElementById(id):最为常用的方式,在jQuery等一些常见JS框架中,常用美元符号($)替代,以提高效率;
- document.getElementByClassName(name)
- document.getElementByTagName(name)
- 修改HTML元素的内容与属性:
- innerHTML:HTML元素的内容文本,可用于读取或赋值;
- 元素属性名称:可用来读取或修改标签元素的属性,属性名称中包含减号(-)的,需要用驼峰大小写方式替代(camelCase);
- 创建、删除、替换HTML元素:
- element.cloneNode():复制一个要素并返回新创建的节点;
- document.createElement(element):创建新元素节点;
- document.createTextNode(text):创建新文字节点,但并不会显示,需要用 element.appendChild(newNode) 或 element.insertBefore(node1,node2) 附加到已有元素中;
- element.removeChild(node):删除元素节点,需要选择父节点来操作;
- element.replaceChild(newnode,oldnode):替换元素;
- 事件:事件是动态页面设计的关键技术
- 常见事件类型:onclick,onload,onunload,onmouseover,onmouseout,onmousedown,onmouseup,onblur,onfocus,onchange(表单元素变化的时候,如input,keygen,select,textarea);
- 事件监听器(listener):可以让一个事件触发多个事件控制器函数;添加监听:element.addEventListener(event, function, useCapture);移除监听:element.removeEventListener(event, function);
- 事件控制器(handler);即事件所触发的函数;
- 事件传播(propagation):包括bubbling和capturing两种方式;在DOM的树状嵌套结构中,bubbling方式先处理里层元素的事件,再处理外层元素的事件,而capturing方式先处理外层元素的事件,再处理里层元素的事件;设置事件监听器时,通过useCapture属性来设定相应的方式,真为capturing,假为bubbling;