- 概述 - JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 - 作用:给页面添加动态效果,校验用户信息等. - 入门案例 - js和html的整合 - 方式1:内联式 "通过script/s
- 概述
- JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言
- 作用:给页面添加动态效果,校验用户信息等.
- 入门案例
- js和html的整合
- 方式1:内联式
"通过<script></script>标签实现,在标签体中编写js代码即可"
- 方式2:外联式
"编写外部的js文件,通过srcipt标签的src属性引入即可"
- 注意事项:
" script标签可以放在页面的任何位置,一般放在head中
一个页面可以有多个srcipt标签
script标签一旦使用了src属性,它的标签体就会失效"
- 组成部分
- ECMAScript:核心语法
- 变量声明
- 格式: var 变量名称 = 初始化赋值;
- 注意事项:
- var可以省略,但是不建议省略
- 末尾的分号也可以省略,但是不建议
- 数据类型
- 原始类型(5种)
- Undefined:undefined
- Null:null
- Number:一切数字
- String:一切被引号引起来的字符串
- Boolean: true 或 false
- 运算符typeof
"用来判断给定值的数据的所属类型 例如: typeof age;"
- 引用类型:javaScript第二天内容
- 运算符
- 等性运算符
- == !=
"判断数值"
- === !==
"判断数值和类型"
- 关系运算符
- > < >= <=
- 逻辑运算符
- && || !
- 非空对象 非0数字 非空字符串 都为true 其他为false
- 语句
"几乎和java一样"
- if ... else ...
- for(){}方式
- 函数
"用来完成指定操作的代码片段,在java中叫方法,在js中叫函数"
- 方式1: 普通函数
" function 函数名称(参数列表){
...
}"
- 方式2(匿名函数):
"var 函数名称 = function(参数列表){
...
}"
- 函数返回值:在函数中直接使用return返回结果即可
- 注意事项:参数列表中的参数可以不写类型
- 事件
"具体的某件事情"
- 单击事件: onclick
"单击鼠标时触发"
- 表单提交事件: onsubmit
"提交form表单时触发"
- 页面加载成功事件: onload
"当页面加载完毕后触发"
- 事件和事件源的绑定
- 方式1:绑定事件
" 实现方式:通过标签的事件属性
例如:<xxx onclick="函数名(参数列表)"></xxx>"
- 方式2:派发事件
" 实现方式:获取标签对象(元素)
对象.事件名称=function(){}"
- 使用步骤:
- 1.确定事件
- 2.编写函数
- 获取元素
- 处理元素
- BOM(浏览器对象模型):操作浏览器
- window 窗口
- 常用属性
"通过它获取其他的四个对象
eg:window.history == history
注意:使用window的对象或属性时,window可以省略不写"
- 常用方法
- 定时器
- var 定时器id = setInterval() 设置周期执行定时器
- 格式1:setInterval(函数名称,毫秒值);
"周期执行,每隔多少毫秒执行一次指定函数"
- 注意:每个定时器都会返回一个定时器id,定时器id主要用在清除定时器时.
- 格式2:setInterval("函数名称(参数列表)",毫秒值);
- "周期执行,每隔多少毫秒执行一次指定函数 可传递参数"
- clearInterval() 清除周期执行定时器
- 使用方式:clearInterval(定时器id)
"作用:将正在使用的定时器清除"
- setTimeout() 单次执行定时器
- 格式1:setTimeout(函数名称,毫秒值);
"单次执行,多少毫秒后执行指定函数,只执行一次"
- 格式2:setTimeout("函数名称(参数列表)",毫秒值);
"单次执行,多少毫秒后执行指定函数,只执行一次 可传递参数"
- 注意:每个定时器都会返回一个定时器id,定时器id主要用在清除定时器时.
- clearTimeout()
- 使用方式:clearTimeout(定时器id)
- 警告框
- alert();
- 对话框
- prompt();
"可以传入两个参数,第一个为提示信息,第二个为默认值"
- 确认框
- confirm();
"可以传入一个参数,为确认信息"
- 扩展
- 打开 open(url);
- 关闭 colse();
- history 历史
- 常用方法
- forward(); 下一个页面
- back(); 返回上一个页面
- go(Number); ★
- go(number); 向后跳转几个页面
- go(-number); 向前跳转几个页面
- location 连接 ★★
- 常用属性
- href
- location.href; 得到当前页面的路径
- location.href=url; 跳向指定的页面
- navigator 了解
- screen 了解
- DOM(文档对象模型):操作文档 (明天内容)
- 获取一个元素(标签)对象
- var obj = document.getElementById("id值");
"通过id获取一个标签对象"
- 获取对象中的value值
"通过对象的value属性 对象.value;"
回顾:
javaScript:直译式的脚本语言,直接嵌入html使用即可
js和html整合:
方式1:内联式
通过script标签实现,直接在标签体中编写js代码即可
方式2:外联式(首先要编写外部的js文件,后缀名以*.js结尾)
通过script标签的src属性实现
js组成部分:
ECMAScript:核心语法
变量声明
var 变量名称 = 初始化值;
数据类型
原始类型:(5种)
Undefined: undefined var age;
Number:
String:
Null: null
Boolean:
typeof 对象;
引用类型:
运算符
等性运算符:
== !=
=== !==
关系运算符:
> < >= <=
逻辑运算符:
&& || !
"abc" || false
"abc" || "123"
"abc" && "123"
"abc" && false
语句
if("123"){}
for(){}
函数
方式1:普通函数
function 函数名(){}
方式2:匿名函数
var 函数名 = function (参数,参数){}
调用函数:
函数名(参数,参数);
返回值:
return 返回值;
事件
onclick:单击事件
onsubmit:表单提交事件
onload:页面加载成功事件
事件和事件源绑定
方式1:绑定事件
通过标签的事件属性
<xxx onclick = "func()"></xxx>
方式2:派发事件
a.获取事件源(获取标签对象)
var 对象 = document.getElementById("id");
b.给事件源派发事件
对象.事件名称 = function(){
....
}
BOM:操作浏览器
window:窗口
属性:
通过window获取其他的四个对象即可.使用window的属性或方法的时候window可以省略不写
方法:
定时器:
周期执行:
var interId = setInterval();
setInterval("函数名称()",毫秒值);
setInterval(函数名称,毫秒值);
clearInterval(id);
单次执行:
var timeId = setTimeout();
clearTimeout(id);
警告框:
对话框:
确认框:
打开和关闭:
history:历史
方法:
forward();
back();
go(number);
location:连接 ★★
属性:
href
location.href;
location.href = url;
DOM:操作文档
var 对象 = document.getElementById("id");
对象.属性名称; 获取
对象.属性名称 = 值; 设置
/
案例1-完善表单校验
需求分析:
当表单提交的时候,校验表单中的用户名和密码是否符合格式,如果不符合,则在相应的输入框后面填写提示信息且不允许表单提交,
反之可以提交
技术分析:
事件
正则表达式:
DOM对象:
///
DOM:
操作value属性
获取value属性的值:
获取一个标签对象:
var 标签对象 = document.getElementById();
获取value属性的值:
标签对象.value;
设置value属性的值:
获取一个标签对象:
var 标签对象 = document.getElementById();
设置value属性的值
标签对象.value = 值;
操作标签体:
获取标签体内容:
获取一个标签对象:
var 标签对象 = document.getElementById();
获取标签体的内容:
标签对象.innerHTML;
设置标签体内容:
获取一个标签对象:
var 标签对象 = document.getElementById();
设置标签体的内容:
标签对象.innerHTML = "<xxx>值</xxx>";
正则表达式:
1.编写正则表达式
用户名：var zz = /^[a-z0-9_-]{3,16}$/;
密码：var zz = /^[a-z0-9_-]{6,18}$/;
校验为空: /^\s*$/
2.校验
var str = "123";
zz.test(str); Boolean
///
步骤分析:
1.确定事件(表单提交事件)
<form onsubmit="retrun checkForm()"></form>
<form id="formId"></form>
2.编写checkForm函数
function checkForm(){
//0/设置全局开关
var flag = true;
//a.获取用户名和密码输入框对象
var 对象 = document.getElementById("id");
//b.获取用户名和密码的值
var val = 对象.value;
//c.编写正则表达式
//d.校验
if(zz.test(val)){
//校验不通过
给对应的span标签中填写提示信息
flag = false;
}else{
//校验通过
给对应的span标签中填写提示信息
}
//e.返回值
return flag;
}
案例2-表格各行换色
需求分析:
当页面加载成功后,给表格的奇数行和偶数行添加不同的背景颜色
技术分析:
事件
DOM:
//
步骤分析:
1.确定事件(页面加载成功事件)
onload = function(){
}
2.编写匿名函数
a.获取当前页面所有行对象
var trObjArr = document.getElementsByTagName("tr");
b.遍历数组对象,给计数行和偶数行添加不同的背景颜色
for(var i=0;i<trObjArr.length;i++){
if(i%2==0){
trObjArr[i].style.backgroundColor = "颜色";
}else{
trObjArr[i].style.backgroundColor = "颜色";
}
}
案例3-复选框全选和全不选
需求分析:
当点击头部的复选框的时候,要使其他复选框的状态和头部的保持一致.
技术分析:
单击事件
DOM
操作元素的checked属性
/
步骤分析:
1.确定事件(单击事件)
给头部的复选框添加单击事件
2.编写函数
a.获取头部复选框状态
对象.checked;
b.获取其他的复选框对象
c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性
案例4-省市二级联动
需求分析:
当省份的下拉选改变的时候,根据选中的省份查询其所对应的市,将所对应的市,展示到市的下拉选中.
技术分析:
改变事件
数组
Dom操作
/
步骤分析:
1.确定事件(改变事件)
给省份的下拉选添加改变事件
2.编写changePro函数
function changePro(){
a.获取选中省份所对应的市数组(value)
var cityArr = arr[value];
b.获取市的下拉选对象
var cityObj = document.getElementById("cityId");
c.遍历市数组,将每一个市拼成option追加到市的下拉选中
cityObj.innerHTML += "";
}