java web 速成_JAVAWEB第三天——JavaScript速成（1）

一、什么是JavaScript?

JavaScript被设计用来向HTML页面添加交互行为。

JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言)

由书行可执行计算机代码组成。

通常被直接嵌入HTML页面

一种解释性语言

二、 javascript的作用？

HTML：整个网站的骨架

CSS：对整个网站骨架的内容进行美化

JavaScript：能够让整个页面具有动态效果。

三、 javascript的组成部分

ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数 据类型、语句、函数等等)

DOM：文档对象模型，包含(整个 html 页面的内容)

BOM：浏览器对象模型,包含(整个浏览器相关内容)

四、 javascript语法

区分大小写

变量为弱类型的

定义变量时只用关键字 var运算符，可以将它初始化为任意值。例如：

var color =”red”;

var num =25;

var visible = true;

分号可有可无，建议携带。

变量声明不是必须的。如拼接一个新的字符，直接拼接不用声明。

五、 ECMAscript原始类型

五种原始类型，undefined、null、boolean、number、string。

其中

Undefine：是指当声明的变量未初始化时，该变量的默认值为Undefined。

number：表示所有的数字类型，typeof运算符对null返回值返回Object。

null：对象不存在；

undefined：对象存在，访问属性或者方法不存在(对象未初始化)。

六、 ECMAScript运算符

重点学习等性运算符

其它运算符与 java 大体一致，需要注意其等性运算符。 “==” 它在做比较的时候会进行自动转换。仅尝试进行转换。“ ===” 它在做比较的时候不会进行自动转换。

例：

var sNum =”66”;

var iNum = 66;

alert(sNum == iNum); -------返回true

alert(sNum === iNum); --------返回false

TIPs：==仅尝试进行转换如若相差太多，则不反悔true。

七、 ECMAScript语句

所有语句与 java 大体一致。if…else，for循环，do…while，break，case等。

八、 获取元素内容

获取元素 document.getElementById(“id 名称”); id如果是字符串则应该加上引号。

获取元素里面的值 document.getElementById(“id 名称”).value;

九、 Javascript 事件

onsubmit 表单提交事件

onabort 图像加载被中断

onblur 元素失去焦点

onchange 用户改变域的内容

onclick 鼠标点击某个对象

ondblclick 鼠标双击某个对象

onerror 当加载文档或图像时发生某个错误

onfocus 元素获得焦点

onkeydown 某个键盘的键被按下

onkeypress 某个键盘的键被按下或按住

onkeyup 某个键盘的键被松开

onload 某个页面或图像被完成加载

onmousedown 某个鼠标按键被按下

onmousemove 鼠标被移动

onmouseout 鼠标从某元素移开

onmouseover 鼠标被移到某元素之上

onmouseup 某个鼠标按键被松开

onreset 重置按钮被点击

onresize 窗口或框架被调整尺寸

onselect 文本被选定

onunload 用户退出页面

-------以上仅为部分，主要参考W3C手册为佳，找出自己想用的事件---------

十、 JavaScript输出

操作HTML元素

向页面指定位置写入内容：innerHTML(属性)。

如需从JavaScript访问某个HTML元素，可以使用document.getElementById(id)方法。

案例：

My First Web Page

第一段p>

.innerHTML=”MY First JavaScript”;script>

TIPs:向页面的指定位置输入内容

写在文档中输出

向页面写入内容：document.write(“”);

下面的例子直接把元素写道HTML文档输出中

案例：

My First Web Page

”>);script>

body>

弹出警告框：alert();

向页面指定位置写入内容，innerHTML()

十一、 步骤分析(记)

第一步：确定事件(onsubmit)并为其绑定一个函数

第二步：书写这个函数(获取用户输入的数据)

第三步：对用户输入的数据进行判断

第四步：数据合法(让表单提交)

第五步：数据非法(给出错误提示信息，不让表单提交)

如何控制表单提交？

