java s_javasscript基础

一、使用JS完成注册表单数据校验

1.需求分析

用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样会导致服务器的压力过大，此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验)，前端校验防君子不防小人。

2.技术分析

2.1javasscript的介绍

Javascript与java没有关系(雷锋和雷峰塔)，它不是编程语言(脚本语言)

2.2javascript的作用？

HTML：它是整个网站的骨架。

CSS：它是对整个网站骨架的内容进行美化(修饰)

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

2.3 javascript的组成部分

ECMAScript:它是javascript的核心(语法、变量、数据类型、语句、函数……)

DOM:document object model 整个文档对象

BOM:浏览器对象

2.4javascript语法

区分大小写

变量是弱类型的(String str=”aaa” ,var str=”123”;)

每行结尾的分号可有可无(建议大家写上)

注释与java、php等语言相同。

2.5javascript的变量

变量可以不用声明，变量是弱类型。统一使用var来定义！定义变量的时候不要使用关键字和保留字。

2.6javascript数据类型

Javascript数据类型分为原始数据类型和引用数据类型

原始数据类型：

string、number、boolean、null、undefined

引用数据类型：

2.7javascript运算符

其它运算符与java大体一致，需要注意其等性运算符。

== 它在做比较的时候会进行自动转换。

=== 它在做比较的时候不会进行自动转换。

2.8 javascript语句

所有语句与java大体一致。

2.9获取元素内容

获取元素

document.getElementById(“id名称”);

获取元素里面的值

document.getElementById(“id名称”).value;

2.10 javascript事件

表单提交事件：onsubmit

2.11 javascripte的输出

警告框：alert();

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

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

3.步骤分析

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

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

第三步：对输入的数据进行判断(非空)

第四步：如果输入的内容为空，给出错误提示信息(alert),不让表单提交

第五步：如果输入的内容合法，让表单提交。

4.代码实现

Html部分代码：

为表单绑定一个事件

对需要校验的输入项目定义id

Javascript部分代码

function checkForm(){

/*校验用户名*/

//alert("aa");

//获取用户输入的数据

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

//alert(uValue);

if(uValue==""){

//给出错误提示信息

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

return flase;

}

/*校验邮箱*/

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

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

//给出错误提示信息

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

return false;

}

}

二、使用JS完成首页轮播图效果案例

1.需求分析

我们希望在首页完成对轮播图的效果实现：

2.技术分析

获取元素 document.getElementById(“id名称”)

事件(onload)

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

3.步骤分析

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

第二步：书写这个函数(设置一个定时操作);

第三步：书写定时操作里面的函数

第四步：获取图片的位置

第五步：为该图片设置src属性值。

4.代码实现

Javascript部分代码

function init(){

setInterval("changeImg()",3000);

}

var i=1;

function changeImg(){

i++;

var imgEl = document.getElementById("img1");

imgEl.src="../img/"+i+".jpg";

if(i==3){

i=0;

}

}

Html部分代码

确定事件：onload  加在body里面！

给指定的图片位置定义一个id