笔记-JavaWeb学习之旅7
javascript基础
概念：一门客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有javascript的解析引擎，是一个脚本语言，不需要编译，直接就可以被浏览器解析执行。
javascript = ecmascript+javascript自己特有的东西(bom+dom)
ecmascript:客户端脚本语言的标准
基本语法：
与html结合的方式有两种内部js和外部js
注释：单行注释//，多行注释/**/
数据类型：1.原始数据类型（number,string,boolean,null,undefined）2.引用数据类型：对象
九九乘法表练习
<!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> 上一篇： 判断应用程序是控制台程序还是窗体程序
下一篇： Photoshop 绚丽的动感光影特效