javaScript

javaScript

1.  js基础
   1. js的代码需要编译才能运行,js编写的程序运行在:浏览器中
   2. 每个浏览器中都有js运行引擎,chrom: V8引擎
   4. jsp必须在html中才能运行
   5. ｊｓ严格区分大小写
2. jsp主要设计网页的行为
3. js的三个组成 
   1. ECMAscript:前端开发的一个标准;JS是其标准的一种实现.
      1. 版本:ES5
   2. DOM:document object model 文档对象模型,js需要借助DOM才能进行页面的动态 *** 作
   3. BOM:browser object model ：浏览器对象模型　ｂｏｍ包含ｄｏｍ
4. ｊｓ在网页中的位置和结合方式；
   1. ｊｓ代码的编写位置，
      1. .写到标签的属性中
      3. 这么写标签和代码强耦合
   2. 在ｈｅａｄ里面写ｊｓｐ
   3. 1. ａｌｅｒｔ是一个阻塞的方法，浏览器是自顶向下执行的
   4. ｓｃｒｉｐｔ可以写在任意位置；但是在不同的位置执行顺序不一样；一般放在＜／ｂｏｄｙ＞之前
   5. ｊｓ代码和网页在同一个文件；
      1. 将ｊｓ代码单独设计到一个文件中，引入．ｊｓｐ文件
      2. 如果通过ｓｒｃ指定外部ｊｓ文件之后，ｓｃｒｒｉｐｔ标签中编写的脚本会被浏览器忽略　
5. ｊｓｐ代码以分号结束
6. ｊｓｐ是一种解释型语句；但是与ｊａｖａ不同，是编译一条执行一条
7. 可以用一个ａｌｅｒｔ进行代码调试，手动调试
8. ｊｓｐ的三种输出方式
   1. ａｌｅｒｔ（内容）必须点击之后才会运行
   2. ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（输出内容）
   3. ｃｏｎｓｏｌｅ．ｌｏｇ（.内容）将内容往控制台输出

js变量的使用

1. '不能写强类型  统一用var指定 . var可以存储任何 类型的数据,同一个变量中,在程序执行过程中发生变化.
2. js中变量命名不能有非法字符,不能以数字开头,不能用关键字 
3. alertd两次
4. 大括号不起作用
5. 在es6中对有问题的语法更改；通过 let 进行变量的声明

js的变量数据类型

• 弱类型不代表无类型 可以用typeof进行测试类型
• js一共有6种数据类型 ：1.number 类型用来表示数值，不区分浮点和整型
  • 2.String 类型 表示文本类型，没有字符和字符串之分 单引号和双引号完全一样；双引号内用单引号
  • 3.boolean类型 表示逻辑值 
  • 4.null 空对象 搞对象唯一取值null
  • 5.undefined 表示定义了没有被付值；不付值默认是undefined
  • 6.object类型 对象类型
• 运算符 
  • 算数运算符，付值运算符 ，关系运算符，逻辑运算 三目运算符 与java一模一样
  • 和Java不同点：js中进行两个数据相等比较时会自动转换。
    • “123”==123 为true  发生了自动转换，  null==undefine 为true
    • 进行精确的比较：===   要求值相同，而且类型也要求一样才能为true
• 流程控制结构
  • if  else if()    switch  break.. while do while for break continue...
  • 和java不同点：js的条件；可以是任何类型的数据。
• js中提供了两个类型转换函数
  • parseint 将传入的文本或者小数转成整数；parsefloat 将文本或数值转换成小数
  • 输入：prompt d出一个输入框，接收用户的输入，

案例：乘法表

	
		
		
		
			table{border: 1px solid gray;}
			td{border: 1px solid gray;}
		
	
	
		
		
		
		
	

 document.write("")：编译器自动解析

js中的函数（重点）

1. 类似java代码；分为有参函数；无参函数 有 返回值 和无返回值 
2. js的函数本身也是一种类型；function 类型对象

函数定义

1. 每个函数都可以看成一个Function实例
   2. 调用方式：f1( );
   3. 这种通过创建对象的方式几乎不用
2. 通过函数表达式的方式： var f2 =function(){  console.log("f2.....") }
3. 通过函数声明式进行js函数的定义  function f3(){ console.log("f3.....")    }

4. 2和3的区别：var f2 =function(){}   调用写在定义之前不会被调用；function f3(){}的声明会被提前到script最前面，调用写在定义之前可以被调用
5. 每个函数都是一个对象

函数和Java函数的区别

