JavaScript详解

时间:2024-10-21 09:03:40

JavaScript 介绍

  • 虽然是java作为前缀,但java和JavaScript的关系,就像老婆和老婆饼之间的关系,没有一毛钱关系
  • 网景公司在Netscape2.0首先推出了JavaScript
  • JavaScript的正式名称是“ECMAScript”,此标准由ECMA组织发展和维护,简称“js”
  • JavaScript是一种网页编程技术,用来向HTML页面添加交互行为
  • JavaScript是一种基于对象和事件驱动的解释性脚本语言,直接嵌入HTML页面,由浏览器解释执行代码,不进行预编译。

js的特点

  • 可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序
  • 解释执行:事先不编译,逐行执行
  • 基于对象:内置大量现成对象
  • 适宜:
    客户端数据计算
    客户端表单合法性验证
    浏览器事件的触发
    网页特殊显示效果制作

js的组成

  • ECMAScript:定义核心语法,关键字,运算符,数据类型等系列标准
  • DOM:文档对象模型,将一个HTML页面的所有节点看成一个一个的对象。更有层次感的管理每一个结点。
  • BOM:浏览器对象模型,是对浏览器窗口进行访问和操作。使用BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面不直接相关的动作。使BOM独树一帜且又常常令人怀疑的地方在于,它只是JavaScript的一个部分,没有任何相关的准。
    弹出新的浏览器窗口
    移动、关闭浏览器窗口以及调整窗口大小
    提供Web浏览器详细信息的定位对象
    提供用户屏幕分辨率详细信息的屏幕对象
    对cookie的支持
    IE扩展了BOM,加入了ActiveXObject类,可以通过JavaScript实例化Active对象,进而实现ajax局部刷新技术

HTML与JavaScript结合方式

使用js的三种方式

行内脚本

  1. 点击按钮(触发)
  2. 弹框(具体的操作)
<button onclick="alert('弹框测试')">点我一下</button>

内部脚本

 1. 使用<script></script>
 2. 标准是写在head和body之间(脖子位置),但其实只要写在HTML文件内部就可以,无论什么位置<html>外,<p></p>内部,都可以

<body>
     <script>
         alert("弹框");
      </script>
</body>

外部脚本

  1. 在项目根目录下创建一个目录js
  2. 在js目录中创建一个文件,后缀名是.js
  3. 在html页面中,使用
<script src="js/"></script>

以上使用脚本的三种方式的优先级,谁在上,谁先执行。因为是解释性语言。

JavaScript的使用

变量

  • 因为js是弱类型语言,所以,在定义变量的时候,所有的数据类型都是var
  • 声明变量:var x; var x,y;
  • 数值类型:number
    不区分整数数值和浮点型数值
    所有数字都采用64位浮点格式存储,类似于double格式
  • 字符串:string
    首尾又单引号或双引号括起
     var aa="欢迎来到\"JavaScript世界";
    
  • 布尔类型:
    仅有两个值:true和false也代表1 和 0
    实际运算中true=1,false=0

自动类型转换

数字 + 字符串:数字转换为字符串  10+'a'  -> 10a
数字 + 布尔值:true转换为1,false转换为0   true+5 ->6
字符串  +  布尔值:布尔值转换为字符串true 或 false  true+'a' -> truea
布尔值  +  布尔值 : 布尔值转换为数值1 或 0  true+true ->2

数据类型转换函数

  • parseInt:强制转换成整数
    如果不能转换,则返回NaN(NaN属性是代表非数字值的特殊值。)
    例如:parseInt(“6.32”)=6
  • parseFloat:强制转换成浮点数
    如果不能转换,则返回NaN
    例如:parseFloat(“6.32”)=6.32
  • typeof:查询数值当前类型,返回string/number/boolean /object
    例如:typeof(“test”+3) == “string”

null 与 undefined

  • null在程序中代表“无值”或者“无对象”
    可以通过给一个变量赋值null来清除变量的内容
  • undefined
    声明了变量但从未赋值或者对象属性不存在

算术运算

  • 加(+)、减(-)、乘(*)、除(/)、余数(%)
    -可以表示减号,也可以表示负号,如x = -y
    +可以表示加法,也可以用于字符串的连接
  • 递增(++)、递减(–)
    i++相当于i=i+1
    i–相当于i=i-1

