JavaScript编程语言
一。JavaScript编程语言介绍:
1.JavaScript编程语言是一种专门在浏览器编译与执行的编程语言
2.JavaScript编程语言帮助浏览器解决用户提出的一些简单问题。
避免浏览器因为简单的问题向服务端发送请求
二。JavaScript编程语言学习目的:
1.了解如何在浏览器中去解决用户提出简单问题
2.JavaScript编程语言在2008年之后在国内项目基本
上就不在出现了。使用JavaScript的封装品。比如(vue.js,node.js,angular.js,jquery.js)
打下坚实的JavaScript基础，降低后续对于VUE，node,angular学习难度
三。学习流程
1.JavaScript基础语法学习
2.JavaScript应用学习
3.JavaScript高级语法学习
4.使用JavaScript模拟Jquery
5.了解JavaScript6.0新特征
---------------------------JavaScript基础语法学习---------------------------------------------
一。如何编写JavaScript命令:
1.在HTML文件中<script>中书写JavaScript命令。
浏览器在接收到HTML文件时，自动对script标签中
中JavaScript命令进行编译与执行。
2.在JS文件书写JavaScript命令，然后借助于<script>
通知浏览器请求JS文件并将得到JS文件命令自动编译与执行
二。数据类型：
1.分类： 基本数据类型 高级引用数据类型
2.基本数据类型:
1) number： 数字类型, 在JavaScript中所有的数字都是number
2) string: 字符串类型,在JavaScript中字符串既可以使用双引号
修饰也可以使用单引号修饰
3) boolean: 布尔类型,值是true或则false
3.高级引用数据类型:
1) object类型：在JavaScript中认为所有通过构造函数
生成的对象都是object类型
2) function类型:函数类型。类似于Java反射机制中Method类型
一个function类型对象管理一个具体函数
三。数据类型与对象之间关系
1.对象的数据类型 与 赋值内容有关系的。
2.在赋值内容发生改变时，对象的数据类型也会
对应发生改变
四。特殊值:
1.undefined：在JavaScript中，所有的变量与对象在没有
赋值时，其默认值都是undefined。此时对象
数据类型是undefined
2.NaN : 错误格式的数字.此时变量的类型是number
3.null : 表示对象指向一个"空内存"."空内存"就是
一个坏了的内存。此时对象基本存也不能取
数据。此时对象类型依然是object
4.Infinity :表示无穷大的数字。此时变量的数据类型是
number
五。运算表达式：
1.数学运算表达式: + - * / % ++ --
2.关系运算表达式 > >= < <= == !=
3.逻辑运算表达式 && || !
六。控制语句与循环语句
七。数组
1.介绍：
1)JavaScript中数组相当于Java中List集合
2)JavaScript中数组可以存放不同类型的数据
3)JavaScript中数组控制内存个数可以任意变化
2.使用:
1) 创建数组
var list1 = new Array();
var list2 = [];
2) 数据存储
list1[0] =10
list1[1] =20
3) 遍历数组
for(var i=0;i<list.length;i++){
var data= list[i];
}
八。函数:
1.介绍:
1) 一个函数封装了一个功能.
2) 函数相当于Java中方法
2.函数声明方式
function 函数名(形参名,形参名){
命令行
命令行
return 返回值
}
3.函数声明规则:
1) 所有函数都是使用function来修饰
2) 函数声明时不能指定返回数据类型
3) 函数声明时形参只能指定名称而不能使用数据类型
和var进行修饰
4.函数调用:
对象.函数();
5.window对象的函数简化调用形式:
对于window对象中函数，在调用时可以省略window对象
-------------------------JavaScript应用----------------------------------------------
一。JavaScript作用:
帮助浏览器解决用户提出简单问题
二。DOM对象介绍:
1.DOM = Document Object Model；文档模型对象
2.在浏览器接收到HTML文件内容时，自动为每一个
HTML标签生成一个管理对象，这个管理对象就是
DOM对象
3.JavaScript不能直接操作浏览器中HTML标签的。
必须先找到HTML标签对应的DOM对象，通过对
DOM对象下达指令来实现对HTML标签操作
JavaScript命令---->DIV_DOM----><div></div>
三。doucment对象
1.浏览器根据HTML标签声明顺序，将标签对应的DOM对象
在内存中以树形结构方式存储.
2.浏览器创建树形结构完毕时，自动生成一个document对象
用于管理属性结构
3.JavaScript运行时可以通过document对象在树形结构中定位
需要DOM对象
4.一个浏览器窗口只能加载一个HTML文件。因此一个浏览器
窗口只能存在一个document对象
***JavaScript命令 通过 document对象得到需要的DOM对象
***JavaScript命令 通过 DOM对象对HTML标签进行操作
四。doucment对象定位DOM对象方式
1.根据标签的ID编号定位标签对应的DOM对象
var dom = document.getElementById("id内容")
2.根据标签的name属性值定位标签对应的DOM对象
var domArray =document.getElementsByName("name属性内容")
3.根据标签的类型定位标签对应的DOM对象
var domArray = document.getElementsByTagName("标签类型名")
五。dom对象对标签中属性操作
1.dom对象作用： 对管理的标签中属性进行[赋值]与[取值]操作
2.HTML标签中属性分类:
1)value
2)样式属性
3)状态属性
六。HTML标签中监听属性
1.介绍：
1）监听属性是HTML标签中一种属性
2）监听属性用于监控用户在何时以何种行为操作当前标签
3）监听属性相当于用户向浏览器发送请求通道
4）监听属性可以通知浏览器调用对应的JavaScript函数对
用户请求进行处理
2.分类:
1) 键盘监听属性
2) 鼠标监听属性
3.键盘监听属性
1）onkeydown：监听用户何时在标签上按下键盘
2）onkeyup: 监听用户何时在标签上弹起键盘
4.鼠标监听属性分类
1） onclick: 监听用户何时在标签上单击鼠标左键
2） onblur: 监听用户何时让标签丢失光标
3) onfocus: 监听用户何时让标签得到光标
4) onmouseover:监听用户何时将鼠标悬停在标签上方
5) onmouseout:监听用户何时将鼠标从标签上方移开
6) onchange: 监听用户何时通过鼠标修改下拉列表中选中项
七。基于DOM对象实现监听事件绑定
1.监听事件绑定方式:
1) 直接在HTML标签内部实现监听事件绑定
<input type="button" οnclick="window.fun1()">
***一次只能将一个函数与一个标签进行绑定
无法一次性将一个函数与多个标签进行绑定
2) 基于DOM对象实现监听事件绑定
<tr></tr>
<tr></tr>
<tr></tr>
var domArray = document.getElementsByTagName("tr");
for(var i=0;i<domArray.length;i++){
var trDom = domArray[i];
trDom.onmouseover = fun1; //切记，切记，切记 书写处理函数名，不要带小括号
//trDom.οnmοuseοver=fun1(); 这时一个错误格式
}
***优点：可以一次性将一个处理函数与多个标签进行绑定
极大降低开发与维护难度，实际开发时前端工程师
都是采用这种方式实现监听事件绑定
2.区别:
1.绑定的标签数量不同：
第一种方式一次只能将一个函数与一个html标签进行绑定
第二种方式一次可以将一个函数与多个html标签进行绑定
2.维护难度:
第一种方式，如果增加新的标签，此时必须手动修改，增加
维护难度
第二种方式，增加新的标签时，不需要任何手动修改，极大
降低维护难度
3.处理函数调用者不同
第一种方式，处理函数由window对象调用
第二种方式，处理函数由当前标签对应的DOM对象进行调用
八。onload监听事件:
1.介绍：
1） onload监听事件监听浏览器
2） onload监听事件监听浏览器何时将body标签及其
内部标签加载完毕。此时onload监听事件要求
浏览器调用处理函数
3) onload触发调用函数一般用于实现DOM对象的监听事件绑定
------------------------JavaScript高级语法-----------------------------------
一。学习JavaScript高级语法目的:
降低后续对于前端框架学习难度
二。局部变量与全局变量
1.局部变量:
在函数体内部通过var声明的变量
2.局部变量特点:
局部变量只能在当前函数体内使用，不能
在函数体外使用
3.全局变量:
在script标签下直接声明的变量
4.全局变量特征:
1) 全局变量在声明时，自动分配给window对象作为其属性
2) 全局变量可以在当前html文件中任意的函数中使用
5.特殊全局变量:
在函数体内没有通过var修饰符来修饰的变量
6.特殊全局变量特征:
1) 特殊全局变量可以在当前html文件中任意的函数中使用
2) 特殊全局变量必须在所在函数第一次运行时才会被声明
三。arguments属性
1.arguments属性是函数内部属性
2.arguments属性是数组
3.在函数调用时，arguments属性用于接收实参
然后负责传递给函数形参
4.由于arguments属性存在，因此JavaScript中
函数调用时使用实参与形参可以不一致
四。object类型对象
1.object类型对象声明方式
1) 使用内置构造函数生成object类型对象
2) 使用自定义构造函数生成object类型对象
3) 使用JSON对象描述格式生成object类型对象
2.object类型对象特征
可以根据实际情况，自动添加或则移除的属性
属性管理方式一:
object类型对象.新属性名 = 值;
delete object类型对象.属性名;
属性管理方式二:
object类型对象[变量名]=值
delete object类型对象[变量名];
五。普通函数与构造函数区别
1.JavaScript中无法在静态环境下判断函数身份
2.JavaScript中通过函数调用形式判断函数身份
3.如果函数以"对象.函数"形式调用，此时函数身份普通函数
4.如果函数以"new 函数"形式调用，此时函数身份构造函数
5.如果函数以普通函数身份调用，可以通过return返回结果
6.如果函数以构造函数身份调用，此时函数中return视为无效
此时返回只能是一个object类型对象
六。this指向：
1.如果函数以构造函数身份调用，this指向本次创建实例对象
2.如果函数以普通函数身份调用，this指向调用函数的对象
七。call函数
1.在JavaSript中，所有函数内置了一个call函数
2.call函数动态指定当前函数调用权利
3.命令格式
函数名.call(调用对象,实参1，实参2)
八。prototype属性
1.在JavaScript中，所有函数内置了一个prototype属性
2.由prototype属性指向对象被称为"原型对象"
3."原型对象"中属性被称为"原型属性"
4.由当前构造函数生成的所有实例对象可以共享原型属性
5."原型属性"类似于Java中静态常量属性(static final)
6."原型属性"不能被实例对象修改内容
九。function类型对象
1.由function类型修饰对象被称为函数对象
2.一个函数对象管理一个具体函数
3.function类型对象声明
方式一：标准function类型对象声明方式
function 函数类型对象名 (形参1，形参2){
}
方式二: 匿名式声明方式/命令行式声明方式
var 函数对象名 = function (形参1，形参2){}；
4.函数类型对象创建时机
1.JavaScript编译器对script标签进行"两次自上而下编译"
2.JavaScript编译器第一次编译时，只会将script标签中
所有以标准形式声明函数对象进行创建
3.JavaScript编译器第二次编译时，自上而下将script标签
所有的命令行编译执行
九。JavaScript中继承方式:
1.借助于prototype实行实现继承
2.借助于call函数实现继承
1507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