• function f1(x,y)  参数列表写参数名就可以了，不用写类型
• f1( )不传参数 默认是undefined 
• 参数传递方式;先作为一个整体传给arguments 再传给参数 x,y
• js中没有重载；
• js中任何一个函数都有返回值，如果没有写return  会默认返回 undefined 
• 函数作为参数传给另一个函数

作用域

• 全局作用域   函数作用域   
• 在script的变量都属于全局作用御 ；全局的成员可以在任何一个函数访问

  • 在 浏览器窗口创建时创建，在浏览器窗口关闭时销毁

  • 函数作用域：局部作用，函数结束销毁

• 全局作用域中定义的所有变量将会作为全局对象window的属性存在；

• window对象是浏览器的一个内置对象，代表整个浏览器窗口；可以通过window.对象调用 可以省略不写；

• 声明一个局部a时；会把定义提前但赋值会延后。

  •        输出为undefined 

js中的对象

• js中没有类的概念；object是js内置的一个构造函数
• 静态面向对象：运行过程不能增加；js是动态对象 
•  对象创建方式
  • var  p1=new Object()
  • var 对象名={ }//字面量创建一个空对象
    • {属性名：属性值，属性名：属性值}属性值用引号
• 对象的属性访问
  • 对象名.属性名  或  对象名【“属性名”】
• 遍历对象的所有方法方法 for(var p in p2)  遍历出来的是对象的属性名；p本身是字符串
• js给对象添加新的属性  p2.modefy=mobile ;直接增加，不需要更改原来的数据
  • 删除，delete p2.name  ;  delete p2["name"]
• js为对象 p2.study=function(){  alert("study ...") }
  • 调用：p2.study();    或者   p2["study"] ()

返回调用这个方法的属性

直接调用study()是调用的window.study()  window.省略了

 对象中的数组