关系运算

  • 严格相等:===
    类型相同
    数值相同
  • 非严格相等: !==
var a = "10";
var b = 10 ;
if ( a == b)
   alert("equal");
if( a===b)
   alert("same");

逻辑运算

  • 逻辑非(!)、逻辑与(&&)、逻辑或(||)
  • 逻辑运算的操作数均为boolean表达式
    在这里插入图片描述

控制语句

if(关系表达式){
    //语句块 1
}else{
     //语句块2
}

if(关系表达式1){
    //语句块 1
}else if(表达式2){
     //语句块2
}else if(表达式3){
    //语句3;
 }else{
       //语句4
}

switch(表达式){
         case 值1:
            //语句1;
            break;
         case 值2:
             //语句2;
             break;
         default:
               //语句4
}

for(var i=1; i<=5; i++){
    alert(i);
}

while(条件){
    //语句1;
    ...
}


常用字符串API

  • length:获取字符串的长度(字符串中字符的个数)属性,没有小括号
var str = "hello";
();
  • toUpperCase/toLowerCase:转大小写
var name = "AngierSun";
("大写:" + ());
("小写:" + ());

  • charAt(下标):返回某个下标上的字符
var str1 = "javascript网页教程";
var str2 = (12);     //下标12上的字符
(str2);    //教

var str3 = (12);
(str3);  //25945:(汉字“教”在Unicode编码中的编号)

  • indexof(字符):查找字符串中字符出现的首次下标
  • lastIndexof(查找字符串中字符最后一次出现的下标)
var str1 = "javascript网页教程" ;
var str2 = ("a");
(str2);   //1,a字符在str1中第一次出现的下标

var str3 = ("a");  //3,a字符在str1中最后一次出现的下标
(str3);

  • substring(开始,结束):截取字符串中一部分(结束是不包含的)
var str1="abcdefgh";
var str2=(2,4);
(str2);  //cd,从2开始(包含),4结束(不包含)

  • replace(旧的,新的):将字符串中的旧字符串替换成新字符
var str1 = "abcde" ;
var str2 = ("cd","xxx");
(str2);   //abxxxe,将str1中的cd替换成xxx
  • split(分割的节点):一个字符串切割成N个 小字符串,所以返回的是数组类型
var str1 = "一,二,三,四, 五" ;
var arr = (",");  //将str1以逗号进行分割,分割成N份,所以返回的结果一定是数组结构
("共分割成:"++"份") ;
(“第三份是:”+ arr[2]);  //三

数组

创建数组

var arr1 = new Array();

初始化数组的三种方式

// 第一种
var arr1 = new Array();
arr[0] = 110 ;
arr[1] = 119 ;
arr[2] = 120 ;

//第二种
var arr1 = new Array(10,"a",true);

//第三种
var arr1=[10,"a",true];

for(var i=0; i < ; i++){
    (arr1[i]);
}

数组的常用方法

  • tostring():将数组转换成字符串
var arr = [1,2,3,4];
("类型为:" + typeof(arr));
var str = ();  //将数组转换成字符串
(str + ",类型为:" + typeof(str));
  • join(连接符号):将数组中的每个元素用连接符号连接成一个新的字符串
var arr = [1,2,3,4];
var str = ("-");  //将数组中每个元素用 - 进行连接,并形成一个全新的字符串
(str + ",类型为:" + typeof(str));
  • concat(新元素):将原来的数组连接新元素,原数组不变
var arr = [1,2,3,4];
var arrnew = (5,6);   //在arr数组的后面添加新的元素,形成一个新数组,但是原数组是不变的
(arrnew +",类型为:" + typeof(arrnew));
("原数组:" + arr);
  • slice(开始,结束):在数组中提取一部分,形成新的数组
var arr = ['a','b','c','d','e','f','g','h'];
var arrnew = (2,4);  //在arr数组中截取,从2开始(包含),4结束(不包含)
(arrnew) ;   //cd
  • reverse():数组的反转(倒序)
var arr = [31,12,111,444] ;
(());
();  //将数组中的元素倒置
(());
  • sort():数组排序
    ()字符排序
