大家好，小编为大家解答javascript主要应用哪些方面的问题。很多人还不知道javascript相关应用包括哪些，现在让我们一起来看看吧！
一.JavaScript的简绍
前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
一. js嵌入网页方式
嵌入式格式：
< type="text/java">
alert('ok！');
</>
外链式格式：
< type="text/java" src="js/index.js"></>
行内式格式：
<input type="button" name="" onclick="alert('ok！');">
二. 变量、数据类型及基本语法规范
1、变量定义
变量定义语法： var 变量名=值
变量名(函数名、属性名、参数名)命名规范：
- 区分大小写 满足标识符命名规则，且可使用 字 符 ， 首 字 符 需 是 字 母 、 下 划 线 、 字符，首字符需是字母、下划线、 字符，首字符需是字母、下划线、 遵循匈牙利命名风格 oBox
- 基本原则是：变量名=属性+类型+对象描述
- 匈牙利命名法关键是：标识符的名字以一个或者多个小写字母开头作为前缀；前缀之后的是首字母大写的一个单词或多个单词组合，该单词要指明变量的用途
变量命名参考：
| 类型 | 单词 | 例子 |
|---|---|---|
| 对象o | Object | 比如：oDiv |
| 数组a | Array | 比如：aItems |
| 字符串s | String | 比如：sUserName |
| 整数i | Integer | 比如：iItemCount |
| 布尔值b | Boolean | 比如：bIsComplete |
| 浮点数f | Float | 比如：fPrice |
| 函数fn | Function | 比如：fnHandler |
| 正则表达式re | RegExp | 比如：reEmailCheck |
2、数据类型
js分为6种数据类型， 用typeof() 可查数据类型
数字型 (number) 比如： 1， 1.2
字符串型(string) 比如：‘abc’,‘123’
布尔型(boolean) 比如：true，false
未定义型(undefinded) : 变量未定义或者定义了但没有初始化
对象型(object) : html标签都是对象型
空类型(null) : 比如：变量初始化为null，而通过typeof() 输出为object类型，即null就是一个空的对象
3、js语句与注释
js语句可缩进，也可不缩进 ，一行语句要么换行结束，要么以分号;结束
js注释分//单行注释 快捷方式 ctrl+/ 和/* 多行注释(块注释)*/ 快捷方式 alt+shift+a
三. js修改html的内容和样式
1.js入口函数
<>
// 等网页加载完毕后，再执行函数中的代码
window.onload = function(){
//js代码
}
</>
2.修改html元素的内容
<>
//等网页加载完毕后，再执行函数中的代码
window.onload=function(){
// document通过html的id查找元素，且改html内容
document.getElementById('box').innerHTML='js语言'
}
</>
<!--html部分-->
<div id="box">divdivdiv</div>
3.元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作元素属性
var 变量 = 元素.属性名 读取属性
元素.属性名 = 新属性值 改写属性
属性名在js中的写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
使用HTMLElement.sytle 控制html的样式
对于普通css属性，直接写 ，css 的 color:red–>style.color=‘red’
<>
window.onload=function(){
/* 控制css样式
1. HTMLElement.sytle
2. 对于普通属性，直接写即可 ，css 的 color:red-->style.color='red'
3. 类似font-size属性，则转为小驼峰写法fontSize 即xx-xx --> xxXx
*/
// 改颜色
document.getElementById('box').style.color='red'
// 改背景
document.getElementById('box').style.background='#ccc'
// 改字体
document.getElementById('box').style.fontSize='30px'
}
</>
<!--html部分-->
<div id="box">文字</div>
四. 函数
将具有独立功能的代码块封装起来，形成一个整体，在需要的时候 调用
1.函数定义与调用
<>
//定义函数
function 函数名(参数){
//语句...
return xxx
}
//调用函数
函数名(参数列表)
</>
js的预解析功能
JavaScript解析执行过程分为两个阶段，预编译阶段和执行阶段
在预编译阶段会将function定义的函数提前，将定义的变量声明提前，但不会对声明的变量初始化
2.return语句
返回函数中的值或者对象
结束函数的运行
<>
// alert(num)
var num = 1
// 定义 和 调用 函数名(参数)
// 定义：function 函数名(参数){代码}
alert(fnAlert()) // js函数预解析功能
// 需求：自定义一个函数完成弹窗功能
function fnAlert() {
alert('自定义函数的弹窗')
return 1
alert('ok')（此处代码不执行）
}
</>
五.条件判断
js的运算符
算术运算符
| 运算符 | 描述 | 例子（y=5） | 结果 |
|---|---|---|---|
| / | 除 | x=y/2 | x=2.5 |
| % | 求余数 | x=y%2 | x=1 |
| ++ | 自增1 | x=++y(自加完再处理) ，x=y++(处理完再自加) | |
| – | 自减1 | x=–y(自减完再处理)， x=y–(处理完再自减) |
比较运算符
提示： == 比较的是值， 而===值和类型都比较
| 运算符 | 描述 | 例子(x=5) |
|---|---|---|
| == | 等于 | x==8 为 false |
| === | 全等（值和类型） | x== =5 为 true；x===“5” 为 false |
| != | 不等于 | x!=8 为 true |
逻辑运算符(关系运算符)
\
| 运算符 | 描述 | 例子(x=6 ,y=3) |
|---|---|---|
| && | and与 | (x < 10 && y > 1) 为 true |
| II | or或 | (x= =5 IIy= =5) 为 false |
| ! | not非 | !(x==y) 为 true |
if条件判断
语法1:
if(条件) {
条件成立执行的命令
}
语法2:
if( 条件) {
}
else{
}
语法3:
if(条件){
}
else if (条件){
} …
else{
}
案例：
<>
var gender = '男'
if (gender == '男') {
alert('同性')
}
else if (gender == '女') {
alert('异性')
}
else {
alert('xxxxxx')
}
</>
六. js事件与匿名函数
html元素中有样式，id属性，src等属性外，还有事件属性
js事件处理机制： 将定义好的函数赋给事件属性后， 当事件触发时，就会自动调用函数
事件属性(类型)
单击事件 onclick
鼠标滑过事件 onmouseover
鼠标离开事件 onmouseout
匿名函数
匿名函数就是没有名字的函数
语法规则： function () {}
事件处理语法
事件发生在谁身上(html元素).事件属性=匿名函数
<>
window.onload=function(){
//查找元素
var oBtn1=document.getElementById('btn1')
// 匿名函数: 就是没有名称的函数
// 事件语法: 事件发生在谁身上(变量).事件属性(事件类型)=匿名函数
//鼠标单击事件
oBtn1.onclick=function(){
alert("单击成功")
}
// 鼠标滑过事件
oBtn1.onmouseover=function(){
alert("鼠标滑过")
}
//鼠标离开事件
oBtn1.onmouseout=function(){
alert("鼠标离开")
}
}
</>
//html部分
<button id="btn1">单击</button>
七. 数组及操作方法
数组就是把一组有关联的数据放在一起，好比python中的列表，数组一般都应放同类型的数据
数组定义
方式1(不常用)
var aList=new Array(1,2,3)
方式2(常用)
var aList=[1,2,3]
常用操作方法
array.length ：取数组长度
array[index]： 使用下标(索引)操作数据项:
join(分隔符): 通过分隔符将数组成员合并成字符串
push() ：从尾部添数据
pop() ：从尾部删数据
splice()： 在数组指定位置添加或删除数据
格式： splice(位置下标, 删除的数据的个数, 添加的数据)
reverse() : 反转数组
indexOf(data) ：返回数组中第一次出现指定数据的索引值
<>
// var xx = 值
// var arr1 = new Array(10, 20, 30, 'aaa')
var arr2 = [10, 20, 30, 40, 'abc', 20, 40, 10]
// alert(arr2)
// 下标 索引值
// alert(arr2[0])
// alert(arr2.length)
// 结尾添加数据push()
// arr2.push('jqk')
// 结尾删除数据
// arr2.pop()
// arr2.splice(位置下标, 删除的数据的个数, 添加的数据)
// arr2.splice(1, 2, 'xyz') //位置 删除数据的个数 添加的数据
// arr2.splice(1, 2) //位置 删除数据的个数
// arr2.splice(3) //位置 删除这个位置后面的所有数据
// arr2.reverse()
// alert(arr2)
// arr2.join(‘分隔符号’)
// alert(arr2.join('...'))
// arr2.indexOf(数据) -- 返回下标(返回这个数据第一次出现的位置的下报表)
alert(arr2.indexOf(20))
</>
八. 字符串操作方法
parseInt(string) : 将数字字符串转化为number, 去小数
parseFloat(string) : 将数字字符串转化为number, 留小数
string.split(分隔符) : 把字符串分隔成字符串组成的数组
string.indexOf(data) : 查找字符串是否含有指定字符，返回起始下标
string.substring(start,end) ：截取子字符串，好比python的字符串切片
'+ ’ :字符串拼接
<>
var str1 = '1.9'
// alert(typeof(parseInt(str1)))
// alert( parseInt(str1) ) //去掉小数转换number
// alert(parseFloat(str1)) // 保留小数
var str2 = 'abcdedg'
//
// substring(开始下标,结束下标) ：取子字符串 ，不包含结束位
// alert(str2.substring(1, 4)) // bcd
// alert(str2.substring(2))
// split('分隔符')
var str3 = '2019-4-17'
// alert(str3.split('-'))
//反转字符串
alert(str2.split('').reverse().join(''))
</>
九. js调bug
alert() ： 简单的调bug方式， 用于查看程序流向及数据是否正确
alert() 显示弹窗非常直观， 但需点击弹窗程序才能继续执行
console.log() : console.log() 好比python的print函数， 但需通过浏览器控制台查看结果
浏览器控制台查看bug ： 详细查看bug信息，推荐使用
打开浏览器的检查， 选择Console(控制台)，查看报错信息，有错误提示、行号提示
十. 定时器
定时做某任务， 比如定时刷数据， 定时执行动画(轮播图片)等
创建定时器
setTimeout(timerHandler,timeout) ： 单次定时器， 只执行一次
timerHandler ： 定时器要处理的任务 1. 匿名函数形式 2. 函数名形式
timeout： 延迟时间, 以毫秒为单位 1000毫秒=1秒
setInterval(timerHandler,timeout) : 多次定时器， 循环执行多次
清除定时器
clearTimeout() ： 清除单次定时器，不常用
clearInterval(定时器对象) ： 清除多次定时器
<>
window.onload = function () {
var oBtn1 = document.getElementById('btn1')
var oBtn2 = document.getElementById('btn2')
var oBtn3 = document.getElementById('btn3')
var oTimer = null // 对象型 定时器就是对象型数据类型
// 单次 setTimeout()
// 多次 setInterval()
// 函数都有相同的两个参数
// 参数1：命令：1、匿名函数形式；2、函数名形式
// 参数2：延迟时间，以毫秒为单位 1000毫秒 = 1秒
oBtn2.onclick = function () {
oTimer = setInterval(aa, 2000)
}
oBtn3.onclick = function () {
// 关闭定时器
// clearInterval(定时器的名字)
clearInterval(oTimer)
oTimer = null //断开变量与对象的引用， 便于系统回收资源
}
function aa() {
alert('多次')
}
}
</>
<!--html部分-->
<button id="btn1">单次定时器</button>
<button id="btn2">多次循环定时器</button>
<button id="btn3">停止多次循环定时</button>
十一. 标签位移原理
标签位移就是改位置， 通过js 定时器不断修改css的定位属性值，实现移动动画
案例：
<!-- js部分 -->
<>
window.onload = function () {
var oBox = document.getElementById('box')
var num = 0; // num就是left的值
var speed = 5
function fnMove() {
// 改变left取值
num += speed
oBox.style.left = num + 'px'
// 右边界判断： 如果num增到600，大于600，左侧运动
// document.documentElement.clientWidth ：网页可见区域宽
if (num > 600) {
speed = -5
}
// 左边界判断
if (num < 0) {
speed = 5
}
}
// 创建定时器
setInterval(fnMove, 50)
}
</>
十二.变量的作用域
变量作用域(scope): 变量有效性的范围
函数外定义的变量是全局变量，函数内定义的变量是局部变量
函数内部使用全局变量 不需要global，直接操作变量
js声明变量可以不加var，不加var被认为是全局变量 ，不建议这样写
<>
// var num = 1
// alert(num)
function fn() {
var str = 'aa'
// alert(str)
// alert(num)
num = 10
// alert(num)
}
fn()
// alert(str) 局部变量
alert(num)
// 1、函数内部使用全局变量 不需要global，直接变量赋值
// 2、js声明变量可以不加var，不加var被认为是全局变量
</>
拓展：
python变量的作用域LEGB法则
L：local 局部 ，比如函数内部有效
E：Enclosing 闭合区间 , 比如闭包内部有效
G：global 全局 ，比如模块文件内部有效
B：Buildin 内置模块， 整个python都有效
十三、封闭函数
1. 封闭函数是java中匿名函数的另外一种写法，创建一个一开始就执行的匿名函数
封闭函数三种写法
<>
// 第一种写法
;(function(){
alert("封闭函数1")
})()
// 第二种写法
!function(){
alert("封闭函数2")
}()
// 第三种写法
~function(){
alert("封闭函数3")
}()
</>
2.封闭函数的作用
封闭函数创造一个独立的、封闭的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，避免命名冲突
3137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
