今日内容

零、 复习昨日

CSS

• 美化,复用,样式文件和表现文件分离便于维护

• 选择器 {属性:值;…}

• 引入css

  • 内联
  • 文件内部使用style标签
  • 外部文件

• 选择器

  • 基本
    • id
    • class
    • 标签名
  • 属性 标签名[属性=‘值’]
  • 伪元素 a:link a:hover a:active a:visited
  • 层级(父子) 父选择器 子选择器
  • 平级(兄弟) 兄弟选择器1,兄弟选择器2

• 属性

  • font-size font-weight
  • text-align
  • text-xxx
  • color
  • background-
  • width height
  • display: none(隐藏) block(块) inline(行内块)
  • position: relative absolute fixed

一、引言

1.1 JavaScript简介

• JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
• 它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

---

动起来

1.2 JavaScript组成部分

• ECMAScript语法

• 文档对象模型（DOM Document Object Model）

• 浏览器对象模型(BOM Browser Object Model)

1.3 JavaScript发展史

• 它是由Netscape公司的Brendan Eich用10天设计出来一门脚本语言，JavaScript是甲骨文公司的注册商标。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
• Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。两者都属于ECMAScript的实现，为了互用性，ECAM（欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。ECMAScript最新版本是2015发布的 ECMAScript 6（ES6）。

二 JS的引入

2.1 在标签内写js

  按钮

2.2 在文件使用

2.3 独立的js文件

1 创建一个后缀为.js的文件

2 文件内写js代码

3 在html文件内使用

三 JavaScript基本语法

3.1 变量

• 在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。
• var是声明关键字，a是变量名，语句以分号结尾(其实可有可无)。
• 这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中你不可以写"int int=1;"一样。

var a;

JavaScript的部分关键字：

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。

JavaScript是弱类型语言,声明时不需要设置变量的类型,赋值时就可以赋值任何类型

JSON 用于前后端jiao

3.2 基本数据类型

基本类型有五种

• 数字(number)
• 字符串(string)
• 布尔型(boolean)
• 未定义(undefined)
• 空(null)

变量有不同的类型,不同类型使用的作用不一样

• number类型,数字,那就可以做算术,逻辑运算等 (后续运算时使用)

• boolean类型,那就可以用于逻辑判断,分支语句,循环等 (后续分支循环时使用)

• string类型,那就可以使用字符串的方法,对字符串操作(跟java中String操作很像)

  完整的string操作,可以查看APIJavaScript 字符串方法 (w3school.com.cn)

      var y = "Java-Script"; // string类型var j = y.charAt(0); // 根据下标找字符console.log(j);console.log(y.indexOf("a")); // 找到第一个指定字符的下标console.log(y.lastIndexOf("a")); // 找到最后一个指定字符的下标console.log(y.split("-")); // 根据指定字符,拆分字符串,返回字符串数组console.log(y.substring(5)); // 根据指定截取字符串,直到末尾console.log(y.substring(5, 8)); // 根据指定下标截取字符串,[begin,end)// length不是方法,是属性,调用时不用()console.log(y.length); // 获得字符串长度

3.3 引用类型

其实引用类型是借鉴Java中的对象的思想.

JS中的引用类型其实就是JSON,全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。

语法格式

• JSON对象使用大括号,{}
• 大括号内,是键值对,键值对使用是冒号分割.{key:value}
• 键正常写,值得写法区分数字,字符串,布尔值,数组,对象等
  • {id:18} 数字直接写
  • {name:“张三”} 字符串需要双引号
  • {sex:true} 布尔值直接写
  • {arr:[1,2,3]} 数组使用[]
  • {obj:{}} 对象使用{}
• 大括号内,可以同时写多个键值对,中间使用逗号隔开
  • {id:18,name:“李四”,sex:true}

      // json对象,引用类型var student = {id: 1,name: "小胡",sex: true,age: 18,score: [98, 99, 100],teacher: {id: 2,name: "邱哥",age: 18,},};// 取出对象的属性值// 对象.属性 其实是对象.keyconsole.log(student.id);console.log(student.name);console.log(student.sex);console.log(student.age);console.log(student.score);console.log(student.teacher);console.log(student.teacher.name);

3.4 数组类型

数组是用来存储多个数据

• 创建时可以是空数组,后面也可以继续赋值
• 数组没有长度限制
• 数组存储的类型没有限制

---

创建数组的语法

• var 名字 = []
• var 名字 = new Array()

取值赋值的语法

• 数组名[下标]

除了以上基本数组操作之外,JS的数组还有一些方法可以调用

详细可以参考文档JavaScript 数组方法 (w3school.com.cn)

3.5 日期类型

创建日期对象,

日期对象提供了方法可以获得/设置日期信息

详细信息查看文档JavaScript 日期 (w3school.com.cn),JavaScript 日期获取方法 (w3school.com.cn),JavaScript 日期设置方法 (w3school.com.cn)

3.6 运算符

算术运算

关系运算

逻辑运算

三目运算

---

以上这些运算操作,与java中操作基本一样

算术运算

if(0) = false

fi(非0) = ture

非0即对

名称	运算符
加	+
减	-
乘	*
除	/
求余	%
赋值	=
加等	+=
减等	-=
除等	/=
乘等	*=
求余等	%=
自增	++
自减	–

关系运算

名称	运算符
等于	==
小于	<
小于或等于	<=
大于	>
大于或等于	>=
不等于	!=
值和类型相同	===

逻辑运算

名称	运算符	描述
与	&&	要求表达式左右两边的表达式同为true，整体结果才为true
或	||	要求表达式左右两边的表达式只要有一个为true，整体结果就为true
非	！	将布尔值取反操作

三目运算

3.7 分支

• if
• if-else
• if-elseif-elseif-else
• switch

3.8 循环

• while
• dowhile
• for

3.9 函数(重点)

函数就是java中方法的概念,用来完成某些功能的.

---

定义函数的语法

function 函数名(参数1,参数2,...) {
// 执行代码
}
/*
1. function是固定,每个方法都需要设置
2. 没有定义返回值类型,也没有void
3. 函数名,见名知意
4. 参数直接写参数名,没有 数据类型,也没有var
5. 如果要返回数据,通过return 值;返回
*/

特殊的函数定义:匿名函数

      // 5 匿名函数,主要用于配合事件操作var obj = function () {console.log("匿名函数");};

四、常见的弹窗函数

4.1 警告框

4.2 确认框

4.3 输入框