html_day3 js
2017-08-25 本文已影响0人
路人爱早茶
1.JavaScript 是 web 上一种功能强大的编程语言 ，用于开发交互式 的 web 页面。它不需要进行 编 译 ，而是直接嵌入在 HTML 页面中 ，由浏览器执行 。
- JavaScript 被设计用来向 HTML 页面添加交互行为。
- JavaScript 是一种脚本语言 （脚本语言是一种轻量级的编程语言〉。
- JavaScript 由数行可执行计算机代码组成 。
- JavaScript 通常被直接嵌入 HTML 页面。
- JavaScript 是一种解释性语言 （就是说，代码执行不进行预编译） 。
- JavaScript 的组成：
核心 （ ECMAScript)语法，语句． - 文档对象模型 （ DOM ).操作文档中的元素和内容
- 浏览器浏象模型 （ BOM )
2.变量的声明
- var 变量名； //JavaScript变量是弱类型， 及同一个变量可以存放不同类型的数据，全局是直接变量名，局部是var+变量名
- 比较运算符==是尝试强转后比如字符串的1和int 1，而===是不强转直接比较
3.js三种书写格式：行外，行内，页面外
1.<script type="text/javascript" src="1..js" ></script>此为页面外
新建的js文件来放<script type="text/javascript"></script>之间的代码
2.页面内是在head之间写
<script type="text/javascript">
window两个对象
confirm("");
prompt("");
</script>
3.行内
<body>
<a href="切换图片.html">下一章</a>
<input type="button" value="跳到window" onclick="javascript:location.href='window对象.html'" />
</body>
直接在跳转事件onclick书写
4.margin: auto;整体居中
text-align: center;元素内部居中
5.切换图片
<html>
<head>
<meta charset="UTF-8">
<title>切换图片</title>
<style>
div{
border: 1px solid red;
width: 300px;
height: 300px;
margin: auto;
text-align: center;
}
</style>
<!--<script>
function init()
{
setInterval("changeimg()",3000);
timeAD=setInterval("showAD()",3000);
}
num=1;
function changeimg()
{
document.getElementById("img1").src="../img/"+num+".jpg";
num++;
if(num==4)
{
num=1;
}
}
function showAD()
{
document.getElementById("img2").style.display="block";
clearInterval(timeAD);
hiddeAD=setInterval("hiddenAD()",3000);
}
function hiddenAD()
{
document.getElementById("img2").style.display="none";
clearInterval(hiddeAD);
}
</script>-->
<script type="text/javascript" src="1..js" ></script>
<script>
function forward()
{
history对象
// history.go(-1);返回上一页两种方式
history.back();
}
</script>
</head>
onload是页面创建运行方法只可写一回
<body onload="init()">
<div>
<input type="button" value="next" onclick="changeimg()" />
<input type="button" value="foward" onclick="forward()"/>
</div>
</body>
</html>
6.注册实例
此为一个一个弹出框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<!--<script>-->
<!--function checkfrom(){-->
<!--// var userVal=document.getElementById("username").value;
// if(userVal==""){
//
// alert("用户名不能为空");
// return false;
//
// }
// var pVal=document.getElementById("password").value;
// if(pVal==""){
//
// alert("密码不能为空");
// return false;
//
// }
// var repVal=document.getElementById("repassword").value;
// if(repVal!=pVal){
//
// alert("确认密码不一致");
// return false;
// -->
<!--// }-->
<!--var eVal=document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eVal)){
此为email检测方法
alert("email格式不正确");
return false;
}
}-->
<!--</script>-->
<script type="text/javascript">
function showtips()
{
document.getElementById("userspan").innerHTML="<font color='gray'>用户名必填</font>";
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--3.注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm" onsubmit="return checkfrom()">
onsubmit是表单提交方法，有返回值false则不提交
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="user" size="34px" id="username" onfocus="showtips()" /><span id="userspan"></span>
onfocus是聚焦，onblur是离焦方法
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password"/>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px" id="email"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px"/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<input type="text" name="birthday" size="34px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
---------------------------------------------------
此为后缀提示注册
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm" onsubmit="return checkfrom()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="user" size="34px" id="username" onfocus="showtips('username','姓名必填')" onblur="checkuser('username','姓名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password"onfocus="showtips('password','密码必填')" onblur="checkuser('password','密码不能为空')"/><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
7.定时器
- JavaScript 定时器 ：setTimeout
- setTimeout （） 在指定的毫秒数后调用函数或执行代码片段 。
setTimeout ( code , 毫秒数) - setlnterval （） 以指定周期执行函数或代码片段 。
- clearlnterval（） 取消由 setlnterval （） 设置的 timeout 。
- clearTimeout （） 取消由 setTimeout （） 方法设置的 timeout 。
8.事件
事件名 描述
onload 某个页面或图像被完成加载
onsubmit 提交按钮被点击
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onblur 元素失去焦点
onfocus 元素获得焦点
onchange 用户改变域的内容
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onmousedown 某个鼠标按键被按下
onmouseup 某个鼠标按键被松开
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
onmousemove 鼠标被移动
