java web 核心技术_javaWeb核心技术第三篇之JavaScript第一篇

-概述-JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言-作用:给页面添加动态效果,校验用户信息等.-入门案例-js和html的整合-方式1:内联式"通过标签实现,在标签体中编写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:绑定事件"实现方式:通过标签的事件属性

例如:"

-方式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: undefinedvarage;

Number:

String:

Null:nullBoolean:typeof对象;

引用类型:

运算符

等性运算符:== !=

=== !==关系运算符:> < >= <=逻辑运算符:&& || !

"abc" || false

"abc" || "123"

"abc" && "123"

"abc" && false语句if("123"){}for(){}

函数

方式1:普通函数function函数名(){}

方式2:匿名函数var 函数名 = function(参数,参数){}

调用函数:

函数名(参数,参数);

返回值:return返回值;

事件

onclick:单击事件

onsubmit:表单提交事件

onload:页面加载成功事件

事件和事件源绑定

方式1:绑定事件

通过标签的事件属性

方式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= "值";

正则表达式: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.确定事件(表单提交事件)

2.编写checkForm函数functioncheckForm(){//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.返回值

returnflag;

}

案例2-表格各行换色

需求分析:

当页面加载成功后,给表格的奇数行和偶数行添加不同的背景颜色

技术分析:

事件

DOM://

步骤分析:1.确定事件(页面加载成功事件)

οnlοad= function(){

}2.编写匿名函数

a.获取当前页面所有行对象var trObjArr = document.getElementsByTagName("tr");

b.遍历数组对象,给计数行和偶数行添加不同的背景颜色for(var i=0;i

trObjArr[i].style.backgroundColor= "颜色";

}else{

trObjArr[i].style.backgroundColor= "颜色";

}

}

案例3-复选框全选和全不选

需求分析:

当点击头部的复选框的时候,要使其他复选框的状态和头部的保持一致.

技术分析:

单击事件

DOM

操作元素的checked属性/

步骤分析:1.确定事件(单击事件)

给头部的复选框添加单击事件2.编写函数

a.获取头部复选框状态

对象.checked;

b.获取其他的复选框对象

c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性

案例4-省市二级联动

需求分析:

当省份的下拉选改变的时候,根据选中的省份查询其所对应的市,将所对应的市,展示到市的下拉选中.

技术分析:

改变事件

数组

Dom操作/

步骤分析:1.确定事件(改变事件)

给省份的下拉选添加改变事件2.编写changePro函数functionchangePro(){

a.获取选中省份所对应的市数组(value)var cityArr =arr[value];

b.获取市的下拉选对象var cityObj = document.getElementById("cityId");

c.遍历市数组,将每一个市拼成option追加到市的下拉选中

cityObj.innerHTML+= "";

}