var arr = [31,12,111,444];
();  //字符排序(不会按照字面量的大小)
(arr);

(func)数值排序

var arr = [31,12,111,444] ;
(laoguo);   //数字排序(会按照字面量的大小)
(arr);

//定义排序函数
function laoguo(a,b){
    return a-b;
}

Math数学对象

  • Math对象用于执行数学任务
  • 没有构造函数Math()
  • 无需创建,直接把Math作为对象使用就可以调用其所有属性和方法
Math对象方法

在这里插入图片描述

//返回0-9之间任意一个随机数字
var i = () * 10 ;
var j = (i) ;
(j) ;

Number 对象

Number。fixed(2) ; 自带四舍五入技能

var n = new Number(12.345) ;
var n1 = (2);   //12.35,固定两位小数,第三位小数四舍五入
(n1);

var x = new Number(12.3);
var n2 = (2) ;   //12.30,固定两位小数,位数不够,0来补齐
(n2);

正则表达式

对字符串执行模式匹配的强大工具

var reg1 = /^\d{3,6}$/ ;   //匹配纯数字3-6个
var reg2 = new RegExp("^\\d{3,6}$");

在这里插入图片描述

//方式1
var age = "18" ;  //判断:1-3位纯数字
var reg = /^\d{1,3}$/ ;  以/^开始,中间写正则内容,以$/结束
var b = (age);  //验证age变量的是否符合reg的匹配
if ( b == true ){
    ("验证通过!");
}else{
     ("格式错误");
}


//方式2
var name = "abc123" ;  //大小写字母和数字的组合(特殊字符不能出现),5~8位
var reg = new RegExp("^[a-zA-Z0-9]{5,8}$") ; //以^开头,中间写正则内容,以$结束
if((name)){
    ("验证通过!");
}else{
    ("格式错误");
}

日期对象

var time = new Date() ;
(time) ; //Tue Jul 14 2020 11:09:46 GMT + 0800 (中国标准时间)

var year = () ;    //年份
var month = () + 1 ; //月份从0开始,11结束,所以国内习惯要+1
var day = ();  //几号
 var hour = ();  //几点
 var mm = () ;    //分钟
 var s = () ;  //秒
`` var ms = () ;  //毫秒  1000毫秒 = 1秒
var timestr = year + "年" + month + "月" + day + "号" + hour + "点" + mm + "分" + s + "秒" + ms + "毫秒" ;

函数

  • 使用关键字function定义函数
function 函数名(形参列表){
      //函数体
      return 返回值;
}

  • 函数声明后不会立即执行,会在我们需要的时候调用到
  • 注意:
    形参:一定不要带数据类型
    分号是用来分隔可执行JavaScript语句。由于函数声明不是一个可执行语句,所以不以分号结束

无返回值

function qiuhe(a,b){
   var he = a + b ;
   ("两数之和:" + he) ;
}

qiuhe(3,4);

有返回值

function qiuhe(a,b){
   var he = a + b;
   return "两数之和:" + he ;
}

var s = qiuhe(3,4) ;
(s) ;

参数对象

在函数内部,调用参数列表的属性

function func(a,b,c){
    () ;  //获得参数的个数
    (arguments[1]);   //获得下标为1的参数
}

构造函数

函数同样可以通过内置的JavaScript函数构造器(Function())定义

var myFunction = new Function("a" ,"b","return a*b " );
var x = myFunction(4,3) ;
(x) ;

上述函数以分号结尾,因为它是一个执行语句

匿名函数

没有名称的函数

var fn = function(a,b){   //没有名字的函数,应该用一个变量来接收
     return a*10 + b ;
};
  (fn(3,4)) ;

全局函数

  • isNaN:检查其参数是否是非数字值
(isNaN(123));   //数字,false
(isNaN("hello"));   //非数字,true
(isNaN(4-1));   //数字,false
(isNaN(123));   //数字,false
(isNaN(-10));   //数字,false
(isNaN("123"));   //数字,false
(isNaN("1a23"));  //非数字,true
  • eval:用来转换字符串中的运算
var str = "1+3" ;
(str) ; //1+3 ,会认定为一种字符符号而已,没有加法的作用
(eval(str));  //让字符串中的运算符号生效
  • encodeURL 与 decodeURL
