JavaScript新手入门

目录

前言

一、概念

二、ECMAScript

基本语法

基本对象

三、BOM

四、DOM

五、事件

---

前言

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。 JavaScript 非常容易学。

一、概念

客户端脚本语言

• 运行在客户端浏览器中，每一个浏览器自带js的解析引擎
• 脚本语言：不需要编译，直接可以被浏览器解析执行

功能

• 可以来增强用户和html页面的交互过程，控制html元素，让页面有动态效果，增强用户体验

JavaScript = ECMAScript + JavaScript 特有的（BOM + DOM）

---

二、ECMAScript

基本语法

注释

• 单行注释：//注释内容
• 多行注释：/*注释内容*/

数据类型：分为原始数据类型和引用数据类型

• 原始数据类型
  • number：数字  整数/小数/NaN（not a number 一个不是数字的数字类型）
  • string ：字符串
  • boolean：true和false
  • null：一个对象为空的占位符
  • undefined：未定义，如果一个变量没有给初始化值，则会默认赋值为undefined
• 引用数据类型

变量 ：一小块存储数据的内存空间，Java语言是强类型语言，JavaScript是弱类型语言

• 强类型：开辟空间时，定义了存储的数据类型，只能存储指定类型的数据
• 弱类型：开辟空间时，不定义存储的数据类型，可以存储各种类型的数据
• 语法：var 变量名 = 初始化值

运算符

一元运算符	++、--、+、-
算数运算符	+、-、*、/、%
赋值运算符	=、+=、-=
比较运算符	>、 <、 =、 >、= 、<=、 ==、 ===
逻辑运算符	&& || ！
三元运算符

流程控制语句

• if...else
• switch
• do...while
• while、for

注意：js中switch可以接受任意数据类型

---

基本对象

基本对象可分为：Array、Boolean、Date、Math、Number、String、RegExp、Global、function

Array对象

创建方式：

•     var arr = new Array(元素列表)
•     var arr = new Array(数组长度)
•     var arr = [元素列表]

特点：js中，元素类型可变，数组长度可变

---

RegExp对象：正则表达式对象

正则表达式写法

• 单个字符 [ ]
  • \d:单个数字字符【0-9】
  • \w:单个单词字符【a-z A-Z 0-9 _】
• 量词符号
  • ?：表示出现一次或者0次
  • *：表示出现0次或者多次
  • +：表示出现一次或者多次
  • {m,n}：数量的区间范围

---

function对象

• 对象创建
  • function 方法名（形参列表）{方法体}
  • var 方法名 = function(形参列表){方法体}
• 属性：length：代表形参的长度
• 特点：
  • 方法定义时，形参的类型可以不用写，返回值类型也可以不用写
  • 方法是一个对象，如果定义名称相同的方法，会覆盖
  • 在js中，方法的调用只与方法的名称有关，和参数列表无关
  • 在方法声明中，有一个隐藏的内置对象（数组），arguments，封装所有的实际参数
• 调用：方法名称（实参列表）

---

三、BOM

概念：Browser Object Model 浏览器对象模型：将浏览器各个组成部分封装成对象。

BOM的组成：Window 窗口对象、Navigator 浏览器对象、Screen 显示器屏幕对象、History 历史记录对象、Location 地址栏对象。

Window 常用方法

alert（）	显示带有一段消息和一个确认按钮的警告框
confirm（）	显示带有一段消息和确认还要取消按钮的警告框，确认返回true，取消返回false
prompt（）	显示提示输入的输入对话框，返回输入的值
open（）	打开一个新的浏览器窗口 返回新的window对象
close()	关闭浏览器窗口，谁调用关谁
setTimeout（）	在指定毫秒后执行函数或表达式  参数
clearTimeout（id）	取消setTimeout（）
setInterval（）	指定周期（毫秒）循环执行
clearInterval（id）	取消setInterval（）

History常用方法

back（）	加载history列表中的前一个url
forword（）	加载history列表中的下一个url
go（参数）	加载到具体的页面，正数，前进几个历史记录 ，负数，后退几个历史记录

Location常用方法

assign（）	加载新的文档
reload（）	重新加载文档，刷新
replace（）	用新的文档替代当前文档

---

四、DOM

概念：Document Object Modal 文档对象类型；将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行CRUD操作。

W3C DOM 标准被分为3个不同部分：核心 DOM、XML DOM、HTML DOM 

核心 DOM：Document 文档对象、Element 元素对象、Attribute 属性对象、Text 文本对象、Comment 注释对象、Node 节点对象 。

Document 常用方法

getElementById（）	根据id获取，id属性一般唯一
getElementsByTagName（）	根据标签名称来获取，返回一个对象数组
getElementsByClassName（）	根据class属性来获取，返回一个对象数组
getElementsByName（）	根据name属性来获取，返回一个对象数组

Element 常用方法

removeAttribute（）	删除属性
setAttribute（）	设置属性

Node 常用方法

appendChild（）	向节点的子节点列表的结尾添加新的子节点
removeChild（）	删除（并返回）当前节点的指定节点
replaceChild（）	用新节点替换一个子节点

五、事件

事件机制：

• 概念：某些组件被执行了某些操作之后，触发某些代码的执行
• 事件：某些操作，如：单机，双击，键盘按下，鼠标移动
• 事件源：组件，如：按钮，文本输入框
• 监听器：代码
• 注册监听：将事件，事件源，监听器组合在一起，当事件源上发生了某个事件，则出发某个监听器代码

常见的事件

点击事件	onclick 单击事件 ondblclick 双击事件
焦点事件	onblur 失去焦点 onfoucs 元素获得焦点
加载事件	onload 一张页面或一幅画像完成加载
鼠标事件	onmousedown 鼠标按钮被按下 onmouseup 鼠标按钮被送起 onmousemove  鼠标被移动 onmouseover 鼠标移到某元素上 onmouseout 鼠标从某元素上移开
键盘事件	onkeydown 某个键盘按键被按下 onkeyup 某个键盘按键被松起 onkeypress 某个键盘按键被按下又松开
选择和改变	onchange 域的内容被改变 onselect 本文被选中
表单事件	onsubmit 确认按钮被点击 onreset 重置按钮被点击