关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个 返回值。 onsubmit = return checkForm()

十二、 使用JS完成注册页面表单的校验

(一) 用户名校验：

var uValue=document.getElementById("user").value;

if(uValue ==""){

alert("用户名不能为空");

return false;

}

(二) 密码校验：

var pValue = document.getElementById("password").value;

if (pValue =="") {alert("密码不能为空");

return false;

}

(三) 确认密码校验：

var rValue = document.getElementById("repassword").value;

if(rValue != pValue){

alert("两次密码输入不一致");

return false;

}

(四) 邮箱校验：

var eValue = document.getElementById("email").value;

if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){

alert("邮箱格式不正确");

return false;

}

TIPS：1、红色部分为正则表达式，为邮箱的格式。需要时使用即可。

2、注意使用test测试eValue内为测试邮箱的格式。

3、必须在form中加上函数。 onsubmit =”return

checkForm()”,

4、 function checkForm(){}为函数的的写法，呼应第三点onsubmit();

5.必须在>里面写。

//此为表单的开头部分所写，主要记住onsubmit()的主要写法

十三、 更换图片的一个小DEMO

TIPS：style部分，注意margin:auto。

表示div这个框移动到整个页面中间，

text-align：center表示将按钮放到图片中间。

var i=1;

function changeImg(){

i++;

document.getElementById("Img1").src="img/"+i+".jpg";

if(i == 3){

i = 0;

}

}

TIPS:注意书写的步骤，var需要定义在script之外。另外图片最好用数字表示。

十四、 进行几秒钟自动定时更换画面

需要用到的部分，获取元素 document.getElementById(“id名称”)；

事件(onload)

定时操作：setInterval(“changeImg()”,3000);

一、 setInterval()方法介绍以及用法

 setInterval()方法可以按照指定的周期(以毫秒计)来调用函数或计算表达式。

 setInterval()方法会不断地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回地ID值可用clearInterval

 语法setInterval(code,millisec[,”lang”])

code：要调用地函数或者要执行地代码串

millisec：周期性执行或调用code之间的时间间隔，以毫秒为单位。

 返回值：一个可以传递给window.clearInterval()从而取消对code的周期性执行的值。

二、

第一步：确定事件(onload)并为其绑定一个函数

第二步：书写绑定的这个函数

第三步：书写定时任务(setInterval)

第四步：书写定时任务里面的函数

第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)

十五、 设计页面的轮播图

在body部分确认事件，

书写init(),也就是不停地重置，使用setInterval函数。

function init(){

//书写轮播图

window.setInterval("changeImg()",3000);

}

书写changeImg()函数与上面的一个小DEMO类似

var i =0;

function changeImg(){

i++;

document.getElementById("img1").src="img/"+i+".jpg";

if(i== 3){

i=0;

}

}

十六、 使用JS完成页面定时弹出广告

第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)

第二步：确定事件(onload)并为其绑定一个函数

第三步：书写这个函数(设置一个显示图片的定时操作)

第四步： 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)

第五步：清除显示图片的定时操作()

第六步：书写隐藏图片的定时操作

第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)

第八步：清除隐藏图片的定时操作()

十七、 代码实现

function init(){

//书写轮播图

window.setInterval("changeImg()",3000);

//插入广告

time =window.setInterval("showAd()",3000);

}

//书写函数

var i =1;

function changeImg(){

i++;

document.getElementById("img1").src="img/ “+i+".jpg";

if(i== 3){

i=0;

}

}

function showAd(){

var adEle=document.getElementById("img2");

adEle.style.display="block";

clearInterval(time);

time = setInterval("hiddenAd()",3000);

}

function hiddenAd(){

document.getElementById("img2").style.display= "none";

clearInterval(time);

}

十八、 javascript引入方式

 内部引入方式

直接将 javascript 代码写到

 外部引入方式

需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script 标签的 src 属性引入该外部的 js 文件

例如：