var name = "拉勾网";
("转码前: " + name);

name = encodeURL(name);
("转码后:" + name ) ;

name = decodeURL(name) ;
("解码后 : " + name ) ;

闭包

  1. 闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数
  2. 闭包的作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理

简单的说:就是在函数的局部范围内声明一个封闭的环境,此环境不会被垃圾回收探测到。保证了数据的安全唯一性。

 a = 10 ;  //全局变量,声明的时候可以不使用var
 function test1(){
     b = 20 ;  //不适用var声明的变量,就是全局变量
     var c = 30 ; //用var声明,并且在函数的内部。这样的变量叫做局部变量,有效范围只能在其声明的函数内部
     (c);
  }
     
  function test2(){
        (c);  //c is not defined(c变量没有定义)
   }
   
    test1();
    test2();

需求:统计方法执行了多少次

var count = 0 ; //总次数
function test1(){
   count ++ ;   //自增+1
}

test1();
test1();
test1();

(count) ;

谁都可以访问count,所以count变量并不安全,因为是全局变量
如何才能安全呢?将count声明为局部变量

function test1(){
    var count = 0 ;  //局部变量
    return count ++ ;  //外部无法访问count,只能通过return才能将count变量返回,并输出
}

test1();
test1();
test1();

(test1());   //每次调用方法,首先就是将变量还原为0

结果一直是0,因为每次调用test1(),方法体的第一句代码就是还原,无论曾经的值是多少
突发奇想,如果在test1()函数里面,再嵌套一个函数,js是支持函数嵌套的

function test1(){
    var count = 0 ;  //局部变量
    function jia(){
        return count++ ;
     }
     jia();
     return count ;
}
test1();
test1();
test1();

(test1());   //每次调用方法,首先就是将变量还原为0

如果每次只调用test1()里面的jia()就好了。闭包能解决此问题。

function test1(){
    var count = 0 ;   //局部变量
    function jia(){
        return count += 1;
    }
       return jia ;
}

var fn = test1();   //  fn => function jia(){return count += 1;  }

fn();
fn();

(fn());   //每次调用方法,首先就是将变量还原为0

闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。

  • 闭包的优点:方便调用上下文中声明的局部变量逻辑紧密,可以在一个函数中再创建个函数,避免了传参的问题。
  • 闭包的缺点:因为使用闭包,可以使函数在执行完后不被销毁,保留在内存中,如果大量使用闭包就会造成内存泄漏,内存消耗很大。

弹框输出

  • 普通弹框alert(“hello,你好”);
  • 控制台日志输出(“谷歌浏览器按F12进入控制台”);
  • 页面输出(“

    我爱你中国

    ”);将

    元素输出到中

  • 确认框confirm(“确定删除吗?”);
var b  = confirm("确定删除吗?");
if(b){
    ("<h1>删除成功!</h1>");
}else{
    ("<h1>你取消了操作</h1>");
}

  • 输入框prompt(“请输入姓名:”);
var name = prompt("请输入你的名字:");
("<h1>大名:" + name + "!</h1>");

DOM 操作

  • 在一个html页面中,会使用很多标签来规划制作页面

  • 每个标签都有它存在的意义,如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素

  • 如歌查找到这个元素是个难题,W3C组织的工程师们,突然看到了一棵大树。我要是想找到某一片叶子,应该怎么做

  • “顺藤摸瓜”,主树干有分支,每个分支还有许多小分支,只要把这个分支的结构整理清楚,任何一片叶子都不是难事了。

  • 叶子和大叔的一些启发,工程师们开会讨论就定了这个理论“文档对象模型”

  • 文档对象模型,就是将页面中所有的标签元素都看成是一个对象(一片叶子),主树干定义为根节点(根元素),所有的标签都是从根元素延伸出去的,摸清结构,找到某个标签就不再困难了

    在节点树中,顶端节点就是根节点(root)
    每个结点都有父节点(除了根节点)
    任何一个结点都可以拥有任意数量的子节点
    同胞是拥有相同父节点的节点

<html>
   <head>
      <meta charset="utf-8">
      <title> DOM 教程 </title>
   </head>
   <body> 
      <h1>第一节:HTML DOM </h1>
      <p>Hello World</p>
   </body>
