04_前端三大件JS

JavaScript

脚本语言

基于对象

弱类型

事件驱动 不需要经过web服务器就可以i对用户的输入做出相应

跨平台

和Java没有任何关系

1.JS的组成部分

2.JS引入

2.1 直接在head中通过一对script标签定义脚本代码

1.js如何声明函数？
function 函数名(){}		2.js函数如何和点击按钮绑定到一起？
按钮有一个属性叫做 onclick	单机行为ondbclick 双击行为3.如何弹窗提示？
可以在js函数中定义alert()函数，也就是经典的弹窗提示

2.2创建JS函数池文件，所有html文件共享调用

JS文件放到外部
所有html文件共享调用，
当使用的适合，直接调用即可

一些注意的点

3.JS的数据类型和运算符

        1.JS中的变量的声明 var str = "zhangsan"2.JS和scala一样都是弱类型语言3.JS常见的数据类型numberstringbooleanObject          //值可以是null,null的类型就是objfunction类型4.数据类型可以自动推理,var可以不声明age = 18    //自动得到类型是number5.判断变量的数据类型console.log(typeof age)

运算符和java保持一致，略

4.分支结构

几乎和java保持一致，但是有局部差异

if(condition){xxx
}else{xxx
}

和java中不一样的是：condition只要是非空字符串即为true

非空对象也是true

if ( ‘false’ ) //condition==true

if( new Object()) //true

if ( null ) //false

switch和Java一样

5.循环结构

和java几乎 一致除了foreach

java的foreach遍历

for(str : arr){

​ sout(str)

}

JS的foreach遍历

for(str in arr){

​ sout(str)

}

小结：仅将：改变了in即可

且str并不表示数组中的元素，而是表示数组中元素的索引；

6.JS函数的声明

function funname(){}
var funname(){}

5.函数可以作为参数传递

7.JS中自定义对象

js创建对象第一种方式

            1. new Object()2.{属性名：属性值，...,...,函数名：function(){}}--><script>// 1.创建一个对象var person = new Object()// 2.给对象创建属性person.name = "zhangsan"person.gae// 3.给对象添加方法person.eat=function(food){console.log(this.name + "eat"+ food)// 使用对象的属性,就用this即可,如果不用this,可能使用到变量而非对象属性// 使用的this调用属性必须非空,像这种情况age我就没法调用}

创建对象的第二种方式,简洁版

            var animal = {name:"cat",age,eat(food){return this.name+"eat"+food}}

8.JS_JSON在客户端使用

js放到客户端
java代码放到服务端
未来的设计模式：前端给后端 发送一些数据，后端反过来给前端相应一些数据 
前端后端都是用对象的方式管理数据
但是java对象和js对象构建不一致；
为了统一，设计了json格式；
因此对象通过序列化，反序列化操作通过json的格式在网络进行传输

8.1JSON串格式

8.2JSON在前端格式转化

前端网页JSON格式和JSON对象区别

//JSON串转化为一个对象
JSON_Obj = JSON.parse(JSNO_Str)

//JSON对象转化为JSON串

JSON.stringify()

9.JS事件

事件表示浏览器用户行为

我们一般在事件发生时，自动触发JS函数，我们称之为事件的绑定；

9.1常见事件

–鼠标事件

事件属性可以设置多个函数

一个标签也可以使用多个事件 灵活

–键盘事件

–表单事件

小结：事件可以通过用户行为，直接拿到其value值，然后放回给后端程序做解析

联系：创建一个form表单，提交 表单，触发表单提交事件

10.DOM编程实现事件绑定

常规流程

通过id获取想要操作的标签

var btn = document.getElementById(“btn1”)

绑定一个事件为事件赋值(js函数)

btn.onclick = function(){}

整体代码

    <button id="btn1">按钮<script>    // 通过dom编程获取要操作的元素(通过id值获取想要操作的元素)var btn = document.getElementById("btn1")//绑定一个单机事件  ==  为其 某一个属性赋值，btn是一个标签，也是一个对象btn.onclick=function(){             //事件属性赋值就是赋值js函数，此处有一些匿名写法alert("这是一个弹窗")}</script></button>

如果将srcipt代码放到head中会报错；
原因是html文件顺序执行，btn1还没有进行定义，head中的代码就要进行绑定，肯定报错

因此引入onload事件：加载完成后再执行的js

html文件顺序执行，使用dom绑定需要考虑时机，什么时候标签已经定义了，什么时候能往上绑定，需要考虑时机，onload方法很好解决了此问题

onload事件简写

//head代码下
<script>window.onload=function(){xxx}
</script>

head代码给window对象的onload属性赋值，即可body中不需要定义onload事件。简化写法；

需求：通过点击一个事件后，使其按钮改变颜色

仅需修改绑定标签的style的背景色即可

dom通过 id获取的是标签对象，其任何属性都可以修改

11.BOM编程

browser boject model

bom由一系列对象组成，是访问控制修改浏览器的属性方法(通过window对象和一系列数学控制方法)

window对象及其各个属性

window对象的属性

