JavaScript基础+正则表达式
JavaScript
- JavaScript是一门跨平台，面向对象的脚本语言，来控制网页行为的，它能够使网页可交互。
- 基础语法与java类似
-
JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。
-
ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015 年)。
JavaScript引入方式
内部方式
- 在html文件中，使用<script>标签来编写js代码。
- 建议编
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> <!-- 内部引入--> <script> alert("京阿"); </script>
写在<body>元素底部，可以提高显示速度，将javaScript写在body中的最后，先加载html界面。
- 将js代码编写为一个后缀名为js的文件中。
- 在html文件中通过<script scr="js路径"></script>引入文件
<script src="../js/alert.js"></script>
alert("真菜");
-
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
-
每行结尾的分号可有可无、建议写上
-
注释
-
单行注释：// 注释的内容
-
多行注释：/* 注释的内容 */
-
-
一对大括号标识代码块
-
使用window.alert()写入警告框
-
使用document.write()写入 HTML 输出
-
使用console.log()写入浏览器控制台
<script>
//定义全局变量
var num=10010;
window.alert(num);
var num="王五";
alert(num);
//定义局部变量
{
let num2=10086;
//let num2 = 50;
document.write(num2);
}
//定义常量
const num3=10000;
console.log(num3);
// num3=50;
</script>
变量介绍
- variable的缩写var是JavaScript声明变量的方式。
- var定义的变量是全局变量，可在var所在代码块的外部访问,但是var在方法中定义就是局部变量了
-
function a1() { var a=1; } /*{ var a=1; }*/ alert(a);
- 可以重复定义覆盖旧值
-
var a=20; var a=30;
- JavasScript是一门，弱类型语言可以存放不同类型的变量
- 组成字母，数字，下划线_,英文$符号，数字不能开头，建议使驼峰命名。
- ECMAScript 6新增了let关键字来定义变量，类似于var,但是let只在自己的代码块中有效，且与java一样不允许重复声明。
- ECMAScript 6新增const关键字，用来声明一个只读的常量。一旦声明不能改值。
-
如果let变量报错、需要修改idea中js的版本。
-
在File->Settings->Languages & FrameWorks->JavaScript，将版本改为 ECMAScript 6
-
原始类型 和 引用类型
- typeof（）获取数据类型
-
原始类型分类：
-
number：数字（整数、小数、NaN(Not a Number)）
-
string：字符、字符串，单双引皆可
-
boolean：布尔。true，false
-
null：对象为空， 对于null使用typeof()方法会返回object，null被认为是对象占位符
-
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
-
运算符
-
一元运算符：++，--
-
算术运算符：+，-，*，/，%
-
赋值运算符：=，+=，-=…
-
关系运算符：>，<，>=，<=，!=，==，===
-
逻辑运算符：&&，||，!
-
三元运算符：条件表达式 ? 表达式1 : 表达式2;
类型转换
其他类型转化为bumber
1 string:按照字符转的子面值，转为数字，如果字面值不是数字，转化为NAN
var str=+"adc";+号代表正数 parseInt()
2 boolean true 转换为1 false 转换为0
其他类型转换为boolean（用于简化健壮性判断）
1 number 0和NAN转换为0，其他数字为true
2 string 空字符串为false
3 null 为false
4 undefined为false0
-
== 和 ===
-
== 会进行类型转换、转换后再比较数据值。
-
=== 不会进行类型转换、类型不一致直接返回false。
-
-
其他类型转为数字
-
string:将字符串字面值转为数字。如果字面值不是数字，则转为NaN。一般使用parseInt方法进行转换 。
-
boolean: true 转为1，false 转为0。
-
-
其他类型转为 boolean
-
number：0和NaN转为false，其他的数字转为true。
-
string：空字符串转为false，其他字符串转为true。
-
null: 转为false。
-
undefined：转为false。
-
流程控制语句
-
-
switch
-
for
-
while
-
do…while
1.函数介绍
-
js中的函数类似java中的方法。
-
将共性功能抽取到方法中、提高代码的复用性。
-
将不同的功能在不同的方法中实现、提高代码的阅读性。
- 使用function关键字定义函数
2.函数格式
-
格式一：
-
形式参数不需要类型。因为JavaScript是弱类型语言。
-
返回值也不需要定义类型，可以在函数内部直接使用return返回即可。
- 因为var的性质使得javaScript有以上特点
// 书写格式 function 函数名(参数1,参数2,...){ 方法体; return 结果; } // 调用格式 var 变量名 = 函数名(实际参数); // 有返回值方法 函数名(实际参数); // 无返回值方法
.//定义 function add(a,b){ return a+b; } //调用 var result=add(1,2);
- 格式二
// 书写格式 var 函数名 = function(参数1,参数2,...){ 方法体; return 结果; } // 调用格式 var 变量名 = 函数名(实际参数); // 有返回值方法 函数名(实际参数); // 无返回值方法 // 格式二 var add = function (a,b){ return a + b; } var result = add(1,2); alert(result);
函数调用可以传递任意个参数，但没有什么意义
var result1=add(1,2,3)//3实际上没什么用处，但是可以传递
var result2=add(1) 第二个参数被NAN代替，结果NAN
JavaScript对象
Array
-
格式一
var 变量名 = new Array(元素列表);
-
格式二
var 变量名 = [元素列表];
<script>
var arry=new Array();
arry.push(1,2,30);
alert(arry[1]);
var arry1=[1,2,"王宝强",4,5,"杨幂"];
arr1[10]="少年Π"
alert(arry1)
</script>
JavaScript 数组参考手册 (w3school.com.cn)
String对象
-
格式一
var 变量名 = new String(s);
-
格式二
var 变量名 = s; // 单引、双引都可以
JavaScript String 参考手册 (w3school.com.cn)
trim() 去除字符串两端，空格问题
自定义对象
{}代表对象 : 连接属性值或者方法体 ,号连接属性和方法
var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...
函数名称:function (形参列表){}
...
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
</head>
<body>
</body>
</html>
<script>
var name="王宝强"；
var person = {
name : "百丽",
age : 26,
eat:function () {
alert(this.name+"上班干活...");//this.name 百丽干活 name 王宝强干活
}
};
alert(person.name);
alert(person.age);
person.age = 38;
alert(person.age);
person.eat();
</script>
Window对象
-
Browser Object Model 浏览器对象模型
-
JavaScript 将浏览器的各个组成部分封装为对象
-
Window：浏览器窗口对象
-
-
Navigator：浏览器对象 (了解)
-
Screen：屏幕对象 (了解)
-
History：历史记录对象
-
Location：地址栏对象
Window窗口对象
-
获取：直接使用 window，其中window. 可以省略
-
属性：获取其他 BOM对象
- 方法
<script> window.setInterval(function () { var b = window.confirm(); if (b){window.alert("杨幂");} else {window.alert("王宝强");} },300) </script>
-
获取：window.history.函数() (window.可以省略)
-
函数
-
back() 上一个url (类似浏览器中的<-后退按钮)
-
forward() 下一个url (类似浏览器中的->前进按钮)
-
-
获取：window.location.属性 (window.可以省略)
-
属性
-
href 设置跳转的url
-
Document Object Model 文档对象模型
- Dom w3c的标准，定义了xml和html（将html标签封装为元素对象 如<img> Image <input type="button"> Button）的访问标准
-
将标记语言的各个组成部分封装为对象
-
Document 整个文档对象
- Element 元素对象
- Text 文本对象
- Attribute 属性对象
- Comment 注释对象
-
-
JavaScript 通过 DOM， 就能够对 HTML进行操作了
-
改变 HTML 元素的内容
-
改变 HTML 元素的样式（CSS）
-
对 HTML DOM 事件作出反应
-
添加和删除 HTML 元素
-
-
getElementById(id值)：根据id属性值获取，返回一个Element对象
-
getElementsByTagName(标签名)：根据标签名称获取，返回Element对象数组
-
getElementsByName(name值)：根据name属性值获取，返回Element对象数组
-
getElementsByClassName(class值)：根据class属性值获取，返回Element对象数组
-
获取的Element对象是 img 图片标签
-
src：改变图片资源
-
-
获取的Element对象是 div 标签
-
style：控制样式
-
innerHTML：改变标签内容
-
-
获取的Element对象是 input 标签的多选框
-
checked：默认被选中
-
<img id="women" src="../imgs/1.png"/>
<div class="cls">传智播客</div>
<div class="cls">河马和荷花</div>
<input type="checkbox" name="hobby"/>飞
<input type="checkbox" name="hobby"/>跑
<input type="checkbox" name="hobby"/>跳
<input type="checkbox" name="hobby"/>顶
<a href="#" id="a">点我我就变化</a>
</body>
</html>
<script>
document.getElementById("a").href="../imgs/reg_bg_min.jpg";
document.getElementById("women").src="../imgs/10.png";
var elementsByClassName = document.getElementsByClassName("cls");
for (let i = 0; i <elementsByClassName.length ; i++) {
elementsByClassName[i].style.fontSize="30px";
//设置元素内容
elementsByClassName[i].innerHTML="飞天";
}
var hobby = document.getElementsByName("hobby");
for (let i = 0; i <hobby.length ; i++) {
window.alert(hobby[i]);
hobby[i].checked=true;
}
</script>
事件监听
-
事件：HTML 事件是发生在 HTML 元素上的“事情”。例如：(按钮被点击、鼠标移动移出、键盘按键按下等)。
-
事件监听：JavaScript 可以在事件被侦测到时执行对应的代码。
事件绑定
方式一：通过 HTML标签中的事件属性进行绑定
<input type="button" onclick='on()’>
function on(){
alert("我被点了");
}
方式二：通过 DOM 元素属性绑定
<input type="button" id="btn">
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
常见事件
HTML DOM 事件 (w3school.com.cn)
<form action="#" method="post" autocomplete="off" id="register"> 用户名 ：<input type="text" name="username" id="u"/> <input type="submit" value="提交"/> </form> <script> document.getElementById("register").onsubmit=function () { let username = document.getElementById("u").value; if (username.length==6){ alert("用户名符合规则"); return true; } else{ alert("用户名不符合规则"); return false; } } </script>
表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎注册</title> <link href="../css/register.css" rel="stylesheet"> </head> <body> <div class="form-div"> <div class="reg-content"> <h1>欢迎注册</h1> <span>已有帐号？</span> <a href="#">登录</a> </div> <form id="reg-form" action="#" method="get" autocomplete="off"> <table> <tr> <td>用户名</td> <td class="inputs"> <input name="username" type="text" id="username"> <br> <span id="username_err" class="err_msg" style="display: none">用户名格式有误</span> </td> </tr> <tr> <td>密码</td> <td class="inputs"> <input name="password" type="password" id="password"> <br> <span id="password_err" class="err_msg" style="display: none">密码格式有误</span> </td> </tr> <tr> <td>手机号</td> <td class="inputs"><input name="tel" type="text" id="tel"> <br> <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span> </td> </tr> </table> <div class="buttons"> <input value="注 册" type="submit" id="reg_btn"> </div> <br class="clear"> </form> </div> </body> </html> <script> //用户名验证 let username = document.getElementById("username"); username.onblur=checkUsername; function checkUsername() { let value = username.value.trim(); let flag=(value.length!=6); if (flag){ document.getElementById("username_err").style.display=''; }else { document.getElementById("username_err").style.display='none'; } return flag; } //密码名验证 let password = document.getElementById("password"); password.onblur=checkPassword; function checkPassword() { let value = password.value.trim(); let flag=value.length!=6; if (flag){ document.getElementById("password_err").style.display=''; }else { document.getElementById("password_err").style.display='none'; } return flag; } //手机号名验证 let tel = document.getElementById("tel"); tel.onblur=checkTel; function checkTel() { let value = tel.value.trim(); let flag=value.length!=11; if (value.length!=11){ document.getElementById("tel_err").style.display=''; }else { document.getElementById("tel_err").style.display='none'; } return flag; } //表单验证 var regfrom = document.getElementById("reg-form"); regfrom.onsubmit=function () { var flag=checkUsername()&&checkPassword()&&checkTel(); return flag; } </script>
1
View Code
正则表达式
定义了字符串组成规则
-
定义方式
-
直接赋值
var reg = /^\w{6,12}$/; /中间写正则表达式/-
创建对象
var reg = new RegExp("^\w{6,12}$"); -
-
成员方法
test(str)：用于判断是否满足指定的规则。满足为true、不满足为false。
例如 reg.test("要检测的数据") 符合返回true 不符合返回false
语法
1
1 <body> 2 3 <div class="form-div"> 4 <div class="reg-content"> 5 <h1>欢迎注册</h1> 6 <span>已有帐号？</span> <a href="#">登录</a> 7 </div> 8 <form id="reg-form" action="#" method="get" autocomplete="off"> 9 <table> 10 <tr> 11 <td>用户名</td> 12 <td class="inputs"> 13 <input name="username" type="text" id="username"> 14 <br> 15 <span id="username_err" class="err_msg" style="display: none">用户名格式有误</span> 16 </td> 17 </tr> 18 19 <tr> 20 <td>密码</td> 21 <td class="inputs"> 22 <input name="password" type="password" id="password"> 23 <br> 24 <span id="password_err" class="err_msg" style="display: none">密码格式有误</span> 25 </td> 26 </tr> 27 28 <tr> 29 <td>手机号</td> 30 <td class="inputs"><input name="tel" type="text" id="tel"> 31 <br> 32 <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span> 33 </td> 34 </tr> 35 </table> 36 37 <div class="buttons"> 38 <input value="注 册" type="submit" id="reg_btn"> 39 </div> 40 <br class="clear"> 41 </form> 42 </div> 43 </body> 44 </html> 45 46 <script> 47 //用户名验证 48 let username = document.getElementById("username"); 49 username.onblur=checkUsername; 50 function checkUsername() { 51 let value = username.value.trim(); 52 var reg=/^\w{6,12}$/; 53 let flag=reg.test(value); 54 if (!flag){ 55 document.getElementById("username_err").style.display=''; 56 }else { 57 document.getElementById("username_err").style.display='none'; 58 } 59 return flag; 60 } 61 //密码名验证 62 let password = document.getElementById("password"); 63 password.onblur=checkPassword; 64 function checkPassword() { 65 let value = password.value.trim(); 66 var reg=/^\w{6,12}$/; 67 let flag=reg.test(value); 68 if (!flag){ 69 document.getElementById("password_err").style.display=''; 70 }else { 71 document.getElementById("password_err").style.display='none'; 72 } 73 return flag; 74 } 75 //手机号名验证 76 let tel = document.getElementById("tel"); 77 78 tel.onblur=checkTel; 79 function checkTel() { 80 let value = tel.value.trim(); 81 var reg=/^[1]\d{10}$/; 82 var flag = reg.test(value); 83 if (!flag){ 84 document.getElementById("tel_err").style.display=''; 85 }else { 86 document.getElementById("tel_err").style.display='none'; 87 } 88 return flag; 89 } 90 //表单验证 91 var regfrom = document.getElementById("reg-form"); 92 regfrom.onsubmit=function () { 93 var flag=checkUsername()&&checkPassword()&&checkTel(); 94 return flag; 95 } 96 97 </script>
