ff
1.JavaScript引入方式
JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：
内部脚本：将 JS代码定义在HTML页面中
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
2.JavaScript基础语法
①书写语法
②输出语句
③变量
④数据类型
⑤运算符
⑥流程控制语句
⑦函数
3.JavaScript常用对象
①Array
②String
③自定义对象
4.BOM
①Windows
Confirm 点击“确认”按钮 返回true; 点击“取消” 返回false
代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript演示</title>
</head>
<body>
<inputtype="button"onclick="on()"value="开灯">
<imgid="myImage"border="0"src="../imgs/off.gif"style="text-align:center;">
<inputtype="button"onclick="off()"value="关灯">
<script>
functionon(){
document.getElementById('myImage').src='../imgs/on.gif';
}
functionoff(){
document.getElementById('myImage').src='../imgs/off.gif'
}
varx=0;
//根据一个变化的数字，产生固定个数的值；2x%23x%3
//定时器
setInterval(function(){
if(x%2==0){
on();
}else{
off();
}
x++;
},1000);
</script>
</body>
</html>
②History
③Location
Eg:
5.DOM
①获取Element对象
②常见HTML Element对象的使用
代码：
运行结果：
6.事件监听
①事件绑定
②常见事件
代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>欢迎注册</title>
<linkhref="../css/register.css"rel="stylesheet">
</head>
<body>
<divclass="form-div">
<divclass="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号？</span><ahref="#">登录</a>
</div>
<formid="reg-form"action="#"method="get">
<table>
<tr>
<td>用户名</td>
<tdclass="inputs">
<inputname="username"type="text"id="username">
<br>
<spanid="username_err"class="err_msg"style="display:none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<tdclass="inputs">
<inputname="password"type="password"id="password">
<br>
<spanid="password_err"class="err_msg"style="display:none">密码格式有误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<tdclass="inputs"><inputname="tel"type="text"id="tel">
<br>
<spanid="tel_err"class="err_msg"style="display:none">手机号格式有误</span>
</td>
</tr>
</table>
<divclass="buttons">
<inputvalue="注册"type="submit"id="reg_btn">
</div>
<brclass="clear">
</form>
</div>
<script>
//1.验证用户名是否符合规则
//1.1获取用户名的输入框
varusernameInput=document.getElementById("username");
//1.2绑定onblur事件失去焦点
usernameInput.onblur=checkUsername;
functioncheckUsername(){
//1.3获取用户输入的用户名
varusername=usernameInput.value.trim();
//1.4判断用户名是否符合规则：长度6~12,单词字符组成
varreg=/^\w{6,12}$/;
varflag=reg.test(username);
//varflag=username.length>=6&&username.length<=12;
if(flag){
//符合规则
document.getElementById("username_err").style.display='none';
}else{
//不合符规则
document.getElementById("username_err").style.display='';
}
returnflag;
}
//1.验证密码是否符合规则
//1.1获取密码的输入框
varpasswordInput=document.getElementById("password");
//1.2绑定onblur事件失去焦点
passwordInput.onblur=checkPassword;
functioncheckPassword(){
//1.3获取用户输入的密码
varpassword=passwordInput.value.trim();
//1.4判断密码是否符合规则：长度6~12
varreg=/^\w{6,12}$/;
varflag=reg.test(password);
//varflag=password.length>=6&&password.length<=12;
if(flag){
//符合规则
document.getElementById("password_err").style.display='none';
}else{
//不合符规则
document.getElementById("password_err").style.display='';
}
returnflag;
}
//1.验证手机号是否符合规则
//1.1获取手机号的输入框
vartelInput=document.getElementById("tel");
//1.2绑定onblur事件失去焦点
telInput.onblur=checkTel;
functioncheckTel(){
//1.3获取用户输入的手机号
vartel=telInput.value.trim();
//1.4判断手机号是否符合规则：长度11，数字组成，第一位是1
//varflag=tel.length==11;
varreg=/^[1]\d{10}$/;
varflag=reg.test(tel);
if(flag){
//符合规则
document.getElementById("tel_err").style.display='none';
}else{
//不合符规则
document.getElementById("tel_err").style.display='';
}
returnflag;
}
//1.获取表单对象
varregForm=document.getElementById("reg-form");
//2.绑定onsubmit事件
regForm.onsubmit=function(){
//挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
varflag=checkUsername()&&checkPassword()&&checkTel();
returnflag;
}
</script>
</body>
</html>
7.正则表达式
Eg:
所学内容均来自黑马程序员
所学内容均来自黑马程序员
所学内容均来自黑马程序员
扫一扫
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
