JavaScript学习(循环/分支/数组)

浏览器执行JS简介

• 浏览器分成两部分：渲染引擎和JS引擎
• 渲染引擎： 用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
• JS引擎： 也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8
• 浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语毒），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行

JS组成

• ECMScript js语法

ECMASeript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。

• DOM 页面文档对象类型

文档对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

• BOM 浏览器对象类型

BOM（BrowserObjectModel，简称BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS书写方式

行内式JS

语法格式：

<input type="button" value="唐伯虎点" onclick="alert('秋香')">

优缺点：

• 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如onclick
• 注意单双引号的使用：在HTML中我们推荐使用双引1号S中我们推荐使用单引1号
• 可读性差，在html中编写JS大量代码时，不方便阅读
• 引号易错，引号多层嵌套匹配时，非常容易弄混
• 特殊情况下使用

内嵌式

语法格式：

<script>
    // 通过alert来进行语句输出
    alert("刚开始学习JS 还是很懵逼的！！");
</script>

优缺点：

• 可以将多行JS代码写到<script>标签中
• 内嵌JS是学习时常用的方式

外部JS文件

语法格式：

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

优缺点：

• 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
• 引用外部JS文件的script标签中间不可以写代码
• 适合于JS代码量比较大的情况

JavaScript输入输出语句

方法	说明	归属
alert	浏览器弹出警示框	浏览器
console.log(msg)	浏览器的控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

变量

变量在使用时分为两步：

1. 声明变量

• 语法格式：

//声明变量
var age;//声明一个名称为age的变量
var age1, age2, ...;//这是代表集体声明
var age1 = age2 = age3 = 变量值;//这里指的是 第一个变量声明并赋值,其余的直接赋值       var age1 = 变量值; age2 = 变量值; age3 = 变量值

• var是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
• age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2. 赋值

• 语法格式：

age = 10;//给age这个变量赋值为10

• =用来把右边的值赋给左边的变量空间中此处代表赋值的意思
• 变量值是程序员保存到变量空间里的值

3. 更新变量

• 语法格式：

var age = 18;
age = 81 //最后的结果就是81因为18被覆盖掉了

一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

4. 多个声明

• 语法格式：

// 3.声明多个变量
var address = '欧呦',
    age = 18,
    zy = 'student';

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。

5. 变量声明的特殊情况

情况	说明	结果
var age;console.log (age);	只声明 不赋值	Undefined
console.log (age);	不声明 不赋值 直接使用	报错
age = 10;console.log (age);	不声明 直接赋值	10

6. 变量的命名规范

• 由字母（A-Za-z）、数字（0-9）、下划线（）、美元符号（$）组成，如：usrAge，numo1，name
• 严格区分大小写。var app和var App是两个变量
• 不能以数字开头。18age是错误的
• 不能是关键字、保留字。例如：var、for、while
• 变量名必须有意义。
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
• 推荐翻译网站：有道 爱词霸

数据类型

• 变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。Javascript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
• 举例：

//这是一个数字型
var age = 10;
Var
areYouoK = '是的';//这是一个字符串

• 在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定 了数据类型。
• JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型

var x = 6; //x为数值型
var x = 'bill'; //x为字符串型

数据类型的分类

JS把数据类型分为两大类：

• 简单数据类型（Number，string，Boolean，Undefined，Nu11）
• 复杂数据类型（object）

• JavaScript中的简单数据类型及其说明如下：

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于1和0	false
Sting	字符串类型，如“张三”注意咱们s里面，字符串都带引号	" "
Undefined	var a;声明了变量a但是没有给值，此时a=undefined	undefined
Null	var a=null;声明了变量a为空值	null

字符串型

1. 字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

2. 字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。转义符都是 \ 头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n是newline的意思
\ \	斜杠\
\ ’	'单引号
\ "	"双引号
\ t	tab缩进
\ b	空格 b是blank的意思

3. 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。

4. 字符串的拼接

• 多个字符串之间可以使用+进行拼接，其拼接方式为:字符串+任何类型=拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
• +号总结口诀：数值相加，字符相连

5. 获取变量的数据类型

• 采用typeof来获取变量的数据类型

var Name = '您好';
console.log(typeof Name); //string字符串型
var number = 100;
console.log(typeof number); //number
//prompt 取过来的值是：字符串型
var age = prompt('请输入您的年龄：');
alert('他的年龄是：' + age + '岁');
// 获取age变量的值
console.log('输入的值是：' + age);
// 获取用户输入的数据类型
console.log('输入的值是：' + typeof age + '数据类型');

6. 数据类型的转换

转换为字符串

方式	说明	案例
toString()	转换字符串	var num=1; console.log(num.toString());