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分钟 小组成员相互提问 今日教学目标

上一篇:HTML中 JS 实现时间倒计时、自定义时间


下一篇:leetcode——整数反转