</html>

从上面的HTML中:

  • <html>节点没有父节点;它是根节点
  • <head>和<body>的父节点是<html>节点
  • 文本节点“Hello world!”的父节点是<

    p>节点

并且:

  • <head>元素是<html>元素的首个子节点
  • <body>元素是<html>元素的最后一个子节点
  •  <h1>元素是<body>元素的首个子节点
    
  • <p>元素是<body>元素的最后一个子节点
    

js为我们提供了很多种方法来实现在页面找查找某个元素节点

DOM访问

  • getElementById:通过id属性获得元素节点对象

案例:当账号为空时,阻止表单提交

<body>
	<form action="xxx" onsubmit="return login()">
		<p>账号:<input id = "username"/></p>
		<p>电话:<input id = "phone"/></p>
		<p><button>登录</button></p>
	</form>
	
	
	<script>
	function login(){
		var name = document.getElementById("username").value;
		if(name == ""){
			alert("账号不能为空!")return false;   //阻止表单的提交
		}
		return true ;  //放行,让表单提交
	}
	</script>
</body>
  • getElementsByName:通过name属性获得元素节点对象集
    购物车全选效果
<body>
	<h2>我的购物车</h2>
	<table border="1" cellpadding="0">
		<tr>
			<td><input type="checkbox" onchange="quan(this)"/>全选</td>
			<td>名称</td>
			<td>单价</td>
		</tr>
		<tr>
		 <td><input type="checkbox" name="one"/>1</td>
		 <td>功能性饮料-尖叫</td>
		 <td>4.0</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="one">2</td>
			<td>火腿肠</td>
			<td>2.0</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="one">3</td>
			<td>包子</td>
			<td>1.5</td>
		</tr>
	</table>
	
	<p>
		<button>提交订单</button>
	</p>
	
	<script>
	  function quan(all){
		  var arr = document.getElementsByName("one");
		  for(var i = 0 ; i < arr.length ; i++){
			  arr[i].checked = all.checked ;  //将全选框的状态,赋值给每一个复选框
		  }
	  }
	</script>
</body>
  • getElementByTagName:通过标签名称获得元素节点对象集

    表格隔行变色

<body>
	<table border="1" cellpadding="0">
		<tr>
			<td><input type="checkbox" onchange="quan(tihs)" />全选</td>
			<td>名称</td>
			<td>单价</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="one"/>1</td>
			<td>功能性饮料-尖叫</td>
			<td>4.0</td>
		</tr>
		<tr>
					<td><input type="checkbox" name="one">3</td>
					<td>包子</td>
					<td>1.5</td>
		</tr>
	</table>
	
	<script>
		var rows = document.getElementByTagName("tr") ;  //通过标签名获得元素对象集合
		for(var i = 0 ; i < row.length ; i ++){
			if(i % 2 == 1){  //奇数
				rows[i].style.backgroundColor="pink" ;
			}
		}
	</script>
</body>

DOM修改

  • 修改HTML DOM意味着许多不同的方面:
    改变HTML内容
    改变CSS样式
    改变HTML属性
    创建新的HTML元素
    删除已有的HTML元素
    改变事件(处理程序)
1、改变一个<h2>元素的HTML内容
 <body>
	<button onclick="test()">点我试试</button>
	
	<script>
		function test(){
			("hello").innerHTML="dddd";
		}
	</script>
	
	<h2 id = "hello">你好!</h2>
</body>
改变一个<h2>的HTML样式
<body>
	<button onclick="chou()">你瞅啥</button>
	
	<script>
		function chou(){
			("hello").="red";
			("hello").="华文彩云";
		}
	</script>
	
	<h2 id = "hello">你好!</h2>
</body>

添加节点

  • 点击按钮,在页面中创建一张图片
<body>
	<button onclick="add()">添加</button>
	<div></div>
	
	<script>
	  function add(){
		  var img = document.createElement("img") ;  //<img>
		  img.setAttribute("src","路径");   
		  img.setAttribute("title","名称");
		  img.setAttribute("id","cat");
		  
		  
		  var divs = document.getElementsByTagName("div");
		  divs[0].appendChild(img);
	  }
	</script>
</body>

