Javascript介绍
-Javascript的定义
Javascript是运行在浏览器端的脚本语言,是由浏览器解释执行的,简称js,
它能够让网页和用户有交互功能,增加良好的用户体验效果
-前端开发三大块:
HTML:负责网页结构
CSS:负责网页样式
Javascript:负责网页行为,比如 网页于用户的交互效果
Javascript的使用方式
-行内式(主要用于事件)
< input type= "button" name= "" onclick= "alert('OK!');" / >
-内嵌式
< script type= "text/javascript" >
alert ( 'OK!' ) ;
< / script>
-外链式
< script type= "text/javascript" src= "js/index.js" > < / script>
变量和数据类型
-Javascript是一种弱类型语言,也就是说不需要指定变量的类型,Javascript的变量类型由它的值来决定
定义变量需要用关键字 “var”,一条Javascript语句应该以“;”结尾
-定义变量的语法格式:
var 变量名 = 值;
var iNum = 123 ;
var sTr = 'asd' ;
var iNum = 45 , sTr= 'qwe' , sCount= '68' ;
-Javascript的注释分为单行注释(//注释内容)和多行注释(/*多行注释*/)
< script type= "text/javascript" >
var iNum = 123 ;
var sTr = 'abc123' ;
< / script>
Javascript数据类型
-js中有六种数据类型,包括五种基本数据类型和一种复杂数据类型(object)。
-5种基本数据类型:
number 数字类型
string 字符串类型
boolean 布尔类型 true 或 false
undefined undefined类型,变量声明未初始化,它的值就是undefined
null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,
在页面上获取不到对象,返回的值就是null
1种复合类型:
object 后面学习的数组、函数和JavaScript对象都属于复合类型
var iOne = 10.1 ;
var sStr = '1234' ;
var bIsTrue = false ;
var unData;
var nullData = null ;
var oObj = {
name : "隔壁老王" ,
age : 88
}
var type = typeof ( oObj) ;
alert ( type) ;
alert ( oObj. name) ;
-变量命名规范
区分大小写
第一个字符必须是字母、下划线(_)或者美元符号($)
其他字符可以是字母、下划线、美元符或数字
-匈牙利命名风格
对象o Object 比如:oDiv
数组a Array 比如:aItems
字符串s String 比如:sUserName
整数i Integer 比如:iItemCount
布尔值b Boolean 比如:bIsComplete
浮点数f Float 比如:fPrice
函数fn Function 比如:fnHandler
函数的定义和调用
-函数就是可以重复使用的代码块,使用关键字function定义函数
< script type= "text/javascript" >
function fnAlert ( ) {
alert ( "hello" )
}
< / script>
-函数调用就是函数名加小括号,比如:函数名(参数[参数可选])
< script type= "text/javascript" >
function fnAlert ( ) {
alert ( "hello" )
}
fnAlert ( ) ;
< / script>
-定义函数时,函数如果有参数,参数放到小括号里面,函数如果有返回值,返回值通过return关键字来返回
-函数中“return”关键字的作用:
返回函数中的值
执行完return语句后,函数执行结束
< script type= "text/javascript" >
function fnAdd ( iNum01, iNum02 ) {
var iRs = iNum01 + iNum02;
return iRs;
alert ( 'here!' ) ;
}
var iCount = fnAdd ( 3 , 4 ) ;
alert ( iCount) ;
< / script>
变量作用域介绍
-变量作用域就是变量的使用范围,变量分为:
局部变量
全局变量
-局部变量,就是在函数内使用的变量,只能在函数内部使用
< script type= "text/javascript" >
function myalert ( )
{
var b = 23 ;
alert ( b) ;
}
myalert ( ) ;
alert ( b) ;
< / script>
-全局变量,就是在函数外定义的变量,可以在不同的函数内使用
< script type= "text/javascript" >
var a = 12 ;
function myalert ( )
{
a++ ;
}
myalert ( ) ;
alert ( a) ;
< / script>
条件语句
-条件语句就是通过条件来控制程序的走向
-条件语句语法
if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
if...else if....else 语句 - 使用该语句来判断多条件,执行条件成立的语句
-比较运算符
假如 x = 5, 查看比较后的结果:
比较运算符 描述 例子 == 等于 x == 8 为 false === 全等(值和类型) x === 5 为 true; x === “5” 为 false != 不等于 x != 8 为 true > 大于 x > 8 为 false < 小于 x < 8 为 true >= 大于或等于 x >= 8 为 false <= 小于或等于 x <= 8 为 true
-比较运算符示例代码:
var iNum01 = 12 ;
var sNum01 = '12' ;
if ( iNum01== 12 ) {
alert ( '相等!' ) ;
}
else {
alert ( '不相等!' ) ;
}
if ( sNum01== 12 ) {
alert ( '相等!' ) ;
}
else {
alert ( '不相等!' ) ;
}
if ( sNum01=== 12 ) {
alert ( '相等!' ) ;
}
else {
alert ( '不相等!' ) ;
}
var sFruit = "苹果" ;
if ( sFruit == "苹果" ) {
alert ( "您选择的水果是苹果" ) ;
} else if ( sFruit == "鸭梨" ) {
alert ( "您选择的水果是鸭梨" ) ;
} else {
alert ( "对不起,您选择的水果不存在!" ) ;
}
-逻辑运算符
假如 x=6, y=3, 查看比较后的结果:
逻辑运算符 描述 例子 && and (x < 10 && y > 1) 为 true || or (x5 || y 5) 为 false ! not !(x==y) 为 true
-逻辑运算符示例代码:
var x = 6 ;
var y = 3 ;
if ( x < 10 && y > 1 ) {
alert ( '都大于' ) ;
}
else {
alert ( '至少有一个不大于' ) ;
}
if ( x > 5 || y > 7 ) {
alert ( '至少有一个大于' ) ;
}
else {
alert ( '都不大于' ) ;
}
if ( ! ( x == y) ) {
alert ( '等于' ) ;
}
else {
alert ( '不等于' ) ;
}
获取标签元素
-可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的标签元素,
获取到的是一个html对象,然后将它赋值给一个变量
比如:
< script type= "text/javascript" >
var oDiv = document. getElementById ( 'div1' ) ;
alert ( oDiv) ;
< / script>
< div id= "div1" > 这是一个div元素< / div>
-说明:
上面的代码,如果把javascript写在元素的上面,就会出错,
因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载。
-解决方法有两种:
-第一种方法:将javascript放到页面最下边(这种方法不推荐)
< div id= "div1" > 这是一个div元素< / div>
< script type= "text/javascript" >
var oDiv = document. getElementById ( 'div1' ) ;
alert ( oDiv) ;
< / script>
-第二种方法:设置页面加载完成执行的函数,在执行函数里面获取标签元素。
< script type= "text/javascript" >
window. onload = function ( ) {
var oDiv = document. getElementById ( 'div1' ) ;
}
< / script>
-说明:
onload是页面所有元素加载完成的事件,给onload设置函数时,当事件触发就会执行设置的函数。
操作标签元素属性
-首先获取的页面标签元素,然后就可以对页面标签元素的属性进行操作,属性的操作包括:
属性的读取
属性的设置
-属性名在js中的写法
html的属性和js里面属性大多数写法一样,但是“class” 属性写成 “className”
“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
< style>
. sty01{
font- size: 20px;
color : red;
}
. sty02{
font- size: 30px;
color : pink;
text- decoration: none;
}
< / style>
< script type= "text/javascript" >
window. onload = function ( ) {
var oInput = document. getElementById ( 'input1' ) ;
var oA = document. getElementById ( 'link1' ) ;
var sValue = oInput. value;
var sType = oInput. type;
var sName = oInput. name;
var sLinks = oA. href;
oA. className = 'sty02' ;
oA. style. color = 'red' ;
oA. style. fontSize = sValue;
}
< / script>
< input type= "text" name= "setsize" id= "input1" value= "20px" >
< a href= "#" id= "link01" class = "sty01" > 这是一个链接< / a>
-innerHTML:
innerHTML可以读取或者设置标签包裹的内容
< script type= "text/javascript" >
window. onload = function ( ) {
var oDiv = document. getElementById ( 'div1' ) ;
var sTxt = oDiv. innerHTML;
alert ( sTxt) ;
oDiv. innerHTML = '<a href="https://www.baidu.com">百度</a>' ;
}
< / script>
< div id= "div1" > 这是一个div元素< / div>
数组及操作方法
-数组的介绍
数组就是一组数据的集合,javascript 中,数组里面的数据可以是不同类型的数据,好比 python 里面的列表。
-数组的定义
var aList = new Array ( 1 , 2 , 3 ) ;
var aList2 = [ 1 , 2 , 3 , 'asd' ] ;
-多维数组
多维数组指的是数组的成员也是数组,把这样的数组叫做多维数组。
var aList = [ [ 1 , 2 , 3 ] , [ 'a' , 'b' , 'c' ] ] ;
-数组的操作
获取数组的长度
var aList = [ 1 , 2 , 3 , 4 ] ;
alert ( aList. length) ;
根据下标取值
var aList = [ 1 , 2 , 3 , 4 ] ;
alert ( aList[ 0 ] ) ;
从数组最后添加和删除数据
var aList = [ 1 , 2 , 3 , 4 ] ;
aList. push ( 5 ) ;
alert ( aList) ;
aList. pop ( ) ;
alert ( aList) ;
根据下标添加和删除元素
arr.splice(start,num,element1,.....,elementN)
参数解析:
start:必需,开始删除的索引。
num:可选,删除数组元素的个数。
elementN:可选,在start索引位置要插入的新元素。
此方法会删除从start索引开始的num个元素,并将elementN参数插入到start索引位置。
var colors = [ "red" , "green" , "blue" ] ;
colors. splice ( 0 , 1 ) ;
alert ( colors) ;
colors. splice ( 1 , 0 , "yellow" , "orange" ) ;
alert ( colors) ;
colors. splice ( 1 , 1 , "red" , "purple" ) ;
alert ( colors) ;
循环语句
-循环语句就是让一部分代码重复执行,Javascript中常用的循环语句有:
for
while
do-while
-for循环
var array = [ 1 , 4 , 5 ] ;
for ( var index = 0 ; index < array. length; index++ ) {
result = array[ index] ;
alert ( result) ;
}
-while循环 当条件成立的时候,while语句会循环的执行
var array = [ 1 , 4 , 5 ] ;
var index = 0 ;
while ( index < array. length) {
result = array[ index] ;
alert ( result) ;
index++ ;
}
-do-while循环 当条件不成立的时候do语句也会执行一次
var array = [ 1 , 4 , 5 ] ;
var index = 0 ;
do {
result = array[ index] ;
alert ( result) ;
index++ ;
} while ( index < array. length) ;
字符串拼接
-字符串拼接使用: "+" 运算符
数字和字符串拼接会自动进行类型转换(隐式类型转换),把数字类型转成字符串类型进行拼接
var iNum1 = 10 ;
var fNum2 = 11.1 ;
var sStr = 'abc' ;
result = iNum1 + fNum2;
alert ( result) ;
result = fNum2 + sStr;
alert ( result) ;
定时器
-定时器就是在一段特定的时间后执行某段程序代码
-定时器的使用
js定时器有两种创建方式:
setTimeout(func[, delay, param1, param2, ...]) :以指定的时间间隔(以毫秒计)调用一次函数的定时器
setInterval(func[, delay, param1, param2, ...]) :以指定的时间间隔(以毫秒计)重复调用一个函数的定时器
-setTimeout函数的参数说明:
第一个参数 func , 表示定时器要执行的函数名
第二个参数 delay, 表示时间间隔,默认是0,单位是毫秒
第三个参数 param1, 表示定时器执行函数的第一个参数,一次类推传入多个执行函数对应的参数。
< script>
function hello ( ) {
alert ( 'hello' ) ;
}
setTimeout ( hello, 500 ) ;
< / script>
-setInterval函数的参数说明:
第一个参数 func , 表示定时器要执行的函数名
第二个参数 delay, 表示时间间隔,默认是0,单位是毫秒
第三个参数 param1, 表示定时器执行函数的第一个参数,一次类推传入多个执行函数对应的参数。
< script>
function hello ( ) {
alert ( 'hello' ) ;
}
setInterval ( hello, 1000 ) ;
< / script>
-清除定时器
js清除定时器分别是:
clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)
-clearTimeout函数的参数说明:
timeoutID 为调用 setTimeout 函数时所获得的返回值,使用该返回标识符作为参数,
可以取消该 setTimeout 所设定的定时执行操作。
< script>
function hello ( ) {
alert ( 'hello' ) ;
clearTimeout ( t1)
}
t1 = setTimeout ( hello, 500 ) ;
< / script>
-clearInterval函数的参数说明:
timeoutID 为调用 setInterval 函数时所获得的返回值,使用该返回标识符作为参数,
可以取消该 setInterval 所设定的定时执行操作。
< script>
function hello ( ) {
alert ( 'hello' ) ;
}
var t1 = setInterval ( hello, 1000 ) ;
function stop ( ) {
clearInterval ( t1) ;
}
< / script>
< input type= "button" value= "停止" onclick= "stop();" >