javascript (硅谷网景公司) 简称js
前端开发的语言
js运行在浏览器端-- java是运行在服务器的虚拟机上
弱语言--java是强语言
解释执行 编译执行
变量
java语言变量
int a = 1; String s = "hello" ；Student stu = new Student();
int num = 10;
num = "hello"; //编译错误
js声明变量
var a = 1; var b = 3.14; var s = "hello world";var stu = new Object();
var num = 10;
num = "hello";
num = new Object();
变量的类型
数值类型(Number):整数，浮点数,NaN(非数值)
字符串(String)
布尔值(boolean):
true: 1, 12 ,3.14 , "hello", " " ,对象
false: 0, 0.0 ,"" , null ,undefined
null(undefined)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
var a = 1;
console.log(a);
a = "hello world";
console.log(a);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
//null "" 0 0.0 等价于false
//对象 "hello" 非0的数值等价于true
if(null){
console.log("null is true");
}else{
console.log("null is false");
}
var a;//没有初始化的变量，undefined
console.log(a);
//undefined就是null
console.log(a==null);
console.log("------------------");
var b = 123
var c = "123"
console.log(b==c);
console.log(b===c);
</script>
</body>
</html>关系运算
> >= < <= != == ===
在js中
==:只比较内容，不检查类型
===:比较内容同时检查类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
var age = prompt("请输入一个年龄");
console.log(age);
//age 是什么类型?
console.log(typeof age);//string
//string转换成number
age = parseInt(age);
//console.log(age+1);
//如何判断非数值的类型
if(window.isNaN(age)){
//弹出警告框
alert("请输入数值");
}else{
//输入了正确的数值
if(age>=18){
console.log("成年了");
}else{
console.log("未成年");
}
}
</script>
</body>
</html> if(条件语句)
输入一个年龄,判断是否成年
通过输入框（prompt）输入一个成绩(浮点数)
parseInt('123');//解析整数
parseFloat('3.14');//解析浮点数
90~100:优秀
80~89:良好
60~79:及格
0~59:不及格
其他:输入错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
var score = parseFloat(prompt("请输入一个成绩"));
if(isNaN(score)){
//输入的不是数值
alert("请输入一个数值");
}else{
//输入OK
if(score<0 || score>100){
console.log("错误的输入");
}else if(score>=90){
console.log("优秀");
}else if(score>=80){
console.log("良好");
}else if(score>=60){
console.log("及格");
}else{
console.log("不及格");
}
}
</script>
</body>
</html> switch case结构
java switch(参数--int short byte char)
java case 整数值
js switch(参数--任意类型)
js case 任意值,表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
/**
* js的switch case 结构
*/
var score = parseFloat(prompt("请输入一个成绩"));
if(isNaN(score)){
//输入的不是数值
alert("请输入一个数值");
}else{
//输入OK
switch(true){
case score<0 || score>100:
console.log("错误的输入"); break;
case score>=90:
console.log("优秀"); break;
case score>=80:
console.log("良好"); break;
case score>=60:
console.log("及格"); break;
default:console.log("不及格");
}
}
</script>
</body>
</html> 循环
1+2+3+...+100;
while do while for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
//1+2+3...+100 输出到页面 vscript
/*
var sum = 0;//总和
var idx = 1;//循环变量
while(idx<=100){
sum += idx;
idx++;
}
//输出到页面
document.write("<h1 style='color:#faa'>"+sum+"</h1>");*/
//do while
/*
var sum = 0;
var idx = 1;
do{
sum+= idx;
idx++;
}while(idx<=100);
document.write("<h1 style='color:#afa'>"+sum+"</h1>");*/
//for循环
var sum = 0;
for ( i = 1; i <=100; i++) {
sum += i;
}
document.write("<h1 style='color:#aaf'>"+sum+"</h1>");
</script>
</body>
</html>function / document-write
函数
java
public static void main(String[] args){
}
js
function 函数名(参数列表){//直接写参数名,无需类型声明
代码
return 返回值
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<!-- <input type="button" name="btn" value="点击"
onclick="sayHello()" /> -->
<button onclick="sayHello()">点我</button>
<button ondblclick="sayHello();">点点我</button>
<!--将文本框的输入值弹出
onblur:失去焦点事件
this代表input输入框
this.value 就是用户输入的文本
-->
<input type="text" name="txt"
onblur="showMessage(this.value)"
/>
<script type="text/javascript">
function sayHello(){
alert("hello");
}
//sayHello();
function showMessage(msg){
alert(msg);
}
//showMessage('hello world');
//有返回值得函数
function add(a,b){
return a+ b;
}
var c = add(1,2);
document.write("<h3>"+c+"</h3>");
//匿名函数
var num =
function(a,b){
return a*b;
}(10,6);
document.write("<h3>"+num+"</h3>");
//还可以这样声明
var fn =
function(num1,num2){
return num1 - num2;
}
var n = fn(10,2);
document.write("<h3>"+n+"</h3>");
</script>
</body>
</html>
数组
java :int[] arr = new int[3]; arr2 = {10,20,30};
js: var arr = new Array(3); arr2 = {10,12.3,true,"hello",null,new Object()};
数值封装操作的函数
js创建后长度可以改变，可以存放任意数据类型
length属性表示数组的长度,数组用下标访问
下标范围0~数组的长度-1
数组的方法
数组的排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
var arr =[10,"hello",true];
for (var i = 0; i < arr.length; i++) {
document.write(arr[i]+"<br/>");
}
arr[3] = 3.14;
arr.push(new Object());
document.write("-------------<br/>")
for (var i = 0; i < arr.length; i++) {
document.write(arr[i]+"<br/>");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
/**
* 数组封装的方法
*/
var arr = [1,2,3];
var arr2 = [4,5,6];
//将两个或多个数组拼接成一个数组
arr = arr.concat(arr2);
document.write(arr+"<br/>");
arr = arr.concat("hello","eric","tom");
document.write(arr+"<br/>");
var arr3 = ["tom","marry","jack"];
//tom:marry:jack
//通过指定分隔符连接数组元素
var str = arr3.join(":");
document.write(str+"<br/>");
var arr4 = [1,2,3,4,5,6,7];
//数组反序
arr4.reverse();
document.write(arr4+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
var arr = [12,66,7,31,58,99,42];
//排序前
document.write(arr+"<br/>");
arr.sort(function(a,b){
/**
* a,b是数组中相邻的两个元素
* 参数函数会有一个返回值(数值)
* 返回值>0 ,a,b交换位置
* 返回值<=0,a,b不交换位置
*/
//return a - b;//升序
return b - a;//降序
});
//排序后
document.write(arr+"<br/>");
</script>
</body>
</html>
dom编程 / 获得页面元素 / 计算器
dom编程(案例驱动)
什么是dom?
文档对象模型
dom编程的目的
通过js操作页面元素(js操作html和css)
dom对象.innerText = "纯文本"
dom对象.innerHTML = "html文本"
dom对象.style.样式属性名 = "样式值"
dom对象.className = "类名";//同时修改多个样式
获得一个页面元素
var e = document.getElementById("页面元素的id值");
获得多个页面元素
document.getElementsByName("hobby");
document.getElementsByClassName("chk");
document.querySelectorAll("input");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
#one{
width: 200px;
height: 100px;
border:2px solid red;
}
</style>
</head>
<body>
<div id="one">
</div>
<script type="text/javascript">
//获得div的dom对象
var div
= document.getElementById("one");
//往盒子中添加纯文本
//div.innerText = "you can you up";
//添加html文本
/*
div.innerHTML
= "<h1 style='color:pink'>you can you up</h1>";
*/
//修改div的样式
div.style.width = "300px";
div.style.height = "200px";
div.style.backgroundColor = "#ccc";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.one{
width: 100px;
height: 100px;
background:red;
}
.two{
width: 200px;
height: 200px;
background:green;
}
</style>
</head>
<body>
<button onclick="change()">变色</button>
<div class="one" id="d1"></div>
<script type="text/javascript">
function change(){
//获得id是d1的div
var d1 = document.getElementById("d1");
d1.className = "two";
}
</script>
</body>
</html>
练习
页面上放一个div(width:100;height:100;背景色:red)
鼠标移动到div上面,div改变样式(width:200;height:200;背景色:green)
当鼠标移出div的时候，div恢复原样
提示: οnmοuseοver="" //鼠标移入
οnmοuseοut="" //鼠标移出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.one{
width: 100px;
height: 100px;
background:red;
}
.two{
width: 200px;
height: 200px;
background:green;
}
</style>
</head>
<body>
<div class="one" id="one"
onmouseover="change()"
onmouseout="change()"
></div>
<script type="text/javascript">
function change(){
//获得div的dom对象
var div = document.getElementById("one");
if(div.className=="one"){
div.className = "two"
}else{
div.className = "one";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="selectAll()">全选</button>
<button onclick="cancelAll()">全取消</button>
<button onclick="revAll()">反选</button>
兴趣爱好:
<label>
<input type="checkbox" name="hobby" value="ball"/> 篮球
</label>
<label>
<input type="checkbox" name="hobby" value="swimming"/> 游泳
</label>
<label>
<input type="checkbox" name="hobby" value="reading"/> 阅读
</label>
<label>
<input type="checkbox" name="hobby" value="coding"/> 编程
</label>
<script type="text/javascript">
function selectAll(){
//获得所有的复选框
var es =
document.getElementsByTagName("input");
//es 是一个LikeArray(伪数组,类数组)
//和数组一样有length属性
//可以通过下标访问
//没有数组的方法(push sort concat join)
for (var i = 0; i < es.length; i++) {
/*
单选框 复选框
checked
true 被选中
false 没有选中
*/
es[i].checked = true;
}
}
function cancelAll(){
//获得所有的复选框
var es =
document.getElementsByTagName("input");
for (var i = 0; i < es.length; i++) {
es[i].checked = false;
}
}
function revAll(){
//获得所有的复选框
var es =
document.getElementsByTagName("input");
for (var i = 0; i < es.length; i++) {
es[i].checked = !es[i].checked;
}
}
</script>
</body>
</html>
简单计算器
+ - * /
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
数1：<input id="num1"/> <br/>
数2：<input id="num2"/> <br/>
结果：<input id="res"/><br/>
<button onclick="caculate('+')">+</button>
<button onclick="caculate('-')">-</button>
<button onclick="caculate('*')">*</button>
<button onclick="caculate('/')">/</button>
<script type="text/javascript">
function caculate(flag){
//获得数1和数2的值
var num1
= document.getElementById('num1').value;
//num1是string num1.trim()
//去掉前后的空格
num1 = parseFloat(num1.trim())
var num2
= document.getElementById('num2').value;
//num1是string num1.trim()
//去掉前后的空格
num2 = parseFloat(num2.trim());
//处理异常输入
if(isNaN(num1) || isNaN(num2)){
alert("请输入数值");
document.getElementById('num1').value='';
document.getElementById('num2').value='';
return;//后面的代码不执行
}
var sum = 0;
switch(flag){
case '+':sum = num1 + num2;break;
case '-':sum = num1 - num2;break;
case '*':sum = num1 * num2;break;
case '/':sum = num1 / num2;break;
}
document.getElementById('res').value = sum;
}
</script>
</body>
</html>
常规正则表达式
一、校验数字的表达式
1 数字：^[0-9]*$
2 n位的数字：^\d{n}$
3 至少n位的数字：^\d{n,}$
4 m-n位的数字：^\d{m,n}$
5 零和非零开头的数字：^(0|[1-9][0-9]*)$
6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
8 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
11 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
12 非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
13 非负整数：^\d+$ 或 ^[1-9]\d*|0$
14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
15 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
16 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
17 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
18 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
19 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
二、校验字符的表达式
1 汉字：^[\u4e00-\u9fa5]{0,}$
2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3 长度为3-20的所有字符：^.{3,20}$
4 由26个英文字母组成的字符串：^[A-Za-z]+$
5 由26个大写英文字母组成的字符串：^[A-Z]+$
6 由26个小写英文字母组成的字符串：^[a-z]+$
7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
8 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
12 禁止输入含有~的字符：[^~\x22]+
三、特殊需求表达式
1 Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
3 InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
4 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
5 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
6 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
7 身份证号：
15或18位身份证：^\d{15}|\d{18}$
15位身份证：^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$
18位身份证：^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$
8 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
9 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
10 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
11 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
12 日期格式：^\d{4}-\d{1,2}-\d{1,2}
13 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
14 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
15 钱的输入格式：
16 1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$
17 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$
18 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
19 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
20 5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$
21 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
22 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
23 8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
24 备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
25 xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
26 中文字符的正则表达式：[\u4e00-\u9fa5]
27 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
28 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
29 HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
30 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
31 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
32 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
33 IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)
扫一扫
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
