一:javaScript的引入方式:
1.js的引入方式一:直接在script里写内容 script放在哪都行,但是建议放在head里面,从上到下运行
2.js的引入方式二:在js文件里写内容,在HTML中的script的标签中引入js文件路径
二:js的变量:
1.js声明变量 var 变量名=值;
2.js变量使用 命名规则和java中标识符命名规则一样
js命名可以重复,但是后者值会覆盖前者值
js结尾没有分号结束也行,但是不推荐这样使用
三:js中的数据类型:
1.基本数据类型
number:数字类型
string:字符串类型
boolean:布尔类型
object:对象类型
2.特殊类型
undefined:未定义类型
NaN:不是一个数 number
null:空对象 object
四.js中的运算符
1.算术运算符
+ - * / % ++ --
2.逻辑运算符
& | ! && || ^ < > <= >= !=
3.连接符
+
4.特殊运算符
==: 等值符 :如果数据类型相同,比较内容
如果数据类型不相同,先强制转换为number类型,再比较类型
===:等同符: 如果数据类型相同,比较内容
如果数据类型不相同,直接返回false
五.js控制语句
1.条件语句
if(){}
if(){}else{}
if(){} else if(){}else if(){}..else{}
2.选择语句
switch(){可以是任意类型
case:value
break;
default:
break;
}
3.循环语句
for(){}
while(){}
do{}while()至少循环一次
六.函数三种声明方式:
1.function 函数名(){
函数体
}
2.var 函数名=function(){
函数体
}
3.var 函数名=new Function("");
函数的参数传递:
在js中实参的个数可以和形参不一样,小于,则有未定义 大于,则传前面的数
函数的返回值:
如果函数没有return,返回undefined
():函数执行符
七.js中的Date、Math、String、Global、Array对象
/*1.日期对象*/
function testDate(){
var date=new Date();
/*本月中的第几天*/
document.write(date.getDate()+"<br />");
/*本周中的第几天*/
document.write(date.getDay()+"<br />");
/*返回全年*/
document.write(date.getFullYear()+"<br />");
/*返回距离1900年有多少年*/
document.write(date.getYear()+"<br />");
/*返回第几月 0-11*/
document.write(date.getMonth()+"<br />");
/*返回小时*/
document.write(date.getHours()+"<br />");
/*返回小时中的分*/
document.write(date.getMinutes()+"<br />");
/*返回秒数*/
document.write(date.getMilliseconds()+"<br />");
/*返回本地时间*/
document.write(date.toLocaleString()+"<br />");
testDate();
/*2.Math对象*/
function testMath(){
/*0-1之间的随机数*/
var ran=Math.random()*1000;
console.log(ran);
/*向下取整 844.5906987205257==844*/
console.log(Math.floor(ran));
/*向上取整 430.92845169083785==431*/
console.log(Math.ceil(ran));
/*获得4位随机数-----验证码*/
console.log(Math.floor(Math.random()*9000+1000));
}
testMath();
/*3.String对象*/
function testString(){
var a="bjsxt";
var b=new String("b-j-s-x-t");
//下标所在位置的内容
document.write(b.charAt(3)+"<br />");
//内容所在的下标
document.write(b.indexOf("j")+"<br />");
/*substr:一个数:从开始下标截取字符串到最后
两个数:开始下标 截取长度
* */
document.write(b.substr(2,3)+"<br />");
/*substring:一个数:从开始下标截取字符串到最后
两个数:开始下标 结束下标
* */
document.write(b.substring(2)+"<br />");
//字符串截取的方法
document.write(b.split("-"));
}
//testString();
/*4.Global对象*/
function testGlobal(){
var a=2;
var b="var c=3";
document.write(b+"<br />"); //var c=3
//document.write(c);//报错
/*把字符串转成可以执行的js代码*/
eval(b)
document.write(c+"<br />");
var d="123"
document.write(isNaN(d));//false d强制转换成number是一个数字
}
testGlobal();
/*1.数组的声明方式*/
function testArray(){
//方式一
var arr1=new Array();
//方式二
var arr2=new Array(4);
//console.log(arr2);
//方式三
var arr3=new Array("bjsxt",123,true,new String());
//console.log(arr3);
//方式四
var arr4=[123,"bjsxt",false,new Date()]
console.log(arr4);
}
//testArray();
/*2.数组的使用*/
function testArray2(){
var arr=[];
arr[0]=123;
arr[1]="北京";
arr[2]=true;
//js数组中的下标可以不连续,用empty填充
arr[5]=new Date();
console.log(arr);
}
//testArray2();
/*3.数组的扩容*/
function testArray3(){
var arr=[123,"bjsxt",false,new Date()]
console.log(arr.length);
//扩大数组
arr.length=10;
console.log(arr);
//缩小数组
arr.length=2;
console.log(arr);
}
//testArray3()
/*4.数组的遍历*/
function testArray4(){
//遍历方式一
var arr=[123,"bjsxt",false,new Date()]
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
//遍历方式二
for(var i in arr ){ //i代表数组的下标,而不是像java中代表数组的对象
console.log(arr[i]);
}
}
//testArray4();
/*5.数组的常用方法*/
function testArray5(){
var arr=[123,"bjsxt",new Date(),false]
console.log(arr);//[123, "bjsxt", Wed Aug 14 2019 16:09:46 GMT+0800 (中国标准时间), false]
//1.push:向数组的最后添加一个或多个元素,返回新的长度
//var len=arr.push("北京","上海");
//console.log(arr);//[123, "bjsxt", Wed Aug 14 2019 16:05:55 GMT+0800 (中国标准时间), false, "北京", "上海"]
//console.log(len);//6
//2.pop:删除最后一个元素,返回删除的元素
//var len=arr.pop();
//console.log(arr);//[123, "bjsxt", Wed Aug 14 2019 16:09:46 GMT+0800 (中国标准时间)]
//console.log(len);//false
//3.shift:删除第一个元素,返回第一个元素
//var len=arr.shift();
//console.log(arr);// ["bjsxt", Wed Aug 14 2019 16:12:40 GMT+0800 (中国标准时间), false]
//console.log(len);//123
//4.unshift:向数组的开头添加一个或多个元素,返回新的长度
//var len=arr.unshift("北京");
//console.log(arr);// ["北京", 123, "bjsxt", Wed Aug 14 2019 16:14:31 GMT+0800 (中国标准时间), false]
//console.log(len);//5
//5.splice:开始删除的下标 删除的个数
//var len=arr.splice(1,2);
//console.log(arr);//[123, false]
//console.log(len);//["bjsxt", Wed Aug 14 2019 16:17:55 GMT+0800 (中国标准时间)]
//5.splic: 添加的下标 0 添加的元素
var len=arr.splice(1,0,"北京");
console.log(arr);//[123, "北京", "bjsxt", Wed Aug 14 2019 16:20:11 GMT+0800 (中国标准时间), false]
console.log(len);//[]
}
testArray5();
八.js的事件
<!--1.单击事件onclick-->
<input type="button" name="" value="单击操作" οnclick="demo1()"/><br /><br />
<!--2.双击事件-->
<input type="button" name="" value="双击操作" οndblclick="demo2()"/><br /><br />
<!--3.鼠标事件:onmouseover:鼠标放上事件 onmouseout:鼠标离开事件 onmousemove:鼠标移动事件-->
<div style="width: 200px; height: 200px; background-color: red;" οnmοusemοve="demo3()"></div><br /><br />
<!--4.键盘事件:onkeyup:键盘弹起 onkeydown:键盘按下-->
<input type="text" οnkeydοwn="demo4()"/><br /><br />
<!--5.焦点事件:onfocus:获取焦点 onblur:失去焦点-->
<input type="text" name="" value="" οnblur="demo5()"/><br /><br />
<!--6.改变事件: onchange:内容改变后失去焦点-->
<input type="text" name="" value="" οnchange="demo6()"/><br /><br />
九.window方法:
* 三种弹框:alert:只有确定
* confirm:有确认和取消
* prompt:可以输入内容
* 定时器:setTimeout():调用一次
* setInterval():调用多次
* clearINterval():取消定时器
* 打开和关闭浏览器:open(src)
* close():关闭当前网页
十.BOM的对象
Location对象:属性:href:url
hostname:ip地址
port:端口号
host:ip地址和端口号
方法;reload():重新加载页面
History对象: 属性:length
方法:forward:前进页面
back:后退页面
go():0:刷新 正数 : 前进 负数:后退
Screen对象: var h=screen.height;
var w=screen.width;
Navigator对象:var n=navigator.userAgent;