js（基础语法）

今天开始一起学习前端吧！坚持就是胜利哦，遇到的问题可以评论区或者私聊解决。目标里面都是重点哦
（针对于有css基础的童鞋，零基础可以私聊我）

■ 本周目标

1 变量

2 判断

3 循环

4/5 函数

#■ 教学目标

能够说出JS是什么&后期作用

能够说出JS组成部分

能够说出JS三种实现方式

能够说出JS注释语法

能够说出JS变量命名规则和规范

能够说出JS数据类型

能够说出JS数据类型判断&转换

一、JS简介

是什么

JS是英文javascript的缩写，

它是基于客户端的语言

多学一招

客户端：就是你的电脑，客户端浏览器、客户端微信

服务端：为用户提供服务的电脑，一般在机房 举例微信服务端/机房

能干吗

• 单独分析

HTML   结构 相当于 地基
CSS    装修  
JS     行为 加特效

• DIVCSS合并作用 ： 用来写网页，例如淘宝、京东
• JS实战应用 ：用于实现网页特效&交互

1. 常见的网页效果【表单验证，轮播图。。。http://www.jq22.com/】
2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现统计效果（可视化）【http://echarts.baidu.com/examples/】
5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
6. 在线学编程【https://codecombat.163.com/play/】
7. js可以实现人工智能【面部识别】
8. 。。。

如何用

• css在html中写style标签
• js在html中写script标签

发展历史（了解）

1995年05月，美国网景（Netscape）公司雇佣程序员Brendan Eich开发（初名Mocha->更名LiveScript）
1995年12月，Netscape公司与Sun公司联合开发（JavaScript语言->简称JS语言）

1996年xx月，微软模仿开发JScript。网景公司面临丧失浏览器脚本语言的主导权，同年网景公司决定将
            JavaScript提交给国际标准化组织ECMA，望JavaScript能够成为国际标准，以此抵抗微软

1997年07月，ECMA组织发布ECMAScript 1.0版（改名目的：体现这个标准是由国际标准化组织ECMA制定）
1998年06月，ECMAScript 2.0 版发布。
1999年12月，ECMAScript 3.0 版发布，成为JavaScript的通行标准，得到了广泛支持。
2007年10月，ECMAScript 4.0 版草案发布
2008年07月，ECMAScript 4.0 中止开发（由于对3.0版做了大幅升级，产生争议）
2009年12月，ECMAScript 5.0 版发布
2011年06月，ECMAscript 5.1 版发布
2013年03月，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript 7。
2013年12月，ECMAScript 6 草案发布。然后是 12 个月的讨论期，听取各方反馈。
2015年06月，ECMAScript 6 正式通过，成为国际标准。从 2000 年算起，这时已经过去了 15 年。
-----------------------------------------------------------------------------------
1997年（es1） 
1998年（es2） 
1999年（es3）
2007年（es4草案  Yahoo、Microsoft、Google反对大幅升级）
2008年（es4中止  功能改善es3发布es3.1）
2009年（es5发布  es3.1基础上升级）
2011年（es5.1）
...
2015年（es6	单独一天讲  重大更新项目很多地方要用）
后续   (ES7、ES8、ES9、ES10   扩展补充有利于面试)

组成!!!

JS三个部分

ECMA：标准/规则，规定了JS基础语法怎么写

DOM：让js有能力操作网页

BOM：让js有能力操作浏览器

小总结

是什么：英文javascript缩写、基于客户端语言

能干吗： 用户实现网页特效交互，举例表单验证、轮播图、返回顶部、地区三级联动等等

去哪下：直接在html文件中写script标签

组成： ECMA、DOM、BOM

发展史：

最初  网景    		LiveScript
接着  和sun合作	   JavaScript
后来  微软自己造     JScript

最终  欧洲计算机制造商协会 简称ECMA  指定统一标准  ECMAScript   ES1.0

ECMAScript   ES5
ECMAScript   ES6     2015年6月
		     ES7、ES8、ES9、ES10   新增语法

二、初体验

• 需求：通过js操作浏览器，实现弹框提示功能（BOM）
• 语法：alert(“提示信息”) // 现在统一加引号，下午告诉你什么时候可以不加引号
• 代码

<script>
// 需求：弹出666

alert("666")
alert("神龙教主 洪福齐天 寿与天齐 一统QF")
</script>

三、JS代码的书写位置

语法

复习CSS的