删除节点

  • 点击按钮,把上面刚创建的图片从页面上删除
<body>
	<button onclick="add()">添加</button>
	<button onclick="del()">删除</button>
	<div>
	</div>
	
	<script>
	   function add(){
		   ........
	   }
	   
	   function del(){
		   var img = document.getElementById("cat");
		   img.parentNode.removeChild(img);  //必须通过父节点,才能删除子节点
	   }
	</script>
</body>

替换节点

  • 点击按钮,把上面刚创建的图片替换成另一张
<body>
	<button onclick="add()">添加</button>
	<button onclick="del()">删除</button>
	<button onclick="rep()">替换</button>
	<div>
	</div>
	
	<script>
	   function add(){
		   ........
	   }
	   
	   function del(){
		  ........
	   }
	   
	   function rep(){
		   var imgold = document.getElementById("cat");
		   //通过修改元素的属性,做的替换
		   //("src","../img/");
		   
		   var imgnew = document.createElement("img");
		   imgnew.setAttribute("src","../img/");
		   
		   imgold.parentNode.removeChild(imgnew,imgold);
	   }
	</script>
</body>

事件

js捕获某个动作而做出的反馈
HTML事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当HTML表单被提交时
  • 当用户触发按键时

窗口事件(Windows Events)

仅在body和frameset元素中有效

  • onload当文档被载入时执行脚本
<body onload="test()">
	<script>
	  function test(){
		  document.write("hhhh");
	  }
	</script>
</body>

表单元素事件(Form Element Events)

仅在表单元素中有效

  • onblur 当元素失去焦点时执行脚本
  • onfocus 当元素获得焦点时执行脚本
<body>
	<script>
	     function a(){
			 console.log("获得焦点 == 被激活");
		 }
		 function b(){
			 console.log("失去焦点");
		 }
	  </script>
	  
	  <form action="">
		  <p>账号:<input onfocus="a()" onblur="b()"/></p>
		  <p>密码:<input /></p>
	  </form>
</body>

鼠标事件(Mouse Events)

  • onclick 当鼠标被单击时执行脚本
  • ondblick 当鼠标被双击时执行脚本
  • onmouseout 当鼠标指针移出某元素执行脚本
  • onmouseover 当鼠标指针悬停于某元素之上时执行脚本
<style>
   img{
	 width: 30%;
	 border: 5px solid white;
   }
</style>

<body>
	<img src="img/" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()">
	<img src="img/" onmouseover="shang(this)" onmouseout="xia(this)" onclick="shuang()">
	<img src="img/" onmouseover="shang(this)" onmouseout="xia(this)">
	
	<script>
	function dan(){
		alert("点了一下");
	}
	
	function shuang(){
		alert("连续快点两下");
	}
	
	function shang(img){
		img.style.border="5px solid red";
	}
	
	function xia(img){
		img.style.border="5px solid white";
	}
	</script>
</body>

键盘事件

  • onkeydown 按下去
  • onkeyup 弹上来
<script>

   window.onkeydown = function(){
	   
	   //event:事件源(按键)
	   // ("按键编码:" + );
	   
	   if(event.keyCode == "13"){//回车键
		   alert("登录成功!");
	   }
   }
   
   
   window.onkeyup = function(){
	   console.log(event.keyCode);  //按住按键不松手是不会触发的。当松手时,按键回弹则触发
   }
</script>

事件冒泡

  • 创建两个div,一个大一些,一个小一些
<style>
  #father{
	  width: 200px;
	  height: 200px;
	  background: black;
	  padding: 10px;
  }
  
  #child{
	  width: 100px;
	  height: 100px;
	  background: greenyellow;
  }
</style>

<body>
	<div id="father">
		<div id="child"></div>
	</div>
	
	<script>
	//代码不重要,重要是知道这个时间发生,是正常现象
	document.getElementById("father").addEventListener("click",function(){
		alert("父级元素的事件被触发:" + this.id);
	});
	
	document.getElementById("child").addEventListener("click",function(e){
		e.stopPropagation()   //取消事件的冒泡机制
		alert("子集元素的事件被触发:" + this.id);
	});
	</script>
</body>

先子,后父。事件的触发顺序 自内向外 ,这就是事件冒泡

事件捕获

