学习目标:
1.能够说出JavaScript 是什么
2.能够说出浏览器执行JavaScript的原理
3.能够说出JavaScript由哪三部分组成
4.能够写出JavaScript三个输入输出语句
5.能够说出变量的主要作用
6.能够写出变量的初始化、变量的命名规范和交换变量案例
7.能够画出变量是如何在内存中存储的
学习内容:
一 初识JavaScript
1.什么是JavaScript
- JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)
- 脚本语言:不需要注释,运行过程中由js解释器(js引擎)逐行来进行解释并执行。
- 现在也可以基于Node.js技术进行服务器端编程。
2.JavaScript的作用
表单动态校验(密码强度检测)(JS产生最初的目的)
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)
3.HTML/CSS/JS关系
HTML/CSS标记语言-描述类语言
HTML决定网页结构和内容(决定看到什么),相当于人的身体。
CSS决定网页呈现给用户的模样(决定好不好看),相当于给人穿衣服,化妆。
JS脚本语言-编程类语言
实现业务逻辑和页面控制(决定功能),相当于人的各种动作。
4.浏览器执行JS简介
浏览器分为两部分 渲染引擎和JS引擎
渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit。
JS引擎:也俗称为JS解释器,用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的VB。
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。
5.JS组成
JavaScript 由ECMAScript、DOM(页面文档对象模型)和BOM(浏览器对象模型)组成。
ECMScript
ECMScript:ECMScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业化标准。
DOM――文档对象模型
文档对象模型(Document Object Model简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)
BOM――浏览器对象模型
BOM(Browser Object Model,简称BCM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构,通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
6 JS书写位置
JS有三种书写位置,分别为行内、内嵌和外部。
(1)行内式JS
1.可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如:onclick
2.注意单双引号的作用:在HTML中我们推荐使用双引号,js中我们推荐使用单引号。
3.可读性差,在html中编写JS大量代码时,不方便阅读。
4.引号易错,引号多层嵌套匹配时,非常容易弄混。
5.特殊情况下使用
(2)内嵌JS
可以将多行JS代码写到<script>标签中
内嵌JS是学习时常用的方式
(3)外部JS文件
1.利用HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
2.引用外部JS文件的script标签中间不可以写代码
3.适用于JS代码量比较大的情况
三种形式代码如下
7 JS注释
8 JS输入输出语句
二 变量
1变量概述
变量是用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改。
2 变量在内存中的存储
本质:变量是程序中申请的一块用来存放数据的空间。
3 变量使用
变量在使用时分为两步1.声明变量2赋值
(1)声明变量
1.var是一个JS关键字,用来声明变量(variable变量的意思)。使用该关键字声明变量后,计算机会自动为为变量分配内存空间
2.age是程序员定义的变量名,我们要通过变量名来访问内存中的分配的空间。
(2)赋值
(3)变量的初始化
声明一个变量并赋值,我们称之为变量的初始化。
4 变量语法扩展
(1)更新变量
一个变量被重新赋值后,它原有的值就会被覆盖,变量值将最后一次赋值为准。
(2)同时声明多个变量
同时声明多个变量时,只需要写一个var,多个变量名之间使用英文逗号隔开。
(3)声明变量特殊情况
5 变量命名规范
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成,如ustAge,num01,_name
- 严格区分大小写。var app;和var App;是两个变量。
- 不能以数字开头。18age是错误的
- 不能是关键字、保留字。例如:var、for、while
- 变量名必须要有意义。MMD BBD
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName
- 推荐翻译网站:有道 爱词霸
6 变量交换案例
三 数据类型
1.变量的数据类型
变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。
在代码运行时,变量的数据类型是由JS引擎 根据=右边变量值的数据类型来判断的,运行完毕后,变量值就确定了数据类型。
JavaScript拥有动态类型,同时也意味着相同的变量可用作不同的类型:
2.数据类型的分类(基本数据类型)
JavaScript中的简单数据类型及其说明如下:
2.1数字型Number
JavaScript数字类型既可以用来保存整数值,也可以保存小数点(浮点数)。
JavaScript中数值的最大值和最小值
最大值:Number.Max_VALUE,这个值为:1.7976931348623157e+308
最小值:Number.Max_VALUE,这个值为:5e-32
2.2数字型三个特殊值
Infinity,代表无穷大,大于任何数值。
- Infinity,代表无穷小,小于任何数值
NaNcy,Not a number,代表一个非数值
2.3 isNaN()
这个方法用来判断非数字,并且返回一个值,如果是数字返回的是false,如果不是数字返回的是true.
3.字符串型String
字符串型可以是引号中的任意文本,其语法为“双引号”和“单引号”
因为HTML标签里面的属性使用的是双引号,JS这里我们更推荐使用单引号。
3.1字符串引号嵌套
JS可以用单引号嵌套双引号,或者双引号嵌套单引号(外双内单,外单内双)
3.2 字符串转义符
类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。
转义符都是\开头,常用的转义符及其说明如下:
3.3字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度,通过字符串的length属性可以获取整个字符串的长度。
3.4 字符串拼接
(1)多个字符串之间可以使用+进行拼接,其拼接方式为字符串+任何类型=拼接之后的新字符串
(2)拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
+号总结口诀:数值相加,字符相连
字符串拼接加强
1.我们经常会将字符串和变量来拼接,因为变量可以很方面地修改里面的值
2.变量是不能添加引号的,因为加引号的变量会变成字符串
3.如果变量两侧都有字符串拼接,口诀“引引加加”,删掉数字,变量写加中间
3.5布尔型Boolean
布尔类型有两个值:true和false,其中true表示真(对),而false表示假(错)。
布尔型和数字型相加的时候,true的值为1,false的值为0。
3.6 Undefined 和Null
一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时,注意结果)
一个声明变量给null值,里面存放为空。