导航目录
◉ 概述
javascript是一种脚本语言,是基于对象和事件的脚本语言。
特点: 动态(声明变量时无需指定变量类型)、
弱类型(变量赋值不受类型约束,可以给变量赋值任意类型值)
javascript包括:
ECMAscript(基本语法)(由ECMA(欧洲计算机制造联合会)制定标准
DOM(文档对象模型)(由W3C(万维网联盟)制定标准)
BOM(浏览器对象模型)(每个浏览器都有自己的属性和样式)
javascript主要用途之一就是在HTML页面中控制页面元素的变化、处理数据等。
◉ 在html文档中使用javascript的方式(在哪写JS代码?)
1、在html引用js文件,javascript代码写在js文件中(项目中最常用的方式)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用js文件 -->
<script src="js/example.js"></script>
</head>
<body></body>
</html>
2、在<script></script>中写代码(简便的使用方式)
<script> //可选属性“ type="text/javascript" ”
alert('Hello world!');
</script>
3、在HTML的标签中,在负责事件处理的属性里写代码
<div onclick="alert('我被点击了');" ></div>
◉ 变量
使用“var”关键字声明变量
var num = 10;
-
全局变量
声明在所有函数之外的变量。全局变量可被声明语句后面的所有javascript语句使用,包括函数内。 -
局部变量
在函数内部声明的变量(和c++、java不同,放在大括号{ }中声明的变量仍然可以被大括号的外部访问,只有在在函数内部声明的变量才无法被函数外部访问)
◉ 基本数据类型
Number、String、Boolean、Undefined、Null
以下代码将在控制台打印显示出变量的类型:
var num = 10;
var str = '';
var bool = true;
var unde;
var nu=null;
console.log('num -> '+ typeof num);
console.log('str -> '+ typeof str);
console.log('bool -> '+ typeof bool);
console.log('unde -> '+ typeof unde);
console.log('nu = '+ nu);
执行结果如下:
◉ 运算符
运算符类型 | ||||||||
---|---|---|---|---|---|---|---|---|
算数运算符 | + | - | * | / | % | ++ | -- | |
赋值运算符 | = | += | -= | *= | /= | %= | ||
比较运算符 | == | === | != | !== | > | < | >= | <= |
位运算符 | & | | | ~ | ^ | << | >> | ||
逻辑运算符 | && | || | ! | |||||
字符串运算符 | + | += | ||||||
条件运算符 | ? : |
◉ 控制语句
◇ if 、else
if(10>12){
alert('10>12');
}else if(10>11){
alert('10>11');
}else{
alert('剩余情况');
}
◇ switch 、case 、default
var x=1;
switch (x){
case 1:
case 2:
console.log('是1或2');
case 10:
console.log('是10或1或2');
break; //跳出switch,不再执行后面的switch内的语句
case 11:
console.log('肯定是11');
break;
default:
console.log('其余情况');
break;
}
switch(true){ //这是使用逻辑表达式的用法
case x<4:
console.log('x<4');
break;
case x<7:
console.log('4<x<7');
break;
default:
console.log('其余情况');
break;
}
◇ && 的短路操作
10>2 && console.log( '条件通过' );
解释:如果 && 前面的逻辑表达式为false,则 && 后面的语句将不会被执行;可作为简易的 if 语句使用。
◇ for ( ; ; ) {}
for(var i=0;i<10;i++){
console.log('数数:'+ i);
}
◇ for ( in ) {}
var arr=[1,2,3,4]
for(var i in arr){ //遍历数组
console.log(arr[i]);
}
var obj={
name:'han',
age:19,
say:function(){
console.log('说话');
}
}
for(var p in obj){ //遍历对象成员
console.log( p +'='+ obj[p] );
}
◇ while () {}
var count=10;
while(count-- > 0){
console.log( '我会被重复执行'+count+'次' );
}
◇ do {} while();
var arr=['我还能数数吗?',1,2,3]
var i=0;
do{
console.log(arr[i]);
}while(++i < arr.length);
◉ 函数
函数名以英文字母或$开头,函数名不能是关键字。
funtion fn(){
console.log( '函数名:fn' ); // { } 内是函数体(执行内容)
}
var f = function(){
console.log( '函数名:f' );
//console.log()的作用:在控制台输出 “函数名:f”
}
fn();
f();
function printString(str){ //str是形参(名)
console.log(str);
}
printString( '我是实参' ); // '我是参数'是实参(值)
var sum = function(a, b){
return a+b; //关键字"return"的作用:结束函数并返回一个值
}
console.log(sum(1,2)); //调用sum(1,2)将获得返回值“3”
如果函数没有return语句或return后面没有指定返回值,那么函数也会返回一个“undefined”的值,以表示未定义返回值。
函数名可以被当成一个变量传递
function f1(){
alert('f');
}
function f2(f){
f();
}
f2(f1);
◉ 对象
通过构造方法创建对象
var obj = new Object();
通过大括号{}直接声明
var obj = {
name:'张三', //成员属性
age:18,
'height':180, //逗号分隔对象的成员
say:function(){ //成员方法
console.log('我'+age+'岁了');
},
'2019-log':'$%#&*&^&%^$', //''通过引号可使用非规方式命名属性或方法
'怪名#:':function(){
console.log('怪名');
}
}
alert( obj.name );
obj.say();
//或者
alert( obj['2019-log'] );
obj['怪名#:']();
obj.phone='18766666666'; //添加属性
obj.sing=function(){ //添加方法
console.log('唱歌');
}
delete obj.name; //删除属性
delete obj.say; //删除方法
console.log(obj);
遍历对象的成员名称(包含属性和方法)
for(var item in obj){ //item将会获得各个成员的名称,item即为String类型
document.write(item +'<br>');
}
遍历对象的成员值
for(var item in obj){
document.write(obj[item] +'<br>');
}
若只想遍历对象的成员属性值,需要判断obj的成员是否为函数类型,用 typeof 获取成员类型
for(var item in obj){
if(typeof obj[item] != 'function'){
document.write(item+': '+obj[item]+'<br>');
}
}
◉ 数组
var arr = [1,2,3,4,5];
console.log( arr[0] );
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
//或者
for(var i in arr){
console.log(arr[i]);
}
var len = arr[0].length ;
push:在数组末尾添加一个元素,并返回数组的长度
var length = arr.push(3);
pop:删除数组末尾的元素,并返回该末尾元素
var lastEle = arr.pop();
splice:删除数组的一部分并返回该部分,并且可以在删除的位置再添加新元素
array.splice(开始删除的位置,删除的元素数量,要添加的元素1/数组1,…,元素n/数组n)
备注:数组参数会被拆解为各个元素后再插入到array数组中。
var arr=[1,8,9,4];
var oldName=arr.splice(1,2,[2,3]);
console.log(oldName+"\n"+arr);
splice的巧用
//删除倒数第n个元素
arr.splice(-2);
//只插入元素
arr.splice(2,0,[1,2,3]);
sort:数组排序
var arr=[1,8,3,4,'c','b'];
arr.sort();
console.log(arr);
indexOf:返回元素的下标索引,如果没有则返回-1。
var arr=[1,8,3,4,5,'y','b'];
console.log(arr.indexOf(y));
◉ 控制台常用的显示属性信息的方法
console.log()
console.dir() //显示成员名称和成员值
◉ DOM(document object model:文档对象模型)
DOM是一种基于树的API文档(DOM 树模型)
-
节点类型:文本节点、元素节点、属性节点
- 在 HTML DOM 中,所有事物都是节点。
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
-
根对象:document
-
直接获取页面文档的元素对象
document.getElementById(); //获取指定id的元素
document.getElementsByClassName(); //获取指定类的元素(包含多个)
document.getElementsByTagName(); //获取指定标签的元素(包含多个)
var nav = document.getElementById('nav'); //nav变量接收获取到的元素对象
nav.children; //获取子元素
nav.childNodes; //获取子元素的文本节点
nav.parentNode; //获取父元素(只能为元素节点)
nav.firstElementChild; //获取第一个子元素
获取元素的代码要位于元素的html代码之后才能读取,因为html文档是自上而下加载读入的。也可以在onload事件中写获取元素的代码,onload事件就是等待文档加载完成后执行的。
◉ 事件
绑定的元素、事件类型、事件的处理函数
onclick(点击)、onmouseover(鼠标移入)、onmouseout(鼠标移出)、
onmousemove(鼠标移动)、onmousedown(鼠标按下)、onmouseup(鼠标弹起)
onkeydwon(键盘按下)、onkeyup(键盘弹起)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#onmouseDemo{background-color: #ccf;}
</style>
</head>
<body>
<div id="onmouseDemo">鼠标的点击、移入、移出、移动、按下、弹起事件演示</div>
<input type="text" id="onkeyDemo" placeholder="键盘的按下、弹起事件演示" />
<script>
var onmouseDemo=document.getElementById('onmouseDemo');
var onkeyDemo=document.getElementById('onkeyDemo');
//事件
onmouseDemo.onclick=function(){
console.log('鼠标点击了');
}
onmouseDemo.onmouseover=function(){
console.log('鼠标移进来了');
}
onmouseDemo.onmouseout=function(){
console.log('鼠标移出去了');
}
onmouseDemo.onmousemove=function(){
console.log('鼠标在里面移动了');
}
onmouseDemo.onmousedown=function(){
console.log('鼠标按下了');
}
onmouseDemo.onmouseup=function(){
console.log('鼠标弹起了');
}
onkeyDemo.onkeydown=function(e){
console.log('键盘按下了,按键的键值是:'+e.keyCode);
}
onkeyDemo.onkeyup=function(e){
console.log('键盘弹起了,按键的键值是:'+e.keyCode);
}
</script>
</body>
</html>
最内部的元素会最先触发事件,然后不断调用父元素的同类型事件
就是将子元素事件需要处理的事,通过事件冒泡的机制委托给父元素处理,好处是当有多个子元素需要对同类型事件做相似处理时,可以交由父元素统一处理,而不用给每一个子元素都绑定事件,减少了内存的消耗。
e.stopPropagation();
◉ BOM(browser object model:浏览器对象模型)
查看window对象成员信息
console.dir(window);
window是最根部的对象,不需要直接指明window对象就可以使用window的成员
var a=10;
window.alert(window.a);
//或者
alert(a);
◇ alert() 消息对话框
alert('对话框');
◇ comfirm() 确认对话框
var isOk = comfirm('你确定吗?');
◇ close() 关闭当前窗口
window.close();
◇ open() 打开指定网址的新窗口
var newWin = open('http://www.baidu.com'); //获得新的窗口对象
◇ setInterval() 设置周期执行
setInterval()设置一个线程周期执行一个函数,返回值是一个数字id,用于关闭该周期活动
var id = setInterval(function(){
document.write('2秒又过去了');
} , 2000); //每2秒执行上述函数
//或者
function f(){
document.write('2秒又过去了');
}
var id = setInterval( f , 2000); //每2秒执行 f 函数
◇ setTimeout() 设置延时执行
setInterval()设置一个线程延时执行一次指定函数,返回值是一个数字id,用于提前关闭该函数的执行
var id = setTimeout(function(){
alert('3秒已过');
} , 3000); //3秒后执行上述函数
◇ clearInterval() 清除一个周期执行活动
clearInterval(id); //id是setInterval()时获取的返回值
◇ clearTimeout() 清除一个延时执行活动
clearTimeout(id); //id是setTimeout()时获取的返回值
◇ onload() 页面加载完成的事件
用途之一:可用于确保javascript代码前置于页面元素时仍可以获取到页面元素对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var e = document.getElementById('e');
console.log(e);
</script>
</head>
<body>
<div id="e"></div>
</body>
</html>
◇ history (历史记录,控制上下页等)
history的常用方法:
- back() 返回上一页
- forward() 前进到下一页
- go(number | URL) 跳转到历史记录的页面
◇ location (地址)
port 属性:端口号
href 属性:当前地址(URL)
◇ screen(屏幕)
width 属性:获得屏幕高度
height 属性:获得屏幕宽度
availWidth 属性:获得有效屏幕高度
availHeight 属性:获得有效屏幕宽度
◇ navigator(导航器)
userAgent 属性:返回由客户机发送服务器的 user-agent 头部的值,包含了各种客户机的信息,如:操作系统、浏览器信息等。
appVersion 属性:返回浏览器的平台和版本信息。
◇ document(文档对象)
HTML文档对象,就是DOM(文档对象模型)的根对象 document,具体内容上面已经介绍。
◉ 常用的通用对象
-
Math
- abs(x):获得 x 的绝对值
- pow(x,y):获得 x 的 y 次幂。
- ceil(x):获得 x 向上取整的值
- floor(x):获得 x 向下取整的值
- round(x):获得 x 四舍五入的值
- random():获得 0~1 之间的随机数
◉ 常用的通用构造函数(类似于“类”的构造函数)
创建一个Date对象,将获得一个包含当前时间信息的Date对象
var d = new Date();
console.log(d); //打印显示时间信息
console.dir(d); //打印显示 d 对象的成员信息
◇ Date 的运算
Date对象之间可以做减法运算,运算结果的单位为毫秒。
console.log(new Date(2019,9,21) - new Date(2008,1,1)));
◇ Date 的常用方法
方法 | 描述 |
---|---|
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11) |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getTime() | 返回 从1970 年 1 月 1 日到当前时间的总毫秒数。 |