<style>
  #father{
	  width: 200px;
	  height: 200px;
	  background: black;
	  padding: 10px;
  }
  
  #child{
	  width: 100px;
	  height: 100px;
	  background: greenyellow;
  }
</style>

<body>
	<div id="father">
		<div id="child"></div>
	</div>
	
	<script>
	document.getElementById("father").addEventListener("click",function(){
		alert("父级元素的事件被触发:" + this.id);
	},true);
	
	document.getElementById("child").addEventListener("click",function(e){
		alert("子集元素的事件被触发:" + this.id);
	},true);
	</script>
</body>

面向对象OOP

使用Object创建通用对象

var user = new Object();
user.name = "吕布" ;
user.age = 21 ;
user.say = function(){
	console.log("大家好,我叫:" + this.name + ",我今年" + this.age + "岁了!");
}

user.say();

var dog = new Object();
dog.nickname = "。。。。";
dog.wang = function(){
	console.log("我饿了,我要拆家!");
}

dog.wang();

使用构造函数

function userinfo(name,age){
	this.name = name ;
	this.age = age ;
	this.say = function(){
		console.log("大家好,我叫:" + this.name + ",我今年" + this.age + "岁了!");
	}
}

var user = new userinfo("詹姆斯",35);
user.say();

使用直接量

var user = {
	username : "孙悟空",
	age : 527,
	say : funcftion(){
		console.log("大家好,我叫:" + this.username + ",我今年" + this.age + "岁了!");
	}
};

user.say();

JSON

  • 大家在互联网上来回传递消息,如果没有一个统一的格式,解析起来的难度很大(每个人的编码喜好不一样)
  • JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
  • 易于人阅读和编写,同时也易于机器解析和生成

{
属性1:值1,
属性2:值2,
。。。。
}

<script>

  var json1 = {username:"吕布",age:31};
  console.log("姓名:" + json1.username + ",年龄:" + json1.age + "岁");
  
  //json数组
  var josnarr = [{name:"貂蝉",age : 18},{name:"小乔",age : 17}];
  console.log("貂蝉" + josnarr[0].age + "岁了");
  console.log("小乔" + josnarr[1].age + "岁了");
  
  
  // 复杂的json对象
  var long = {
	  name : "赵云",
	  sex : "男",
	  hobby:["玉兰白龙驹","龙胆亮银枪","青釭剑"]
  };
  
  console.log(lang.name + "的主攻武器:" + long.hobby[1]);
</script>

BOM操作

就是JavaScript对浏览器的一些常规操作的方法

window对象

在这里插入图片描述

<button onclick="kai()">极速入职</button>

<script>
    function kai(){
		window.open("","百度网","width=500,height=300,left=400");
		
		//("","百度网","fullscreen=yes");   IE 才生效
		
	}
</script>

screen屏幕对象

我想知道我的电脑屏幕多大?实际上,得到的就是分辨率

<body>
	<button onclick="kai()">求大小</button>
</body>

<script>
    function kai(){
		alert(windos.screen.width + "|" + window.screen.height);
	}
</script>

location定位

包含有关当前URL的信息,通常用来做页面跳转

<button onclick="test()">测试</button>
<script>

   function test(){
	   console.log("当前页面的URL路径地址:" + location.href);
	   location.reload();  //重新加载当前页面(刷新)
	   location.href = "" ;  //跳转页面
   }
</script>

history 浏览器历史

history 对象会记录浏览器的痕迹

<a href = ">去b页面</a>
<button onclick="hui()">返回</button>

<script>
   function hui(){
	   //(-1)  上一级页面
	   ();  //与go(-1)是等价的
   }
</script>

navigator导航

对象包含有关访问者浏览器的信息

<script>

   var str = "";
   str += "<p>浏览器的代号:" + navigator.appCodeName + "</p>";
   str += "<p>浏览器的名称:" + navigator.appName + "</p>" ;
   str += "<p>浏览器的版本:" + navigator.appVersion + "</p>" ;
   str += "<p>硬件平台:" + navigator.platform + "</p>" ;
   str += "<p>用户代理:" + navigator.userAgent + "</p>" ;
   str += "<p>启用Cookies:" + navigator.cookieEnabled + "</p>" ;
   
   document.write(str) ;