内嵌  style
外嵌  link 
行内  style=""
导入  @import    (之前不用，现在还是用的)

内嵌（学习）：

<script>
	// 写JS代码，
</script>

外嵌（工作）：

语法：<script src="路径及文件名.js"></script>
留肾：当你外嵌引入，标签就【不行】再写js代码了

行内（不推荐）：

<标签名 onclick="JS代码"></标签名>

需求

内嵌：弹出迪丽热巴

外嵌：弹出马东锡

行内：弹出千锋刘德华

练习

<!-- 
内嵌：弹出迪丽热巴
外嵌：弹出马东锡
行内：弹出刘德华   （留心：需要自己点击

注意：
1 在js或html 单双引号没有区别
2 但是不能相互嵌套
-->

<script>
alert("迪丽热巴")
</script>

<script src="./test.js"></script>

<b onclick="alert('刘德华')">
    点我
</b>

四、注释

明确需求

思考：实战一个人开发还是多人？

回答：多人

---

明确需求：为了便于多人协作开发，加快开发速度，增加代码可读性，要养成写注释的习惯。

语法

复习HTML：

单行注释： // 内容

多行注释： /* 内容 */

练习

<script>
// 哈哈 注释了    快捷键 ctrl + /


/* 
多行注释
多行注释
多行注释 

1 选内容
2 ctrl + shift + /
*/
</script>

小总结

HTML注释 1：

CSS注释 1： /* 内容 */

JS注释 2

单行    //   内容       ctrl + /
多行    /*  内容  */    ctrl + shift + /

五、变量!!!

明确需求

​ 在生活中（物品）：通过【仓库】来永久存放数据

在计算机中（订单、聊天记录）：通过【数据库】永久存放（sqlserver、mysql、db2等等 文件

在计算机中（在线状态、购物车总价：通过【变量】来临时存放数据、网页关闭销毁 内存

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jfXMsNvC-1623148698647)(images/1591583108664.png)]

语法

常用语法：var 变量名 = 变量值;

脚下留心：

1 var后面必须空格
2 变量名不能使用系统关键词，举例alert
3 分号代表语法结束，可写可不写，不写必须占一行    alert("")；alert("")

需求

语法练习：声明name变量 存放 迪丽热巴，并弹出

语法练习：声明age和money变量 存放 666 ，并弹出（常用&周边语法实现）

案例练习：为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？

练习

<script>
// 语法练习：声明name变量 存放 迪丽热巴，并弹出
// 语法练习：声明age和money变量 存放 666 ，并弹出（常用&周边语法实现）
// 案例练习：为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？



// 语法练习：声明name变量 存放 迪丽热巴，并弹出
var name = "迪丽热巴"
// alert("name")  
// 发现：输出的是name
// 但是：需求输出临时变量中的值
// 因此：这个地方去掉引号
// 但是：大家会有强烈的疑惑 到底什么时候加  欲知详情 下午分解
alert(name)

// 语法练习：声明age和money变量 存放 666 ，并弹出（常用&周边语法实现）
var age = "666"
var money = "666"
alert(age)
alert(money)

// 案例练习：为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
// 数学 ：  89 除以 24  = ？？
// 现在： 变量名 = 代码
var time = 89 / 24 
alert(time) // 3.7....
</script>

其他：周边语法

周边语法（一次性声明多个 ）

var 变量名=值,…,变量名=值 // 值可不同

var 变量名=…=变量名=值 // 值相同

周边语法（先定义后赋值 ）

var 变量名,…,变量名

变量名 = 值

…

变量名 = 值

var 变量名

变量名 = 值

练习

<script>
// 需求：一次性声明多个变量
// 分别：a 1 b 2 c 3
// var a=1,b=2,c=3
// alert(a)
// alert(b)
// alert(c)

// 需求：一次性定义多个但复制
var a,b,c
// var a,b,c = 666
// var a=b=c = 666
a=6
b=7
c=8
alert(a)
alert(b)
alert(c)
</script>

##其他：变量名的命名规则&规范

• 命名规则（必须遵守的，不遵守就是错）

1 变量名可以是英文、数字、下划线，但首字母不能是数字
2 js变量严格区分大小写
3 别去使用系统关键字   var、alert等

• 命名规范（统一开发规范，便于协作开发，不遵守不会报错）

大驼峰			CreateOrder     UpdateUsername
小驼峰（推荐    createOrder     updateUsername
下划线			create_order    update_username

留心：当变量名是多个单词使用
举例：create order 、 update username

