这篇博客深入介绍了JavaScript，包括其在Web开发中的重要性，基本语法，数据类型，变量，运算符，对象，BOM和DOM操作。JavaScript能够控制网页行为，如表单验证和用户交互。博客详细讲解了JavaScript的使用，如事件处理，函数，数组，日期，正则表达式等，还探讨了BOM中的window对象，Location和History，以及DOM的基本使用和标准的三个部分。
前言
提示：这里可以添加本文要记录的大概内容：
一、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文件
- 注意∶
- < scrip t>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
- < script >可以定义多个。
- 注释
- 单行注释://注释内容
- 多行注释∶/注释内容/
1.3.1.2数据类型∶
- 1、原始数据类型(基本数据类型)∶
- number :数字。整数/小数/NaN(not a number 一个不是数字的数字类型
- string :字符串。字符串"abc" "a” ‘abc’
- boolean: true和false
- null :一个对象为空的占位符
- undefined:未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined.
- 2、引用数据类型∶对象
1.3.1.3变量
变量:—小块存储数据的内存空间
- Java语言是强类型语言，而JavaScript是弱类型语言。
- 强类型∶在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型︰在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
语法︰ - var变量名=初始化值。
typeof运算符︰获取变量的类型。
注：null运算后得到的是object。
1.3.1.4运算符
- —元运算符:只有一个运算数的运算符
++, – , +(正号) - 算数运算符
+、-、 *、/、 % … - 赋值运算符
= 、 +=、 -、 +… - 比较运算符
、 <、 >=、 <=、= =、 ===(全等于)
- 逻辑运算符
&& | ^
其他类型转boolean :
-
number : o或NaN为假，其他为真.
-
string:除了空字符串(“”)，其他都是true.
-
null&undefined:都是false.
-
对象:所有对象都为true.
-
三元运算符
-
流程控制语句
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
- 注意：
-m如果缺省： {,n}：最多n次。
-n如果缺省：{m,}：最少m次。
二、正则对象:
1、创建
- var reg = new RegExp(“正则表达式”);
- var reg =/正则表达式/ ;
2．方法
- test(参数):验证指定的字符串是否符合正则定义的规范
1.3.1.5.6 Global
- 特点:全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
- 方法:
- 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 浏览器对象模型
- 将浏览器的各个组成部分封装成对象。
- 组成∶
- window ：窗口对象
- Navigator ：浏览器对象
- screen：显示器屏幕对象
- History ：历史记录对象
- 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 :地址栏对象
- 创建(获取)∶
- window. location
- location
- 方法∶
reload(重新加载当前文档。刷新 - 属性
href设置或返回完整的URL。
reload方法，定义一个按钮，点击按钮，刷新当前页面
/ /1.获取按钮
var btn = document.getElementById( "btn");
/ /2.绑定单击事件
btn.onclick = function()
//3.刷新页面
Location.reload();
2.1.3 BOM——History
History :历史记录对象
- 创建(获取)∶
- window.history
- history
- 方法:
- back()：加载history列表中的前一个URL。
- forward()加载 history列表中的下一个URL。
- 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对象来获取
- window.document
- 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来获取和创建
二、方法∶
- removeAttribute() ：删除属性
- 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前端的一些知识，目的在于看懂前端代码。
扫一扫
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
