04_前端三大件JS

文章目录

JavaScript
1.JS的组成部分
2.JS引入
- 2.1 直接在head中通过一对script标签定义脚本代码
- 2.2创建JS函数池文件，所有html文件共享调用
3.JS的数据类型和运算符
4.分支结构
5.循环结构
6.JS函数的声明
7.JS中自定义对象
8.JS_JSON在客户端使用
- 8.1JSON串格式
- 8.2JSON在前端格式转化
9.JS事件
- 9.1常见事件
10.DOM编程实现事件绑定
11.BOM编程
12.DOM编程
- 12.1 DOM对象结构
- 12.2对元素进行操作
- 12.3 修改元素
Appendix

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文件共享调用，
当使用的适合，直接调用即可

一些注意的点

1	script标签要么就引入外部，要么使用内部，不要交叉使用
2	一个html文件可以多个script文件
3	script如果用于外部引入js文件，中间不要有任何内容
4	标签调用js函数时，括号不能省略

在这里插入图片描述

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(){}

1	没有修饰符
2	没有返回值类型,也没有void,如果要返回,直接return即可
3	没有异常列表
4	调用时候，形参和实参可以不一致，但是如果发生，按位进行处理，后续相当于没有调用
5	函数也可以作为一个方法传递给另外一个方法

在这里插入图片描述

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常见事件

–鼠标事件

属性	描述
用户点击某个对象	onclick
双击对象	ondbclick
鼠标指针移动目标上	onmouseenter

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

在这里插入图片描述

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

–键盘事件

事件	属性
键盘开启	onkeydown
键盘离开	onkeyup

–表单事件

事件	属性
获取焦点	onfocus
失去焦点	onblur
内容改变且失去焦点	onchange
表单提交	onsubmit
选取文本触发	onselect
事件执行完执行脚本	onload

小结：事件可以通过用户行为，直接拿到其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对象的属性

location	地址栏
history	地址栏左边
document	表浏览器html文件
console	表示控制台
screen	屏幕
navigator	表示浏览器软件本身
sessionStorage	表示会话及存储
localStorage	长久存储

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又具有不同的属性如下

element	标签
attribute	属性
text	双标签中间的文字

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.弹窗的三种方式

alert	消息提示框
prompt	信息输入框+提示
confirm	信息确认框

在这里插入图片描述

9.常见错误：

引入js函数未带小括号

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

在这里插入图片描述

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

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

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

键，必须是String类型

值，任意类型

存储位置如下

在这里插入图片描述

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

dom编程中，根据所有父元素获取所有子元素，那个childern 没有括号，其不是方法，只是父类的一个属性
```
var div01 = doc.getElementById("div01")var childrens =  div01.childrenfor(idx in childrens){console.log(value[idx])}
```

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