javaweb学习笔记（8.10）

一、JS

1.1JS简介

Web标准：由3WC制订

三个组成部分：

HTML---》网页的基础结构

CSS---》网页的表现效果

JavaScript---》网页的行为

简介：JS是一门跨平台、面向对象的脚本语言。用来控制网页行为的，使网页交互。

1.2JS的引入

1、内部脚本：

Js代码必须位于<script></script>标签之间
在HTML文档中，在任意地方，放置任意数量的<script>
一般会把脚本放在<body>元素底部，改善显示速度

<script>alert("Hello World")
</script>

2、外部脚本

外部JS文件中，只包含JS代码，不包含<script>标签
<script>标签不能自闭合

1.3JS基础语法

书写语法

区分大小写
每行结尾分号可有可无
注释：
- 单行注释：//注释内容
- 多行注释：/*注释内容*/
大括号：表示代码块

if(count==3){alert("Hello");
}

输出语句

使用window.alert()写入警告框
使用document.write（）写入HTML输出
使用console.log（）写入浏览器控制台

  <script>window.alert("Hello alert");/* 弹出警告栏 */document.write("Hello write");/* 浏览器展示 */console.log("Hello log ");/* 写入控制台 */</script>

运行结果：

变量

使用var关键字声明变量（*JS是弱类型语言，变量可以存放不同类型的值）

var声明变量特点：

作用域大，是全局变量
可以重复定义

var a=20;
a="张三";

let声明变量特点：

只在let关键字所在代码块内有效且不允许重复声明

 <script>{let x=1;/*  let x=2; */alert(x);}alert(x);</script>

当写第二个 let x时vscode将报错，运行后不显示相应弹窗警告栏

const声明变量特点：

声明的为只读变量
一旦声明，常量的值无法改变

   <script>{const aa=1;/* aa=2;*/alert(aa);}</script>

写第二个aa的赋值运算时不报错，但不会出现弹窗警告栏

变量名规则：

字符由任何字母、数字、下划线、美元符号组成
数字不能开头
使用驼峰命名法(类似于：FindRoot..)

数据类型

JS中数据类型有：原始类型 和 引用类型

*使用 typeof 运算符可以获取数据类型

运算符

===全等运算符

==和===的区别

类型转换：

1、字符串转为数字

  <script>alert(parseInt("12"));//12alert(parseInt("12A45"));//12alert(parseInt("A45"));//NaN</script>

2、其他类型转为boolean

Number：0和NaN为false，其余转为true
String：空字符串转为false，其余转为true
Null和undefi：转为false

流程控制语句

1.4函数

简介：函数是被设计为执行特定任务的代码块

介绍：JS通过function关键字定义函数，语法：

function functionName（参数1，参数2...）{//代码块
}

*注意：

形参不需要类型（JS是弱类型语言）

返回值不需要定义类型，在函数内部直接使用return返回即可

定义方式一：

function functionName(a,b...){return a+b;
}

定义方式二：

var functionName=function (a,b...){return a+b;
}

调用方法：

functionName(a,b...);

1.5JS对象

Array数组

定义方式一：

var 变量名=new Array（元素列表）；

var arr=new Array(1,2,3,4);

定义方式二：

var 变量名=[元素列表]；

var arr=[1,2,3,4];

访问方式：

arr[索引]=值；

arr[10]="hello";

特点：

长度可变
类型可变

属性：

length：设置或返回数组中的元素数量

方法：

forEach（）：遍历数组中的每个有值的元素，并调用一次传入的函数

arr.forEach(function(e){console.log(e);
})

箭头函数 =>

arr.forEach((e)=>{console.log(e);
})

push（）：将新元素添加到数组的末尾，并返回新的长度
splice（）：从数组中删除元素

arr.splice(a,b);//从位置a开始删除b个元素

String字符串

创建方式一：var 变量名=new String （"...");

创建方式二：var 变量名="...";

属性：

length：字符串的长度

方法：

charAt（）：返回在指定位置的字符
indexOf（）：检索字符串
trim（）：去除字符串两边的空格
substring（）：提取字符串中两个指定的索引号之间的字符。（含头不含尾）

JSON

定义格式：

var 对象名={

属性名1：属性值1；

属性名2：属性值2；

属性名3：属性值3；

属性名称：function（形参列表）{}

}；

var user={name="Tom",age=10,//逗号分隔eat:function(){alert("吃饭”）；}//简化eat函数eat(){alert("吃饭”）；}
}；

调用格式：

对象名.属性名；

console.log(user.name);

对象名.函数名（）；

user.eat();

简介：

*所有的key都要用双引号括起来

定义：var 变量名=‘{"key1":value1,"key2":valuel2}';

 <script>var js='{"name":"Tom","age":18}';        var obj=JSON.parse(js);alert(obj.name);alert(JSON.stringify(js));</script>

BOM

概念：浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

Window

获取：window.alert（“Hello Window”）；alert（“Hello Window”）；

window可省略。

属性：

history：对History对象的只读引用。
location：用于窗口或框架的Location对象。
navigator：对Navigator对象的只读引用。

方法：

alert()：显示带有一段消息和一个确认按钮的警告框。
confirm（）：显示带有一段消息以及确认按钮和取消按钮的对话框。
setlnterval（）：按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout（）：在指定毫秒数后调用函数或表达式。

  <script>//获取window.alert("Hello");alert("Hello");//方法//confirm--确认：true    取消：falseconfirm("您确认删除吗？");//定时器var i=1;setInterval(function(){i++;console.log("定时器执行了"+i+"次");} ,2000);setTimeout(function(){alert("JS");},3000)</script>

Location

介绍：地址栏对象。

获取：window.location.属性；location.属性；

属性：

href：设置或返回完整的URL。

    <script>alert(location.href);location.href="https://www.csdn.net/";</script>

DOM

概念：文档对象模型

DOM结构（DOM树）

JavaScript通过Dom对HTML的操作：

改变HTML元素内容
改变HTML元素样式
对HTML事件作出反应
添加删除HTML元素

HTML中的Element对象可以通过Document对象获取，Document对象通过window对象获取

Document对象中获取Element元素对象函数：

根据id属性获取，返回单个Element对象

<script>var img=document.getElementById('h1');alert(img);</script>

根据标签名称获取，返回Element对象数组

<script>var divs=document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {alert(divs[i]);}</script>

根据name属性值获取，返回Element对象数组

<script>var ins=document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {alert(ins[i]);}</script>

根据class属性值获取，返回Element对象数组

<script>var ins=document.getElementsByClassName('cls');for (let i = 0; i < ins.length; i++) {alert(ins[i]);}</script>

获取并修改DOM元素对象

  <script>var ins=document.getElementsByClassName('cls');var div1=ins[0];div1.innerHTML="哈哈哈";</script>

1.6事件监听

事件：发生在HTML元素上的事情（按钮被点击、鼠标移动到元素、按下键盘按键）

事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

 function on(){alert("111被点击了")}

方式二：通过DOM元素属性绑定

 document.getElementById('btn2').onclick=function(){alert("222被点击了");}

一、JS

1.1JS简介

1.2JS的引入

1.3JS基础语法

书写语法

输出语句

变量

数据类型

运算符

流程控制语句

1.4函数

1.5JS对象

Array数组

String字符串

JSON

BOM

Window

Location

DOM

1.6事件监听

事件绑定

常见事件