</script>

存储对象

用起来和我们在java中map很相似,都是键值对的方式存数据

本地存储localStorage

在关闭窗口或标签页之后将会删除这些数据

  • 保存数据
    ("name","curry");
  • 提取数据
("name");
  • 删除数据
("name");

多样化操作

//三种方式保存数据
localStorage["a"] = 1 ;
localStorage.b = 2 ;
localStorage.setItem("c",3);

<!-- 查看数据类型 -->
console.log(typeof localStorage["a"])
console.log(typeof localStorage["b"])
console.log(typeof localStorage["c"])

<!-- 第一种方式读取 -->
var a = localStorage.a;
console.log(a);

<!-- 第二种方式读取 -->
var b = localStorage["b"];
console.log(b);

<!-- 第三种方式读取 -->
var c = localStorage.getItem("c");
console.log(c);

会话存储sessionStorage

会话,就是保持浏览器别关闭
关闭浏览器就等于结束了一次会话
开启浏览器就意味着创建了一次会话

  • 保存数据
("name","klay");
  • 提取数据
var lastname = ("name");
  • 删除指定的数据
("name");
  • 删除所有数据
();

案例:记录点击了几下按钮

<button onclick="dian()">点我</button>
<h3 id="result"></h3>
<script>
    function dian(){
		if(sessionStorage.getItem("clickCount")){
			sessionStorage.setItem("clickCount",Number(sessionStorage.getItem("clickCount"))+1);
		}else{
			sessionStorage.setItem("clickCount",1);
		}
		document.getElementById("result").innerHTML="已经点击了" + sessionStorage.getItem("clickCount")+"次!"
	}
</script>

计时操作

周期性定时器 setInterval

setInterval(1,2):周期性触发diamanteexp(常用)

1:执行语句
2:时间周期,单位为毫秒

案例:闪烁的字体(1秒1变色)

<body>
	<h1 id = "title">极速入职</h1>
	
	<script>
	   var colors = ["red","blue","yellow","pink","orange","black"];
	   var i = 0 ;
	   
	   function bian(){
		   document.getElementById("title").style.color = colors[i++] ;
		   if(i == colors.length){
			   i = 0 ; //颜色重新开始
		   }
	   }
	   
	   setInterval(bian,100); //每隔0.1秒,执行一次bian函数
	</script>
</body>

案例:在闪烁字体的基础上扩展,闪烁的电子时钟

<body>
	<h1 id = "title" ></h1>
	
	<script>
	   var colors = ["red","blue","yellow","pink","orange","black"];
	   var i = 0 ;
	   function bian(){
		   document.getElementById("title").style.color = colors[i++] ;
		   if(i == colors.length){
			   i = 0 ;  // 颜色重新开始
		   }
	   }
	   
	   function time(){
		   var d = new Data();
		   var str = d.getFullYear() + "年"  + (d.getMonth()+ 1) + "月" + d.getData() + "号" + d.getHours()+ "时" + d.getMinutes() + "分" + d.getSeconds() + "秒";
		   document.getElementById("title").innerHTML = str ;
	   }
	   
	   setInterval(bian,100);   //每隔1秒,执行一次变色函数bian
	   setInterval(time,1000);  //每隔1秒,执行一次时间函数time
	</script>
</body>

停止定时器

案例:模拟年会抽奖

<body>
	<img id = "tu" src = "../img/pic_top.png" width="50%"/>
	<br />
	<button onclick="begin()">开始</button>
	<button onclick="stop()">结束</button>
	
	<script>
	   var arr = ["","","","",""];
	   function begin(){
		   timer = setInterval(bian,100);   //没有使用var,所以timer是全局变量
	   }
	   
	   function stop(){
		   clearInterval(time);  //停止定时器
	   }
	   
	   function bian(){
		   var i = Math.floor(Math.random() * arr.length);   //0-4
		   document.getElementById("tu").src = "../img/" + arr[i];
	   }
	</script>
</body>

一次性定时器 setTimeout

相当于延迟的效果,只执行一次

<script>
   function bian(){
	   document.body.style.backgroundColor = "red" ;
   }
   
   // 3秒之后调用
   setTimeout(bian,3000);
</script>