JavaScript组成
-
ECMAScript：JavaScript语法工业标准
-
DOM：文档对象模型
-
BOM：浏览器对象模型
JavaScript的引入方式
行内式
将单行或少量的js代码写在HTML标签的事件属性中。由于其可读性差、引号嵌套较多，基本只用于临时测试或一些特殊情况。
<input type="button" value="click" onclick="alert('HELLO!')">注意：通常来说，HTML中使用双引号，JS中使用单引号
内嵌式
通过<script></script>标签及其相关属性引入js代码。
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--嵌入js代码脚本-->
<script>
alert("Hi");
</script>
</head>缺点：行为层与结构曾不能分离，不能复用。
外链式
将js代码写入另一个单独的文件，使用.js作为文件扩展名。开发中常用。
step1:建立以.js为文件扩展名的新文件（示例文件名为jsDemo.js）
alert('hello!')/*在同个文件夹下建立名为jsDemo.js的新文件，输入内容*/step2:将建立的新文件引入到HTML文件中，通过src="文件目录"来进行调用
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javaScript" src="jsDemo.js"></script><!--调用.js文件的内容-->
</head>JavaScript的数据类型
js是一种弱类型语言，在js中使用关键字 var 声明变量，变量声明时不需要指定变量的类型。
var number=27;/*数值型*/
var str="Randomize的博客";/*字符串型*/注意：js中的变量名必须遵循命名规则，变量名可以由字母、下划线（_）、美元符号（$）组成，不能由空格、加号、减号等，不能使用js中的关键字。
下表为js的部分常用数据类型。
| 类型 | 含义 | 说明 |
|---|---|---|
| Number | 数值型 | 不区分整型和浮点型，无引号 |
| String | 字符串类型 | 用单引号或双引号括起来的一个或多个字符 |
| Boolean | 布尔类型 | true/false |
| Object | 对象类型 | 一组数据和功能的键值对集合 |
| Null | 空类型 | 没有任何值 |
| Undefined | 未定义类型 | 创建但未复制的变量所具有的值 |
JavaScript的运算符
js中的运算符主要包括：算数运算符、比较运算符、赋值运算符和条件运算符。与java中无太大差异，不详细赘述。
三元运算符
一种需要三个操作数的运算符，类似一个简单的if-else。与c语言中用法相同。
条件表达式？表达式1：表达式2表达式值为true时结果为表达式1，为false时为表达式2.
示例：
<script type="text/javaScript">
var a=5;
var b=5;
alert((a==b)?true:false);
</script>运算符优先级
与java中无异，不再赘述。
JavaScript的条件语句
与java中无太大差异，区别在{}中的语句不需要添加;符号。
if(条件1){
执行语句1
}else if(条件2){
执行语句2
}
……
else{
执行语句n
}案例：
<script type="text/javaScript">
var age=15;
if (age >60){
alert("old")
}else if (age<=60 && age >18){
alert("adult")
}else{
confirm("teenager")}
</script>DOM对象树
Dom是Document Object Model（文档对象模型）的简称，是处理可扩展标志语言的标准编程接口。它可以以一种独立与平台和语言的方式访问和修改一个文档的内容和结构。
DOM节点关系
概念与数据结构中的树基本一致。不再详细赘述。
子节点（childNode）：直接位于一个节点之下的节点称为该节点的子节点。
父节点（parentNode）：直接位于一个节点之上的节点称为该节点的父节点。
兄弟节点（siblingNode）：具有相同父节点的两个节点称为该节点的兄弟节点。
DOM节点访问
在DOM中，HTML文档的各个节点被视为各种类型的Node对象，通过某个节点的子节点可以找到该元素。例如：
父节点对象=子节点对象.parentNodeNode对象的常用属性：
| 属性 | 类型 | 描述 |
|---|---|---|
| parentNode | Node | 返回节点的父节点，没有父节点时为null |
| childNode | NodeList | 返回节点到子节点的列表 |
| firstChild | Node | 返回节点的首个子节点，没有则为null |
| lastChild | Node | 返回节点的最后一个子节点，没有则为null |
DOM获取文档中的指定元素
通过元素的name属性获取元素
使用getElementsByName()方法可以通过元素的name属性获取元素。该方法返回所有指定name属性的数组，可以通过数组索引实现获取具体的元素。
document.getElementsByName("userName")[0];通过元素的ID属性获取元素
使用getElementsById()方法可以通过元素的ID属性获取元素。该方法返回对拥有指定 id 的第一个对象的引用。
document.getElementById("userId");通过元素的class属性获取元素
使用getElementsByClassName()方法可以通过元素的class属性获取元素。该方法返回文档中所有指定class属性的数组，可以通过数组索引实现获取具体的元素。
document.getElementsByClassName("className")[0];案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javaScript">
/*获取文档中指定元素的方式*/
//通过ID获取
document.getElementById("div2")
//通过class获取
document.getElementsByClassName(".div3")[0]
//通过name获取
document/getElementsByName("username")[0]
</script>
</head>
<body>
<div>div1</div>
<div id="div">div2</div>
<div class="div3">div3</div>
<div class="div3">div3-2</div>
<input type="text" name="username">
</body>
</html>
浏览器对象模型BOM
浏览器对象模型（Brower Object Model，BOM）提供了独立与内容而与浏览器窗口进行交互的对象，其核心对象是window。window下提供的对象用于访问浏览器，被称为浏览器对象。window各内置对象之间按照某种层次组织起来的模型统称为浏览器对象模型。
window.onload加载事件
通过window调用onload实现窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成后会触发该事件。onload页面加载事件有window.onload和window.addEvenListener两种注册方式。
window.onload注册事件：
window.onload=function(){};注意：该注册事件方式只能写一次。若有多个window.onlaod注册事件，会以最后一个为准。
window.addEvenListener注册事件：
window.addEventListener('load',function(){});注意：使用该注册事件方式不会受注册次数的限制。
document.DOMContentLoaded加载事件
document.DOMContentLoaded加载事件会在DOM加载完成时触发（不包括CSS样式表、图片和flash动画等额外内容的加载），执行时机更快，更适用于页面中有较多图片的情况。
JavaScript函数的定义和调用
函数的定义
函数的定义通过function语句实现。
function functionName(patameter1,patamenter2,...){
statements;
return expression;//可有可无
}
- functionName：函数名，在同一个界面必须唯一。函数名区分大小写。
- patameter：参数，多个参数之间用“,”分隔。一个函数可以无参数，最多有255个参数。
- statement：函数主体，用于让函数实现某一功能。
- return expression：返回值，非必选项。
声明：
/*有参有返回值*/
function myFunction(a,b){
return a+b;//返回a+b的值
}
/*无参无返回值*/
function my Function2(){
alert("hello");
}函数的调用
调用：函数名（参数）;
myFunction(1,2);//调用myFunction，输出3
myFunction2();//调用myFunction2，弹出“hello”窗口JavaScript事件处理
采用事件驱动是js语言的一个最基本特征。事件指用户在访问界面时执行的操作，事件处理指对该操作进行的响应。事件处理的过程通常分为三步：发生事件、启动事件处理程序和事件处理程序作出反应。
事件处理程序可以时任意的js语句，但通常使用特定的自定义函数（Function）来对事件进行处理。
JavaScript常用事件类型
| 类别 | 事件 | 事件说明 |
|---|---|---|
| 表单事件 | onblur | 当前元素失去焦点 |
| onchange | 当前元素失去焦点且元素内容发生改变 | |
| onfocus | 某个元素获得焦点 | |
| onreset | 表单被重置 | |
| onsubmit | 表单被提交 | |
| 页面事件 | onload | 页面加载完成 |
案例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="application/javascript">
function myFunction(){
alert("hello!");
}
</script>
</head>
<body>
<input type="button" value="click" onclick="myFunction()"><!--点击按钮时调用函数-->
</body>JavaScript常用对象
在js中，对象是一种数据类型，是由属性和方法组成的一个集合。属性是指事物的特征，方法是指事物的行为。
window对象
表示整个浏览器窗口，处于对象层次的顶端，可用于获取浏览器窗口的 大小、位置，或设置定时器等。在使用时，JS允许省略window对象的名称。
window对象的属性和方法
| 类型 | 名称 | 说明 |
|---|---|---|
| 属性 | document / history / location / navigator / screen | 返回相应对象的引用 |
| parent / self / top | 返回父窗口 / 当前窗口 / 最顶层窗口 的对象引用 | |
| innerWidth / innerHeight | 分别返回窗口文档显示区域的宽度 / 高度 | |
| outerWidth / outerHeight | 分别返回窗口文档外部的宽度 / 高度 | |
| 方法 | open() / close() | 打开或关闭浏览器窗口 |
| alert() / confirm() / prompt() | 弹出 警告框 / 确认框 / 用户输入框 | |
| setTimeout() / clearTimeout() | 设置 / 清楚普通定时器 |
弹框案例：
<script type="application/javascript">
/*
* 三种弹窗方式
* alert()警告弹框
* confirm（）确认弹框
* prompt()询问弹框
* */
alert("warning");
confirm("are you sure?");//点确定返回true，点取消返回false
prompt("please enter your number:");//点击确定获取弹框中输入的内容
</script>
Date对象
Date对象是一个有关日期和时间的对象，它具有动态性，必须通过new关键字创建一个实例才能使用。
var Mydate=new Date();案例： 获取方法
<script type="application/javascript">
var date=new Date();
var day=date.getDay();
document.write("Today is "+day);//显示星期数
var year=date.getFullYear();
document.write("<br>This year is "+year);//显示今年年份
</script>
案例： 设置方法
<script type="application/javascript">
var date=new Date();
date.setFullYear(2018)
date.setMonth(4);
date.setHours(14);
date.setMinutes(30);
date.setSeconds(59);
document.write(date);
</script>
字符串对象
| 类型 | 名称 | 说明 |
|---|---|---|
| 属性 | length | 返回字符串中字符的个数（汉字也算一个字符） |
| 方法 | indexOf(str[,startIndex]) | 从前向后检索字符串，返回搜索到的第一个位置 |
| lastIndexOf(str[,startIndex]) | 从后向前搜索字符串，返回搜索到的第一个位置 | |
| substr(startIndex[,length]) | 从第一个字符开始截取指定长度的字符串并返回 | |
| substring(startIndex[,endIndex]) | 截取指定范围的字符串并返回，截取字符串范围 ： [开始下标：结束下标） | |
| split(separator[,limitInteger]) | 把字符串分割为字符串数组 | |
| search(substr) | 检索字符串中指定子字符串，或检索与正则表达式相匹配的值 | |
| replace(substr,replacement) | 替换与正则表达式匹配的子串 | |
| toLowerCase() | 把字符串转换为小写 | |
| toUpperCase() | 把字符串转换为大写 | |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
案例：
<script type="application/javascript">
var str="hello!"
//向控制台输出
console.log(str.length)
console.log(str.indexOf("l"))
console.log(str.lastIndexOf("l"))
//截取字符串范围 ： [开始下标：结束下标）
console.log(str.substring(0,4))
console.log(str.search("ll"))
console.log(str.replace("o","ooooo"))
var str2="一,二,三,四,五"
console.log(str2.split(","))//以","为分隔符分割字符串
console.log(str.localeCompare(str2[0]))//比较两个字符串并返回
</script>
4913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