小总结

什么是变量：用来临时存放网页数据

变量声明语法：var 变量名 = 变量值

周边语法

##一次性声明多个变量
	var 变量名=值，....，变量名=值
	var 变量名=....=变量名=值

##先声明再赋值
	var 变量名
	变量名=值
	
	var 变量名,....,变量名
	变量名=值
	...
	变量名=值

变量名的命名规则&规范

###规则
	1. 变量名只能是英文、数字、下划线、但首字母不能是数字
	2. 变量名严格区分大小写
	3. 不能是系统关键字

###规范：肯定是多个单词
	大驼峰：所有单词首字母大写
	小驼峰：第一个单词首字母小写，其他都是大写
	下划线：多个单词通过下划线隔开

六、数据类型!!!

明确需求

​ 在生活中【仓库】存放的商品分：易燃、易爆（n种分类

在计算机中【变量】数据类型通常分为两大类：基本类型、复杂/复合类型

基本数据类型

• 种类

数字 11 15 11.5  数值型
""/''           字符串
true、false     布尔型（ 1或以上 - 真true，false/0/undefined/null/'' - 假false
undefined       未定义（比如你创建了一个变量未定义值
null			空值

• 练习

需求：定义n个变量，赋值上述类型

代码：

<script>
// 创建字符串类型的变量
var a = "算计666"
var b = "555"

// 创建布尔类型的变量
var c = true

// 创建undefined和null类型的变量
var d = undefined
var dd
var e = null

// 留心：
// 思考：undefined和null区别
// 回答：
// undefined 有仓库 没放过值。 声明变量后期使用
// null  有仓库 清空了值。  清空变量里面数据
</script>

复杂数据类型（后面讲）

1. 对象类型（object）
2. 函数类型（function）
3. 。。。

思考：加引号问题

名词：字符、字符串

  字符：中文、英文、数字、下划线等 任意一个 称之为 一个字符
字符串：多个字符的集合

回答：变量 或 纯数字 或 布尔不加、其他都加，否则报错

思考：下述内容通过alert弹出时是否需要加引号？

var a= 你好中国       （ 加 ） 
var b= h6666  	     （ 加 ） 
var c= 7777		     （ 不加 ） 
var d= 999a			 （ 加 ） 
var e = 7777		  弹出变量e    alert(e) （ 不加 ）
var f = 'this is b'   弹出变量f	   alert(f) （ 不加 ）

思考：如果变量或纯数字以外的 没加 会怎么样？
数据：你好中国、alert(你好中国)
结果：语法错误

小总结

JS数据类型分几大种：2种 基本、复杂

基本类型（五个）：数值型、字符串、布尔型、undefined、null

复杂数据类型：后面单独一天讲

引号该不该加：变量、数字、布尔

七、数据类型-判断

明确需求

​ 在生活中：要判断仓库里面的商品是什么类型，例如固体、液体从而放到不同的仓库或架子上。

在计算机中：要判断变量是什么类型，从而实现不同操作

思考：计算机中如何判断变量的类型呢？

typeof（判断数据类型）

• 语法1：typeof 变量名 推荐
• 语法2：typeof（变量名）
• 返回值：

boolean   布尔型（bool
string    字符串（str
number    数值型（num
undefined 未定义
其他结果后面学
object    对象（留心：null比较特殊  
function  函数

• 练习：

<script>
// 分别创建字符串、布尔、数值、undefined、null五种类型变量
var a = "小王"
var b = true
var c = 434
var d
var e = null

// 打印类型
alert(typeof a)  // string
alert(typeof b)  // bool
alert(typeof c)  // num
alert(typeof d)  // undefined
alert(typeof(e)) // obj
</script>

isNaN（判断变量是不是非数字）

• 说明isNaN ：is not a number
• 语法：isNaN(变量名或内容)
• 返回：true - 不是数字 、false - 是数字
• 留心：只要是数字就行 包括字符串数字
• 练习：

<script>
// 创建num1、num2、str
var num1 = 11
var num2 = 22
var str = "11"   
var str2 = "11a"

// 判断
alert(isNaN(num1))  // false 是数字
alert(isNaN(num2))  // false
alert(isNaN(str))   // false
alert(isNaN(str2))  // true
</script>

八、数据类型-转换!!!

明确需求

• 数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等

脚下留心（经验谈）：所有来源于页面的数据都是字符串 “4”

举个栗子：上图中的数字4 通过js获取之后，是字符串我们得转换为数值型 来统计总价格

