-
JavaScript是什么?
JS是一种小型的、轻量级的、面向对象的、跨平台的客户端脚本语言。
JS是嵌入到浏览器软件当中去的,有浏览器就可以执行JS程序了。
JS是一种面向对象的程序语言。
在程序中,对象是由“属性”和“方法”构成。
在现实中,男女朋友就是一个“对象”。“东西”就是“对象”。一个“物体”就是“对象”。
“对象”有各种各样的特征(属性),如:身高,体重,年龄,姓名,学历等。
“对象”有很多方法。“人”这个对象,可以做很多
注意:JS中的对象只要会用就可以的,不需要我们自己去开发对象
跨平台:JS程序可以在多种平台下运行,如:widows、linux、mac、IOS等。
客户端脚本程序:JS只能在客户端的浏览器运行,不能在服务器端(阿帕奇)来运行。
浏览器是一种翻译器,可以翻译三种代码:html、CSS、JS。不需要服务器,因为本来就是客户端的。
。
。
-
JavaScript的应用
表单验证:是JS最基本的功能。
动态HTML:可以实现一些动态的、重复的效果。
交互试:人机交互,通过键盘和鼠标,在网页中的元素进行交互。
。-
<script></script>标记
-
常用的两个客户端输出方法
(1)document.write(str内容)
- 描述:在网页的<body>标记,输出str的内容。
- Document意思“文档”,就是整个网页。
- Document是一个文档对象,代表整个网页
- write是document对象的一个输出方法。
- “.”小数点:通过小数点来调用对象的方法。
- str:表示要输出的内容。
(2)window.alter(str内容)
- 描述:在当前窗口中弹出一个警告对话框,str为对话框中显示的内容。
- window代表当前浏览器窗口,window是一个窗口的对象。
- alter()方法:弹出一个对话框。
- str:显示要输出的内容。
.
- JS中的注释
- HTML的注释:<!-注释内容->
- CSS注释:/注释内容/
- JS的注释:// 或 /* 多行注释*/
JS变量
1、变量的概念
- 变量是变化的一个量。
- 变量可以看成是一个“未知数”。
- 变量可以看成是宾馆的“房间号”。
- 变量可以看成是宾馆的“房间号”。
- 变量一般指程序数据。
- 变量是临时存在的数据。我们可以把计算机内存看成是一个个的小格子。每个小格子中可以存储一个变量的名称和变量的值。
2、变量的声明
相当于预定宾馆的“房间”。
语法格式:var 变量名=变量的值
变量声明是使用系统关键字var来进行的
举例:var name;//声明变量
var,name,sex,edu;//同时声明用对个变量,多个变量间用英文下的逗号 隔开。
var name="张三";//一边声明,一遍赋值。
3、变量的命名规则
- 变量的名可以包含字母、数字、下划线。
- 变量名不能以数字开头,可以以字母和下划线开头。如 var _name;
- 变量名不能是系统关键字。如:var,swith,for,try,case,else,while等。
- JS中变量名是区分大小写的。如name和Name是两个变量。
- JS中变量的名称一定要有意义。
- 如果变量名有多个单词构成的话,
“驼峰式命名”:第一个单子小写,后面每个单词首字母大写。如getUserName:获取用户名。
“下划线式命名”:所有单词全小写,中间用下划线链接线链接。如:get_user_name
4、给变量赋值
给变量赋值,就是往“空间”中装东西。
使用赋值号“=”来给变量赋值。
语法:var 变量名=变量名
举例:var name="张三";
“=”的意义:将“=”右边的“运算结果”赋给左边的变量名。
应该是“=”右边先运算,再把运算的结果,赋给左边的变量
“=”左边只能是一个变量名,而不能是“运算表达式”。说白了等号左边就是一个容器,至于容器里面装什么是等号右边的事情
例如
![Upload Paste_Image.png failed. Please try again.]
.
.
.
.
-
JS的运算符
1、算术运算符:加减乘除
运算时,只能进行同类型运算。如果类型不同,将进行类型转换。
2、赋值运算符:=、+=
- 将等号右边的运算结果,赋给左边的变量。
- +=:先加后等
。
-
写程序的一般步骤
(1)变量的初始化:变量声明,变量赋值
(2)程序的运行过程
(3)输出结果
.
。
JS程序的基本语法
- JS是区分大小写的
- JS中每一条语句,一般以英文下的分号(;)结束。这个分号不是必须的,为了向PHP兼容,最好加上分号。
- 运算符和变量,以及操作之间可以使用空格分开,这样的程序比较容易阅读。
var a=100;varna=10;是一样的。
.
变量的数据类型
变量是有类型的,这个类型来源于“变量的值”,值是什么类型,变量就是什么类型。
JS变量的类型有:数值型、字符型、布尔型、未定义型、空型underfined,null,array,object,function
1、数值型:可以进行算术运算的(加减乘除)
数值型包括:整型(整数)和浮点型(小数)
2、字符型:用单引号或双引号,引起来的一串字符。
注意:单引号和双引号可以相互嵌套
单引号内只能嵌套双引号
双引号内只能嵌套单引号
如下例:双引号内嵌套单引号,为了是名字加单引号。
注意:如果想在双引号内在嵌套双引号,里面的双引号一定要进行转义(\ ")
JS中转义字符是反斜杠(\)
常用的转义字符有:' " \ \r \n等
也就是说,当浏览器遇到反斜杠时,将会对其后的一个字符进行特殊对待,当成普通字符来对待。所谓普通字符就是平常的a,b,c,d字母字符。
3、布尔型
又称逻辑型。只有两个值:true、false(假)
布尔型只有两个状态。如性别
var a=true;
var b=false;
布尔型常用if条件判断语句中
-
if条件判断
1、语法结构--只判断true,不判断flase
if(条件判断:结果只有true或false)
{
条件为true,将执行该代码;
}
2、语法结构--既判断true,又判断flase
if(条件判断:结果只有true或false)
{
条件为true,将执行该代码;
}
else
if(条件判断:结果只有true或false)
{
条件为false,将执行该代码;
}
如果条件为true,则执行第一个大括号{}中的代码。
如果条件为flase,则执行第二个大括号{}中的代码。
4、未定义型(用的很少)
当一个变量定义,但未赋值时,将返回未定义型,未定义型的值只有一个undefined。
当一个对象属性不存在,也返回未定义型。
5、空型(用的很少)
当一个对象不存在时,将返回空型的值null.
也可以理解为:是一个对象的占位符
如果你想清除一个变量的值的话,可以赋一个null的值。
var a=null,//将一个null赋给一个变量,用于清除他的值
变量的类型转换
判断变量的数据依据:typeof()
使用一元运算符typeof(),可以测试一个变量的类型。
typeof()测试的结果是一个类型字符串。
typeof()的结果字符串有几种情况:"string" "number" "boolean" "undedined" "object" "function"
另外:null、对象、数组这三种类型,都将返回"object"
备注:只有这五个是假,其它都为真
。
函数和方法的区别
Boolean(a) //函数是可以独立使用的
document.write(a) //方法不能独立使用,方法是必须要属于哪一个对象。
注意事项:a+true中true会自动转换成字符串"true","+"左右只要有一个字符串,那么另外一个一定得转成字符串,才能运算。“”乘号左右两边有一个数值型,则另外一个一定要转换成数值型。
var a="";
var b=a+true;//相当于b=a+true="true"*
.
.
。
从字符串中提取整数浮点数函数
(1)parseInt()系统函数、全局函数
功能:在一个字符串中,从左往右提取整型。如果遇到非整型的内容,则停止提取,并返回结果。
注意:如果第一个字符就是非整数,则立即停止,并返回NaN
如:parselnt("120px")=120
parselnt("120.98")=120
parselnt("a 120px")=NaN
parselnt(".98")=NaN
例子:
(2)parsefFloat()系统函数,全局函数
功能:在一个字符串中,从左往右提取浮点型,遇到非浮点型内容,则停止提取,并返回结果。
注意:如果第一个字符为非浮点型,则立即停止,并返回NaN.
parseFloat("120px")=120
parseFloat("120.98")=120.98
parseFloat(".98")=0.98
parseFloat("a.98")=NaN
注意:JS中的浮点型是包括整数和小数点的,也就是说用parseFloat()函数时,整数也一样的当做f浮点型,不会停止变成NaN,所以parseFloat比parseInt大一级。只要是数值都可以提取,而parseInt只能提取整数。
‘
’
* JS运算符
1、算术运算符
加减乘除(+,-,*,/),%,++,--
取余运算符(%),两个数相除,取余数
。
2、赋值运算符:=、+=、-=、*=、/=
。
注意:第三和第四的比较
.
作业
。
。
。
if条件判断语句:条件成立,执行什么代码;条件不成立,执行什么代码。
结构一:只判断真(true),条件为假,什么也不做。
例子:
switch分支语句
描述:根据一个变量的不同取值,来执行不同的代码。
语法结构:
。
。
while循环:只要条件成立,就重复不断的执行循环体代码。如果条件为假,则退出循坏。
while(条件判断)
{
如果条件为true,则执行循环体代码
}
while循环结构说明:
- 在循环开始前,必须要对变量初始化(声明变量,给变量给个初始值)
- 如果while的条件为真,则会重复不断的执行循环体中({})的代码。
- 在循环体中,必须要有“变量更新”的语句,换句话说:两次循环的变量的值不能一样,如果一样,会造成死循环。
结果:
结果:
。
结果:
实例:隔行变色
注意:
for循环
求0-100的偶数,与while一样
。
注意:" "表示变量i的值有空格排列。
。
break语句:
continue语句:
例子:做九九乘法表
第一步:
第二步:({}中代表的是循环体,循环体在哪里,for循环就在哪里)
第二步结果:
第三步(循环套循环):
第三步结果:
第四步(j<=i)
第五步(×是代表的"乘号"):
第五步结果:
。
。
数组:
注意:数组和循环一起用的,一般不单独用。
;
创建数组
。
。
数组的操作:
。
。
。
1、函数的概念:
函数,是将一段公共的代码进行封装,给它起个名字叫“函数。”
函数可以一次定义,多次调用。
函数,可以将常用的功能代码,进行封装。如:表单中用户名的验证、验证码函数、邮箱的验证。
2、函数的定义格式:
3、函数的调用
函数定义是没用的,需要调用才有用。
函数的调用:直接写函数名,如果有参数加参数,没有不用写。小括号必须写。
注意:先执行调用函数那行,再执行括号里面的,网上定义。定义和调用函数不分顺序
4、函数的参数
注意:1、形参是变量,实参是实际数量
2、函数可以一次定义多次调用
5、求两个整数的最大值
此时return被屏蔽了,则值无法传送到函数外,docnment数出的值为undefind
例子:return的运用
。
。
全局变量和局部变量
全局变量:可以在网页的任何地方(函数内部和函数外部)使用的变量,就是“全局变量”。
在函数外部定义的变量,就是“全局变量”。
“全局变量”既可以在函数外使用,也可以在函数内部使用。
“全局变量”在网页关闭时,自动消失(释放空间)。
局部变量:只能在函数内部使用的变量称为局部变量。
“局部变量”在函数内部定义,在函数内部使用。
“局部变量”在函数外部无法访问。
“局部变量”在函数执行完毕就消失了。
注意:在函数内部,省略关键字var定义的变量是“全局变量”,var关键字尽量不要省略,省略后全局变量和局部变量会混淆
注意:通过这四个比较记住两点;1、age是全局变量还是局部变量。2、第二句输出是在调用函数前还是后,是前则age没值,因为还没运行大括号内的函数,所以不知道age的值。是后则有值。
执行顺序:
先执行函数,所以先出李四。
‘
‘
拷贝传值和引用传值
‘
’
二维数组(二维数组和表格比较像)
用的非常多,二维数组就得用两层循环来实现,也就是循环套循环
二维数组的循环与二维表格的循环一模一样
二维数组的访问:数组名后跟多个 连续的中括号【】,第1个中括号代表第一维数组,第二个中括号代表第二维数组
。
。
对象
1、对象的概念
自定义对象(shownfo是指显示信息,方法)
1、使用new关键字结合构建函数Object()来创建一个空对象。
2、使用大括号{}来创建对象
。
。
JS内置对象
提取对象的方法格式都是:{对象(如String,Array).方法}
string(字符串)对象(共六个方法)的方法1::charAt(index)(在原字符串提取一个下标)
-
注意:index索引号也就是下标号。
方法2:indexOf() (在原字符串中查找某一字符串,从左往右查,strObj.indexOf(@)=一个数字,即多少个索引值)
表单验证@中有用,查找顺序是从左往右查找。
。
方法3:lastindexOf() (在原字符串中查找某一子字符串,右找起)
方法4:substr() (在原字符串中提取一子字符串)
例子
方法5:substring() 在一字符串中提取一子字符串
方法6:split() 将字符串转换成数组
()括号内的分隔号是指字符串里面的分隔号,如果中间没有分隔号,则是空格号,如"beijingsh"转换成数组,"beijingsh".split("")=["a","b","c","d"]下面即看到逗号就分割。
注意:第12行得出的星期值是阿拉伯数字,所以要创建一个数组arr[week]就是数组第几个
例子:
利用空字符串来做分割
。
。
。
Array(数组 )对象:一个数组变量,就是一个数组对象。
length属性:动态获取数组长度。如:var len=arrObj.length
join() 数组转换成字符串
- 功能:将一个数组转换成字符串。
- 语法:arr.Obj.join(连接号)
- 说明:将一个数组,用指定的"连接号"连接成一个字符串。
reverse()
- 功能:将数组中各元素颠倒顺序
- 语法:arrObj.reverse()
- 参数:无
.
.
数组元素的删除和添加
- delete运算符,只能删除数组元素的值,而所占空间还在,总长度没变(arr.length)
- 以前数组元素的添加,只能向后添加,不能向前添加。
表明:delect只能往后添加,若添加arr[1]=15,则15把数组中的‘男’替换了
数组元素的删除:
shift():删除数组中的第一个元素,返回删除的那个值,并将长度减1
pop():删除数组的最后一个元素,返回删除的那个值,并将长度减1
结果
数组元素的添加:
- unshift():往数组前面添加一个或多个数组元素,长度改变。arrObj.unshift("a","b","c")
- push():往数组结尾加一个或者多个数组元素,长度改变。arrObj.push("a","b","c")
.
.
.
Date对象:日期对象
Date对象和string对象不一样:
string对象:定义了一个字符串,其实就是一个string独享,就可以直接调用属性和方法。
()或者 new String() ,,,,,,new Array()或者[]
Date对象:必须使用new关键字来创建对象。否则无法调用Date对象的属性和方法。
创建Date对象的方法
(1)创建当前(现在)日期对象的实例,不带任何参数。
(2)创建指定时间戳的日期对象实例,参数是时间戳。
时间戳:是指某一个时间距离1970年1月1日0时0分0秒,过去了多少毫秒(1秒等于1000毫秒)。
var timer=new Date(10000)...1970年1月1日0时0分10秒
(3)指定一个字符串的日期时间信息,参数是一个日期时间字符串
var timer=new Date(2015/5/25 10:00:00);
(4)指定多个数值参数
var timer=new Date(2015,4,25,10,20,0)//顺序是:年月日时分秒(年月日必须写)
![Uploading Paste_Image_218993.png . . .]
如果是1970年前生的,没有负值,直接也是正数
例子:
结果:
。
。
。
Math数学对象
math对象是一个静态对象,换句话说,在使用Math对象,不需要创建实例
实例:随机网页背景色
script放在body后面
。
。
。
Number数值对象
一个数值对象,就是一个数值对象(Number对象)
toFixed()
- 功能:将一个数值转换成字符串,进行四舍五入,保留指定位数的小数。
- 语法:numObj.toFixed(n)
- 参数:n就是要保留的小数位
- 举例:
var a=123.9878
a=a.toFixed(2);//a="123.99"(先转换字符串)
实例:
作业:
1、
2、
3、
。
。
。
。
BOM和DOM简介(最重要的是定时器和延时器,其它了解)
BOM,browser object modle,浏览器对象模型
BOM主要提供了访问和操作浏览器各组件的方式
浏览器组件:window(浏览器窗口)、location(地址栏)、history(浏览历史)、screen(显示器屏幕)、navigator(浏览器软件)
各对象之间是有层级关系的,那么个对象之间如何访问呢?
- window.document.write("ok")
- window.document.body.bgColor="#FF0000"
- window对象是所有其它对象的最顶层对象,因此,可以省略
.
.
window对象的属性
- 1、name:指浏览器窗口的名字或框架的名字。这个名字是给<a>标记的target属性用。
*设置窗口的名字:window.name="newWin"
*获取窗口的名字:documentwrite(name) - 2、top:代表最顶层窗口。如:window.top
- 3、parent:代表父级窗口
- 4、self:代表当前窗口
- 5、innerWidth:指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏),该属性火狐支持,IE不支持。
* 在IE下,使用document.documentElement.clientWidth来代替window.innerWidth。 - 6、innerHeight:指浏览器窗口的内高(不含菜单栏、工具栏、地址栏、状态栏),该属性火狐支持,IE不支持
- 在IE下,使用document.documentElement.clientHeight来代替window.innerHeigth。
- document.documentElement就是<html>标记对象
- document.body 就是<body>标记对象
。
。
。
window对象方法
open()方法
- 功能:打开一个新的浏览器窗口。
- 语法:var winObj=window.open(url,name,options);
onload事件:当网页加载完成,指<body>标记的所有内容全部加载完成,才触发该事件(条件)。通过onload事件属性,去调用JS的函数。onload属性只有body标记才有。
在JS程序开始写window.onload=init和在<body onload="init()">是一样的,init是有名函数,所以不能加括号,如果是匿名函数,则要加括号,如匿名函数window.onload=fuction(){},用匿名函数可以少写一行。
onclick事件,当单击时,去调用JS代码,所有html标记都有该事件。写在<body>中的某一标记中。
。
。
。
延时器方法——setTimeout()
实例:计时器
此段程序执行顺序:单击开始按钮,onclick事件触发,调用start2()函数,然后去JS中找start2()函数。然后执行函数内的功能
定时器方法----setInterval()
实例:图片执行自动变换
。
。
。
DOM对象
screen屏幕对象
navigator浏览器对象
。
location地址栏对象
。
history历史记录对象
。
。
。
.
HTML节点树
节点与节点的关系
DOM中节点类型
核心DOM中公共的属性和方法
- 提示:核心DOM中查找节点(标记),都是从根节点(html节点)开始的。
1、节点访问
2、对节点属性操作
3、节点的创建注意:节点就是标记。
实例:随机显示小星星
。
。
HTML DOM简介和新特性
HTML DOM访问HTML元素的方法(最常用)
元素对象属性
#######例子:
程序效果
元素对象属性
实例:书讯快递
.
CSS DOM动态样式
使用JS来操作CSS中的各种属性
JS只能操作及修改行内样式:imgObj.style.border="1px solide red"(行类样式一般是那种一个属性只能加一个值的)
对于类样式,通过className来赋值:imgObj.className="imgClass"(类的里面有好多个)
style对象
style对象属性与CSS属性的转换
。
。
/1、Event事件
2、常用事件
3、事件句柄属性
。
。
Event对象简介
DOM中的Event对象
1、DOM中引入Event对象(DOM浏览器就是标准浏览器)
![Upload Paste_Image.png failed. Please try again.]
2、DOM中Event对象属性
IE中的Event对象
实例:点出满天星星
当当我的购物车
6和7是CSS的引入,8是JS的引入
选项卡实例
![Uploading Paste_Image_464119.png . . .]
历史篇
。
。
Form对象
表单提交和验证方法总结
1、使用submit按钮,结合onsubmit事件来实现 (最常用)
onsubmit是form的属性,不能给input标记用,input用onclick
需要阻止就返回假,不需要阻止就不需要返回
2、submit按钮,结合onclick事件,实现表单的验证和提交
3、buttom按钮(普通按钮),结合submit方法,
普通按钮的默认功能无任何功能,所以return布尔值给他没用,不要要return任何值给他
。
。
input对象
表单验证案例:
![Upload Paste_Image.png failed. Please try again.]
![Upload Paste_Image.png failed. Please try again.]
![Upload Paste_Image.png failed. Please try again.]
程序效果
二级联动菜单
slect对象属性
option对象
综合案例:二级联动菜单
。
。