一.JavaScript的简绍
前端三大块
1、HTML:页面结构
2、CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript:页面行为:部分动画效果、页面与用户的交互、页面功能
一. js嵌入网页方式
嵌入式格式:
<script type="text/javascript">
alert('ok!');
</script>
外链式格式:
<script type="text/javascript" src="js/index.js"></script>
行内式格式:
<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入口函数
<script>
// 等网页加载完毕后,再执行函数中的代码
window.onload = function(){
//js代码
}
</script>
2.修改html元素的内容
<script>
//等网页加载完毕后,再执行函数中的代码
window.onload=function(){
// document通过html的id查找元素,且改html内容
document.getElementById('box').innerHTML='js语言'
}
</script>
<!--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’
<script>
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'
}
</script>
<!--html部分-->
<div id="box">文字</div>
四. 函数
将具有独立功能的代码块封装起来,形成一个整体,在需要的时候 调用
1.函数定义与调用
<script>
//定义函数
function 函数名(参数){
//语句...
return xxx
}
//调用函数
函数名(参数列表)
</script>
js的预解析功能
JavaScript解析执行过程分为两个阶段,预编译阶段和执行阶段
在预编译阶段会将function定义的函数提前,将定义的变量声明提前,但不会对声明的变量初始化
2.return语句
返回函数中的值或者对象
结束函数的运行
<script>
// alert(num)
var num = 1
// 定义 和 调用 函数名(参数)
// 定义:function 函数名(参数){代码}
alert(fnAlert()) // js函数预解析功能
// 需求:自定义一个函数完成弹窗功能
function fnAlert() {
alert('自定义函数的弹窗')
return 1
alert('ok')(此处代码不执行)
}
</script>
五.条件判断
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{
}
案例:
<script>
var gender = '男'
if (gender == '男') {
alert('同性')
}
else if (gender == '女') {
alert('异性')
}
else {
alert('xxxxxx')
}
</script>
六. js事件与匿名函数
html元素中有样式,id属性,src等属性外,还有事件属性
js事件处理机制: 将定义好的函数赋给事件属性后, 当事件触发时,就会自动调用函数
事件属性(类型)
单击事件 onclick
鼠标滑过事件 onmouseover
鼠标离开事件 onmouseout
匿名函数
匿名函数就是没有名字的函数
语法规则: function () {}
事件处理语法
事件发生在谁身上(html元素).事件属性=匿名函数
<script>
window.onload=function(){
//查找元素
var oBtn1=document.getElementById('btn1')
// 匿名函数: 就是没有名称的函数
// 事件语法: 事件发生在谁身上(变量).事件属性(事件类型)=匿名函数
//鼠标单击事件
oBtn1.onclick=function(){
alert("单击成功")
}
// 鼠标滑过事件
oBtn1.onmouseover=function(){
alert("鼠标滑过")
}
//鼠标离开事件
oBtn1.onmouseout=function(){
alert("鼠标离开")
}
}
</script>
//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) :返回数组中第一次出现指定数据的索引值
<script>
// 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))
</script>
八. 字符串操作方法
parseInt(string) : 将数字字符串转化为number, 去小数
parseFloat(string) : 将数字字符串转化为number, 留小数
string.split(分隔符) : 把字符串分隔成字符串组成的数组
string.indexOf(data) : 查找字符串是否含有指定字符,返回起始下标
string.substring(start,end) :截取子字符串,好比python的字符串切片
'+ ’ :字符串拼接
<script>
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(''))
</script>
九. 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(定时器对象) : 清除多次定时器
<script>
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('多次')
}
}
</script>
<!--html部分-->
<button id="btn1">单次定时器</button>
<button id="btn2">多次循环定时器</button>
<button id="btn3">停止多次循环定时</button>
十一. 标签位移原理
标签位移就是改位置, 通过js 定时器不断修改css的定位属性值,实现移动动画
案例:
<!-- js部分 -->
<script>
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)
}
</script>
十二.变量的作用域
变量作用域(scope): 变量有效性的范围
函数外定义的变量是全局变量,函数内定义的变量是局部变量
函数内部使用全局变量 不需要global,直接操作变量
js声明变量可以不加var,不加var被认为是全局变量 ,不建议这样写
<script>
// 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被认为是全局变量
</script>
拓展:
python变量的作用域LEGB法则
L:local 局部 ,比如函数内部有效
E:Enclosing 闭合区间 , 比如闭包内部有效
G:global 全局 ,比如模块文件内部有效
B:Buildin 内置模块, 整个python都有效
十三、封闭函数
1. 封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行的匿名函数
封闭函数三种写法
<script>
// 第一种写法
;(function(){
alert("封闭函数1")
})()
// 第二种写法
!function(){
alert("封闭函数2")
}()
// 第三种写法
~function(){
alert("封闭函数3")
}()
</script>
2.封闭函数的作用
封闭函数创造一个独立的、封闭的空间,在封闭函数内定义的变量和函数不会影响外部同名的函数和变量,避免命名冲突