笔记-JavaWeb学习之旅7
JavaScript基础
概念：一门客户端脚本语言，运行在客户端浏览器中，每个浏览器都有JavaScript的解析引擎，是一个脚本语言，不须要编译，直接就能够被浏览器解析执行。javascript
JavaScript = ECMAScript+JavaScript本身特有的东西(BOM+DOM)html
ECMAScript:客户端脚本语言的标准java
基本语法：正则表达式
与html结合的方式有两种内部JS和外部JS数组
注释：单行注释//，多行注释/**/浏览器
数据类型：1.原始数据类型（number,string,boolean,null,undefined）2.引用数据类型：对象dom
九九乘法表练习
<!DOCTYPE html>
<!--suppress JSAnnotator -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td{
border:1px solid;
}
</style>
<script>
document.write("<table align='center'>");
for(var i= 1;i<=9;i++){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>");
var stri = i+"";
var strj = j+"";
var str = strj+"*"+stri+"=";
document.write(str+(i*j)+"     ");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//建立Function对象的方式
//第一种方式建立对象
function fun1(a,b){
document.write(a+b);
}
// 调用第一种方法
//fun1(2,5);//7
//第二种方式建立对象
var fun2=function(a,b){
document.write(a+b);
}
//调用第二种方法
fun2(2,8);//10
//Function的length属性,表明形参的个数
document.write(fun2.length);//2
//定义一个相同名称的方法，会覆盖以前的
function fun1(a,b){
document.write(a-b);
}
fun1(2,3)//-1
//求任意个数的和
//在啊方法的声明中有一个隐藏的内置对象(数组)
//他会封装全部的实际参数
function add(){
var sum= 0;
for(var i =0 ;i < arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
var sum = add (1,2,3);
alert(sum);
</script>
</head>
<body>
</body>
</html>
Array对象
Array对象建立的三种方式学习
var arr = new Array(元素列表);编码
var arr = new Array(默认长度);
var arr = [元素列表];
Array对象的经常使用方法
join(参数):将数组中的元素按照指定的元素进行拼接
特色：js中，数组元素的类型是可变的，数组长度是可变的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//建立对象
var arr1 = new Array(1,2,3,"hahhaha");//数组也能够存放不一样的数据类型
var arr2 = new Array(5);//只有一个元素时候表明的是数组的长度
var arr3 = [1,2,3,4];
//输出数组,将会直接打印数组的内容
document.write(arr1+"<br>");//1,2,3,"hahhaha"
document.write(arr2+"<br>");//,,,,
document.write(arr3+"<br>");//1,2,3,4
//调用Array的join方法，将会按照指定格式打印数组
document.write(arr1.join("$"));
</script>
</head>
<body>
</body>
</html>
Date对象
建立方式 :var date = new Date();
经常使用方法：
toLocaleString():返回当前date对象对应的本地字符串格式
getTime()：获取毫秒值，返回当前如期对象描述的时间到1970年1月一日0点的毫秒值差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var date = new Date();
document.write(date+"<br>");//Wed Jun 05 2019 16:09:06 GMT+0800 (中国标准时间)
document.write(date.toLocaleString()+"<br>");//2019/6/5 下午4:09:06
document.write(date.getTime()+"<br>")//1559722146361
</script>
</head>
<body>
</body>
</html>
Math对象：
不须要建立，直接能够调用方法
经常使用方法：
random()返回0~1之间的随机数，含0不包含1
ceil(x):对数字进行向上舍入，
floor(x);对数字进行向下舍入
round(x)，把数四舍五入
去1~100之间多的随机整数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var number = Math.round(Math.random()*100)+1;
document.write(number)
</script>
</head>
<body>
</body>
</html>
RegExp:正则表达式对象
正则表达式：定义字符串的组成规则
1.单个字符：[],好比[a],[ab],[a-zA-z0-9],特殊符号表明的单个字符，\d:单个数字字符[0-9],\w:单个单词字符[a-zA-z0-9_]
2.量词符号：
？：表明出现0次或1次，
*：表示出现0次或屡次
+：出现1次或屡次
{m,n}：表示 m<=数量 <=n
{,n}:最多n次
{m,}最少m次
开始结束符号 ：^表示开始，$表示结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//验证字符串是否符合正则表达式
var reg = /^\w{6,12}$/;
var name="zhangsan";
var flag = reg.test(name);
alert(flag);
</script>
</head>
<body>
</body>
</html>
Global对象
特色：全局对象，这个Global中封装的方法不须要对象就能够直接调用
经常使用方法:
encodeURI():url编码
decodeURL():url解码
encodeURIComponent():url编码，编码的字符更多
decodeURIComponent();url解码
parseInt：将字符串转为数字，会逐一判断每个字符是不是数字，直到不是数字为止，会将前边数字部分转为number
isNaN():判断一个值是不是NaN
eval():将JavaScript字符串，并把它做为脚本代码来执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str = "云想衣裳花想容";
//编码
var encode = encodeURI(str);
document.write(encode+"<br>");
var s = decodeURI(encode);//%E4%BA%91%E6%83%B3%E8%A1%A3%E8%A3%B3%E8%8A%B1%E6%83%B3%E5%AE%B9
document.write(s+"<br>");
//编码
var encode1 = encodeURIComponent(str);
document.write(encode1);
//将字符串装换为数字
var str1 = "123abc";
var number = parseInt(str1);
alert(number);//123
//若是是a123abc会变成NaN类型
</script>
</head>
<body>
</body>
</html>
DOM简单学习：控制HTML文档的内容
绑定事件的两种方式
1.直接在html标签上，指定事件的属性操做，属性值就是代码
2.经过js获取元素对象，指定事件属性，设置一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--//onclick单击事件-->
<!--//直接在html标签上，指定事件的属性，属性值就是代码-->
<!--只要图片一接触到单击就会执行相应的代码-->
<img src="img/off.gif" onclick="fun();">
<img id="light2" src="img/on.gif">
<script>
function fun(){
for(var i=0;i<100;i++){
alert("你还能够点我最后一次");
}
}
function fun2(){
alert("咋老点我?")
}
var ligth2 = document.getElementById("light2");//获取id为light2元素对象
ligth2.onclick= fun2;//操做元素对象
</script>
</body>
</html>
电灯开关案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--导入图片-->
<img src="img/off.gif" id="hight">
<!--获取元素对象，改变属性-->
<script>
var hight = document.getElementById("hight");
//绑定事件,添加要执行的代码
var flag = false;
hight.onclick=function(){
//灯off表明状态为false
if(flag){
hight.src="img/off.gif";
flag=false;
}else{
//当单击的时候，灯若是状态为on,则单击后关闭灯
hight.src="img/on.gif";
flag=true;
}
}
</script>
</body>
</html>
BOM
1.概念：Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象
2.组成：
window:窗口对象
Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象
Location:地址栏对象
window：窗口对象
建立方式:无需建立，能够直接方法名调用
经常使用方法:alert(),confirm(),prompt()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="CloseWindow">关闭窗口</button>
<button id="NewWindow">打开窗口</button>
<script>
var newwindow;
var nw = document.getElementById("NewWindow");
nw.onclick=function(){
//这个open方法返回的是window对象
newwindow=open("https://www.baidu.com");
}
//document对象的方法getElementById会返回参数指定ID的对象
var cw = document.getElementById("CloseWindow");
function fun(){
//关闭打开的新窗口
newwindow.close();
}
//绑定元素对象
cw.onclick=fun;
</script>
</body>
</html>