BOM编程常用api

            // 1.三种弹窗方式api      JSfun1 = function(){window.alert("allert弹窗")}fun2 = function(){var promptvalue = window.prompt("prompt弹窗，输入一些东西，prompt弹窗是有返回值的，且可以在js函数中接收")}fun3 = function(){var confirmvar = window.confirm("confirm弹窗，同理也是有返回值的")}fun4 = function(){window.setTimeout(function(){alert("5秒后弹窗")},5000)}funA = function(){window.history.forward()}funB = function(){window.history.back()}// 4.location对象访问url地址栏funC = function(){//修改地址栏地址       window.location.href="http://www.atguigu.com"}// 5.存储数据JS funtemp = function(){// 向sessionStorage存储数据    sessionStorage.setItem("keyA",123)}funlong = function(){// 向localStorage存储数据localStorage.setItem("longlocalstoragy",'sdjlasjd')}

     <!-- 1.三种弹窗方式api --><button onclick="fun1()" value="弹窗"> 弹窗</button><button onclick="fun2()" value=""> 弹窗</button><button onclick="fun3()" value="弹窗"> 弹窗</button><!-- 2.定时任务api --><button onclick="fun4()" value="弹窗"> 弹窗</button><a href="http://www.atguigu.com">尚硅谷</a><!-- 3.history实现上一页下一页跳转 --><button onclick="funA()" value="弹窗"> 上一页</button><button onclick="funB()" value="弹窗"> 下一页</button><hr><!-- 4.location对象访问url地址栏 --><button onclick="funC()" value=""> 尚硅谷地址</button><!-- 5.存储数据 --><hr><button onclick="funtemp()" value="这是一条临时数据"> 存储数据临时</button><button onclick="funlong()" value="这是一条长久数据"> 存储数据长久</button>

12.DOM编程

dom编程就是玩document，可以进行页面内容的修改；document属于bom编程，但是其功能强大，所以独立出来专用作为一个DOM编程

未来html文件放到服务器上，就无法将html源代码进行修改，所以动态使html文件发生变化需要借助JS的DOM编程

客户端不能改变服务器的html文件，但是可以通过改变document内容从而，改变在客户面前的展示形态

12.1 DOM对象结构

dom结构是树形结构(逻辑结构)

整个document文档就是一个树形文档；

document就是window的一个属性

DOM将每一个标签称之为node

node又具有不同的属性如下

12.2对元素进行操作

–获取元素

–操作元素样式，文本，增删等

            // 1.获取docomentvar doc = window.document// 2.通过document修改值// var value  = doc.getElementById("username")// alert(value)// 3.根据标签名获取// var value = doc.getElementsByTagName("input")// for (idx in value){//     // alert(value[idx])//     // console.log(value[idx])//     // print(value[idx])// }// 4.根据name获取var value = doc.getElementsByName("aaa")for(idx in value){console.log(value[idx])}// 5.根据class获取元素var value = doc.getElementsByClassName("")// 6.根据父元素获取所有子元素var div01 = doc.getElementById("div01")var childrens =  div01.childrenfor(idx in childrens){console.log(value[idx])}// 7.通过子元素获取父元素var value = doc.getElementById("address")var par  = value.parentconsole.log(par)// 8.获取同级别前后元素div01.previousElementSibling    //获取前面的第一个元素div01.nextElementSibling    //获取后面的第一个元素<body><div id="div01"><input type="text" id="username" name="aaa"><input type="text" id="password" name="aaa"><input type="text" id="address"></div><input type="text"> <br><input type="button" onclick="fun01()" value="根据id获取指定元素" id="btn01"><input type="button"><input type="button"><input type="button"></body>

注意点：父元素获取子元素，子元素相对于父元素是一个属性，子元素获取父元素同理

12.3 修改元素

    <script>function changeAttribute(){var in1 = document.getElementById("in1")// 1.对元素进行修改     元素.属性名=xxxin1.type = "button"in1.value = "changeValue"in1.style.backgroundColor= "red"// 原始样式中 名带"-"符号 要转换为驼峰式background-Color// 2.修改标签中间文本.nnerText      .innerHTMLin1.innerText = "innerText"     //button不受text影响in1.innerHTML = "innerText"     //button不受text影响/*.nnerText       仅识别标签中文本.innerHTML      识别标签中文本+识别标签*/}</script>

注意点：修改样式，原始样式中含有“-”那么js函数中不要带，且使用驼峰进行修改

Appendix

1.prompt方法，带有返回值的弹窗

var month = prompt(“请输入月份”)

2.经典弹窗提示函数alert（）

3.js中将字符串转化为number

Number.parseInt(“str”) //和java异曲同工

4.可以获取函数调用实参

arguments参数

console.log( arguments )

5.JSON.stringify()将JSON对象转化为字符串

6.JSON.parese()将JSON串，转化为JSON对象

7.JS的数组和java有所不同

具体来说就是js使用的是集合，长度可变，长度api为length而非size

其各种api和java集合保持一致

8.弹窗的三种方式

9.常见错误：

引入js函数未带小括号

button标签的value值不改变框的名字，只有文本能够表示其文字

10. 关于弹窗，prompt，confirm都是有返回值的，其返回值可以在js函数中接收

11.bom方法很好用，其所有的window前缀都可以省略

12.sessionStorage.setItem（key，value）此方法进行临时存储数据；

键，必须是String类型

值，任意类型

存储位置如下

13.本人认为JS的方法形参就是为了传递 标签信息目的是往后端进行数据交互

14. dom编程中，根据所有父元素获取所有子元素，那个childern 没有括号，其不是方法，只是父类的一个属性

    var div01 = doc.getElementById("div01")var childrens =  div01.childrenfor(idx in childrens){console.log(value[idx])}
    

15.原始样式中 名带"-"符号 要转换为驼峰式background-Color