• 数组是前端的唯一可以使用的容器；使用和java区别很大
• 数组在js中也是一个对象
•  创建的语法：var 组名 = new Array();  创建一个空数组
  • 和java不同；js的数组是动态变化的 相当于集合框架；每个元素可以是不同的类型
  • 相同的是从下标0开始
  • 使用字面量的方式创建一个数组对象
    • var 数组名 =【】 ; 创建一个空数组
  • 遍历js数组
    • 用for()循环  for(var i=0;i
    • 使用for in 进行遍历 for(var i in arr){ arr[i] }
    • 调用数组对象(js内置)的forEach 方法对数组进行遍历。arr.forEach(function(value,index)) //value:每个元素值，index每个元素下标
• 创建对象数组（后期接触最多的，由服务器返回）
  •  var persons=[{name:"张三",gender："男",age:"19" },{ name:"张三",gender："男",age:"19},{ name:"张三",gender："男",age:"19}];
  • 遍历：
• js数组常用方法介绍（重点）
  • push
  • pop()    var deletevalue=scores.pop();  //删除最后一个
  • unshift(,,,)   var length = scores.unshift(99)
  • push   unshift构成一个队列 *** 作
  • splice()    scores.splice(2,2)  从2开始删除两个
  • scores.splice(2,1,88) 删除一个再加一个；等于修改一个
  • 插入元素
  • concat() 用来完成多个数组合并 
    • 不会对原数组更改；将多个数组复制到新数组
  • reverse() 对数组反转，对原表 *** 作
  • join(字符串分隔符) 按照指定分隔符将指定数组所有内容输出成一个字符串
  • slice(2,5) 从2截取到5部分元素返回一个新的数组；
  • sort()  对数组进行排序。默认按照文本进行比较。可以传入一个比较器
• 日期
  • var date =new Date();//获取当前日期
  DOM(documents object model)
• 文档（网页）对象模型（关系）
• 按照文档生成的对象树的模型就是DOM ； dom是沟通javascript的桥梁;js *** 作dom对象；dom变化之后会被浏览器解析

DOM对象的获取

• 从整个dom树上选择我们想要 *** 作的对象，在dom中提供了两种方式：调用doc对象的相关方法
  • 1.document.getElementsByTagName(String tagName):根据指定标签获取对象；返回一个数组
  • 对于双标签 通过innerHTML属性访问该对象中的内部文本
  • dom对象数组不能通过.forEach(value , index)  遍历；只能jsp里才能用
  • 2.document.getElementsByClassName() 按照类名访问；返回数组  ()
  • 3.document.getElementById() 通过id访问；返回一个
  • 4.document.getElementByName() 根据name属性获取指定元素；返回元素；用于表单元素
• 根据元素之间的层次关系进行dom对象的相对选择
  • children 获取父元素中所有的子元素
  • parentNode 获取当前元素的父元素
  • previousElementSibling 获取当前元素的上一个兄弟元素
  • nextElementSibling:获取当前元素的下一个兄弟元素

DOM对象 *** 作 

• innerHTML 设置或获取元素的内部的子标签（双标签）
• innerText和innerHTML一样
  • 区别是：如果没有设置的内容包含有子标签 必须用innerHTML
• value：专门 *** 作表单元素的值
• 可以动态的 *** 作 DOM 对象的属性，我们不仅可以 *** 作 HTML 中定义的属性，还可 以给 DOM对象自定义属性。 setAttribute （属性名 , 属性值 ） : 给 DOM 对象设置自定义属性 getAttribute(" 属性名 ") 获取 DOM 对象的自定义属性值
• 为 DOM 对象进行动态的事件注册 事件：对象能够识别的动作 事件的三要素： 1. 事件源对象（事件发生哪个 DOM 对象上 事件发生的主体） 比如 按钮 2. 事件类型 比如 click 点击

 
  
  
  
 
 
    我是一个标题
	
我是一个段落
	
我是一个P段落
	
我是一个段落
	

		
我是列表第一项
		
我是列表第二项
		
我是列表第三项
		
我是列表第四项
	
	
	

	百度

	
	

	
 

DOM对象事件注册

• 事件：对象能够识别的动作
• 事件的三要素
  • 1. 事件源对象（事件发生哪个 DOM 对象上 事件发生的主体） 比如 按钮 2. 事件类型 比如 click 点击 3. 事件响应函数 给对象进行事件处理函数的绑定这个过程称为 “ 事件的注册 ”
  • 在 JS 中对象的事件注册有两种方式： 1. 静态事件注册，通过为标签设置相应的属性完成事件的注册 2. 动态事件注册：通过执行一段 JS 代码为 DOM 对象进行事件处理函数的绑定 在事件处理函数中可以通过 this 关键字来获取当前事件出发的对象，还可以为处 理函数设置一个参数 e, 然后在函数体中可以通过 e.target 获取当前事件源对象

    
    
     
      
      
      
    
      
    	 li{cursor:pointer;}
      
     
     
        我是一个标题
    	
    我是一个段落
    	
    我是一个P段落
    	
    我是一个段落
    	
    
    		
    我是列表第一项
    		
    我是列表第二项
    		
    我是列表第三项
    		
    我是列表第四项
    	
    	
    
    	
    
    	
     
    
    
    
    

全选案例

 
 
 
 
 
    table{border:1px solid gray;border-collapse:collapse;}
    td{border:1px solid gray;}
 
 
 
   
        
            
            
            
            
            
        
        
            
            111
            222
            333
            333
        
        
            
            111
            222
            333
            333
        
        
            
            111
            222
            333
            333
        
        
            
            111
            222
            333
            333
        
        
            
            111
            222
            333
            333
        
        
            
            111
            222
            333
            333
        
        
            
            111
            222
            333
            333
        
        
            
            111
            222
            333
            333
        
    
    

    
 

•  可以通过JS动态的 *** 作DOM对象的样式
  • 方式 1 ：通过行内样式设置 语法： DOM对象.style.样式名=样式值 如果样式名由两个单词组成则在 DOM *** 作中的规律是：将单词之间的 - 去掉，同 时将第二个单词的首字母改成大写
  • 方式2：通过内部样式进行设置的 提前编写好一个类样式，然后通过 JS 动态的为 DOM 对象添加一个 className 属 性

 
  
  
  

  
  //写一个样式
	.current{
		color:white;
		background:green;
		border:4px solid blue;
		width:200px;
		height:200px;
		font-size:26px;
	}
  
 
 
    我是一个盒子
	

	
 

案例：设计一个tab标签

 案例设计：设计一个tab标签页

*{ margin : 0 ; padding : 0 ;} ul { overflow : hidden ;} li { list-style : none ; float : left ; border : 1px solid gray ; margin- right : 2px ; width : 50px ; text-align : center ; cursor : pointer ;} div { width : 500px ; height : 200px ; border : 1px solid gray ;} .current { background : green ; color : white ; }

• 民生
• 体育
• 娱乐

这是民生新闻内容 ... style = "display:none;" > 这是体育新闻内容 ... style = "display:none;" > 这是娱乐新闻内容 ...