JavaWeb——JavaScript

---

前言

提示：这里可以添加本文要记录的大概内容：

---

一、JavaScript概述(ECMAScript)

1.1 为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为。

1.1.2 JavaScript 可以做什么?

• 事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
    等等 …
• 可以使用多种方法来执行 JavaScript 事件代码：
  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
    等等 …

1.2 概念

JavaScript 是一门客户端脚本语言

• 运行在客户端浏览器中的。
• 每一个浏览器都有Javascript的解析引擎
• 脚本语言:不需要编译，直接就可以被浏览器解析执行了。

功能︰

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

1.3 基本使用

1.3.1基本语法︰

1.3.1.1 html结合方式

1．内部定义< script >，标签体内容就是js代码
2. 外部定义< script >，通过src属性引入外部的js文件

• 注意∶

1. < scrip t>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
2. < script >可以定义多个。
3. 注释

• 单行注释://注释内容
• 多行注释∶/注释内容/

1.3.1.2数据类型∶

• 1、原始数据类型(基本数据类型)∶

6. number :数字。整数/小数/NaN(not a number 一个不是数字的数字类型
7. string :字符串。字符串"abc" "a” ‘abc’
8. boolean: true和false
9. null :一个对象为空的占位符
10. undefined:未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined.

• 2、引用数据类型∶对象

1.3.1.3变量

变量:—小块存储数据的内存空间

• Java语言是强类型语言，而JavaScript是弱类型语言。
• 强类型∶在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
• 弱类型︰在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
  语法︰
• var变量名=初始化值。
  typeof运算符︰获取变量的类型。
  注：null运算后得到的是object。

1.3.1.4运算符

1. —元运算符:只有一个运算数的运算符
   ++, – , +(正号)
2. 算数运算符
   +、-、 *、/、 % …
3. 赋值运算符
   = 、 +=、 -、 +…
4. 比较运算符

、 <、 >=、 <=、= =、 ===(全等于)

5. 逻辑运算符
   && | ^

其他类型转boolean :

1. number : o或NaN为假，其他为真.

2. string:除了空字符串(“”)，其他都是true.

3. null&undefined:都是false.

4. 对象:所有对象都为true.

5. 三元运算符

6. 流程控制语句

1.3.1.5对象

1.3.1.5.1、Function函数方法的特点:

1．方法定义时，形参的类型不用写。
2．方法是一个对象,如果定义名称相同的方法，会覆盖。
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关。
4. 在方法声明中有一个隐藏的丙置对象（数组）, arguments ,封装所有的实际参数。

1.3.1.5.2 Array:数组对象

1．创建:

• var arr = new Array(元素列表);
• var arr = new Array(默认长度);
• var arr =[元素列表];

2．方法

• join(参数)：将数组中的元素按照指定的分隔符拼接为字符串。
• push()：向数组的末尾添加一个或更多元素，并返回新的长度。

3.、属性

• length ：数组的长度

4、特点：

• 1、JS中，数组元素的类型可变的。
• 2、JS中，数组长度可变的。

1.3.1.5.3 日期对象

date:日期对象
1．创建:

• var date = new Date();

2．方法:

• toLocaleString():返回当前date对象对应的时间本地字符串格式。
• getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差。

1.3.1.5.4 math对象

1．创建:
特点: Math对象不用创建，直接使用。

• Math.方法名();

2．方法:

• random( ):返回0~1之间的随机数。含0不含1
• ceil(x):对数进行上舍入。
• floor(x):对数进行下舍入。
• round(x):把数四舍五入为最接近的整数。

取1-100之间的随机数：

3．属性:
PI

1.3.1.5.5 RegExp：正则表达式对象

一、正则表达式:定义字符串的组成规则。

• 1．单个字符:[]
  如: [a] [ab] [a-zA-Z0-9_]
  特殊符号代表特殊含义的单个字符:
  /d:单个数字字符[ 0-9]
  /w:单个单词字符[ a-zA-Z0-9_]
• 2.量词符号∶
  ?：表示出现o次或1次
  *：表示出现o次或多次
  +︰出现1次或多次
  {m,n}:表示m<=数量<= n

1. 注意：
   -m如果缺省： {,n}：最多n次。
   -n如果缺省：{m,}：最少m次。

二、正则对象:
1、创建

• var reg = new RegExp(“正则表达式”);
• var reg =/正则表达式/ ;

2．方法

• test(参数):验证指定的字符串是否符合正则定义的规范

1.3.1.5.6 Global

1. 特点:全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
2. 方法:

• encodeURI( ) ：url编码
• decodeURI() ：url解码
• encodeURIComponent() ：url编码
• decodeURIComponent()：url解码
• parseInt()：将字符串转为数字，逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为numberis
• NaN()：判断一个值是否是NaN；NaN六亲不认,连自己都不认。NaN参与的==比较全部为false。

二、BOM

2.1 BOM基本使用

2.1.1 BOM介绍:

概念∶Browser object Model 浏览器对象模型

• 将浏览器的各个组成部分封装成对象。
• 组成∶

1. window ：窗口对象
2. Navigator ：浏览器对象
3. screen：显示器屏幕对象
4. History ：历史记录对象
5. Location ：地址栏对象

2.1.2 BOM——window:窗口对象

2.1.2.1 创建

2.1.2.2 方法

1．与弹出框有关的方法:

• alert()：显示带有一段消息和—个确认按钮的警告框。
• confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
• prompt()：显示可提示用户输入的对话框。

2、与开发关闭有关的方法：

• close()：关闭浏览器窗口。谁调用我,我关谁
• open()：打开一个新的浏览器窗口
• 返回新的window窗口。

3、与定时器有关的方法：

• setTimeout()：在指定的毫秒数后调用函数或计算表达式。
  参数:1.js代码或者方法对象 2．毫秒值
  返回值:唯—标识，用于取消定时器
• clearTimeout()：取消由setTimeout()方法设置的 timeout。
• setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
• clearInterval()：取消由setInterval()设置的 timeout。

2.1.2.3 属性

特点：

• window对象不需要创建可以直接使用 。
• window使用：window.方法名()；
• window引用可以省略。方法名();

属性:
1．获取其他BOM对象:

• history
• localion
• Navigator
• Screen

2．获取DOM对象

• document

2.1.2 BOM——Location

Location :地址栏对象

• 创建(获取)∶

1. window. location
2. location

• 方法∶
  reload(重新加载当前文档。刷新
• 属性
  href设置或返回完整的URL。

reload方法，定义一个按钮，点击按钮，刷新当前页面

 / /1.获取按钮
var btn = document.getElementById( "btn");
/ /2.绑定单击事件
btn.onclick = function()
//3.刷新页面
Location.reload();

2.1.3 BOM——History

History :历史记录对象

• 创建(获取)∶

1. window.history
2. history

• 方法:

1. back()：加载history列表中的前一个URL。
2. forward()加载 history列表中的下一个URL。
3. go()
   加载 history列表中的某个具体页面。

• 属性:
  length ：返回当前窗口历史列表中的URL数量。

三、 DOM

DOM :
概念：Document object Model文档对象模型。
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

DOM树：

3.1 基本使用

• 功能：控制html文档的内容
• 代码：获取页面标签(元秦)对象Element
  document.getElementById(“id值”)：通过元素的id获取元素对象

操作Element对象:
一、修改属性值：
1．明确获取的对象是哪一个?
2．查看API文档，找其中有哪些属性可以设置
二、修改标签体内容:
属性：innerHTML

3.2 DOM标准的三个部分

DOM标准被分为三个部分
核心DOM、XML DOM 、HTML DOM

3.2.1 核心DOM

针对任何结构化文档的标准模型

• Document :文档对象
• Element :元秦对象
• Attribute :属性对象
• Text :文本对象
• comment:注释对象
• Node :节点对象，其他5个的父对象

3.2.1.1 Document:文档对象

一、创建(获取)：在html dom模型中可以使用window对象来获取

1. window.document
2. document

二、方法:
1．获取Element对象:

• getElementById():根据id属性值获取元素对象。id属性值一般唯—
• getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
• getElementsByclassName():根据class属性值获取元素对象们。返回值是一个数组
• getElementsByName():根据name属性值获取元素对象们。返回值是一个数组

2．创建其他DOM对象：

• createAttribute( name)
• createComment()
• createElement)
• createTextNode()

3．属性

3.2.1.2 Element :元素对象

一、获取/创建：通过document来获取和创建

二、方法∶

1. removeAttribute() ：删除属性
2. setAttribute() ：设置属性

3.2.1.3 Node :节点对象，其他5个的父对象

特点：所有dom对象都可以被认为是一个节点方法∶
一、CRUD dom树：

• appendchild()∶:向节点的子节点列表的结尾添加新的子节点。
• removechild(） :删除（(并返回)当前节点的指定子节点。
• lreplacechild(）:用新节点替换一个子节点。

二、属性︰

parentNode：返回节点的父节点。

3.2.2 XML DOM

针对XML文档的标准模型

3.2.3 HTML DOM

针对HTML文档的标准模型

四、 事件

4.1 事件基本使用

• 功能∶某些组件被执行了某些操作后，触发某些代码的执行。

• 如何绑定事件：直接在html标签上，指定事件的属性(操作)，属性值就是js代码
  1．事件: onclick—单击事件
  2．通过js获取元素对象，指定事件属性，设置一个函数

---

总结

本文简单的介绍了Web前端的一些知识，目的在于看懂前端代码。