var temp = 4 + 1 // 输出 5

var temp2 = 4 + “1” // 41

语法

• 转为数值型

Number(变量名或内容)     返回：数值型 或 NaN  （非数字
parseInt(变量名或内容)     返回：整数 或者 NaN
parseFloat(变量名或内容)   返回：小数 或  NaN

思考：Number、parseInt、parseFloat区别？
回答：
1 Number = parseInt + parseFloat
2 Number只要有一个字符不是数字就返回NaN、parse** 保留左边的数字

• 转为字符串型（略）

• 转为布尔型（略）

练习

• 语法练习

<script>
// 创建一个字符串类型的变量 内容666
// var str = "666"
// var str2 = Number(str)
// var str3 = parseInt(str)
// var str4 = parseFloat(str)
// alert(typeof str)  // string
// alert(typeof str2) // number
// alert(typeof str3) // number
// alert(typeof str4) // number

// 1 Number = parseInt + parseFloat

// alert(Number("111"))        // 111
// alert(Number("111.11"))     // 111.11
// alert(parseInt("111"))      // 111
// alert(parseInt("111.11"))    // 111  只保留整数
// alert(parseFloat("111"))     // 111
// alert(parseFloat("111.11"))  // 111.11  

// 2 Number只要有一个字符不是数字就返回NaN、parse** 保留左边的数字

// alert(Number("111"))   // 111
// alert(Number("a111"))  // NaN   非数字
// alert(Number("111a"))  // NaN   非数字

// alert(parseInt("111"))   // 111
// alert(parseInt("a111"))  // NaN
// alert(parseInt("111a"))  // 111
// alert(parseInt("11a1"))  // 11
// alert(parseInt("111.11"))  // 111

alert(parseFloat("111"))   // 111
alert(parseFloat("a111"))  // NaN
alert(parseFloat("111a"))  // 111
alert(parseFloat("11a1"))  // 11
// alert(parseInt("111.11"))  // 111.11
</script>

• 实际案例

2．小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
提示：摄氏度与芈氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)保留3位小数



<script>
// 明确：数据类型 咱们常用与将字符串 转换为 数值型
// 其次：下面这个案例 仅仅是让你  活学活用而已

// 2．小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
// 它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
// 提示：摄氏度与芈氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)保留3位小数

// 保留3位小数
// var 变量名  = 5/9.0*(华氏度-32)

// var temp  = 5/9.0*(66-32)
// alert(temp)  // 18.88888888888889
//              // 18.88888888888889 * 1000 = 18888.88888888889
//              // parseInt(18888.88888888889) = 18888
//              // 18888 / 1000 = 18.888

var temp  = 5/9.0*(66-32)
// 乘 1000   18888.88888888889
temp = temp * 1000
// 取整      18888
temp = parseInt(temp)
// 除 1000   18.888
alert(temp / 1000)
</script>

小总结

明确：后面写项目经常需要将字符串转换为数值型

语法

Number(变量或内容)
parseInt(变量或内容)
parseFloat(变量或内容)

区别1：Number = parseInt + parseFloat
区别2：Number只要有一个不是数字就NaN、parse**保留左边的数字

■ 复习

见.xmind

■ 作业

• 代码题

计算两个文本框的加减乘除

<input type="text" value="" id="first">
<select name="" id="">
 <option value="">+</option>
 <option value="">-</option>
 <option value="">*</option>
 <option value="">/</option>
</select>
<input type="text" value="" id="two">
<button id="btn">=</button>
<input type="text" value="" id="three">

<script>
// 点击一下执行代码    id属性值.onclick = function() { // 代码 }
// 获取input框数据     id属性值.value
// 设置input框属性    id属性值.value = 数据
// 留心：变量名不能和网页中的ID属性值一样

btn.onclick = function() {
 // alert(111)
 // 1. 获取第一个input框值   
 var val1 = parseInt(first.value)
 // 2. 获取第二个input框值
 var val2 = parseInt(two.value)
 // 3. 1和2 产出结果
 var val3 = val1 * val2
 // 4. 将3结果 放到 第三个input框中
 three.value = val3
}
</script>

• 非代码题目

1将课件一级标题需求练习至少敲三遍
2通过有道云笔记或word文档根据自己的理解整理学习笔记（晚整理，睡回忆，早读）
3预习明天课程内容
4晚自习下课前10分钟 小组成员相互提问 今日教学目标