1.简介
1.1.Javascript的作用
- 表单动态校验（密码强度检测）（ JS 产生最初的目的 ），刚开始是为了检测用户输入的密码用户名等是否复合规范，需要把数据传到后台服务器，这样会增加服务器的压力。所以为了在前端界面也就是客户端就实现用户名、密码的判断，发明了JS
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
1.2.Javascript的组成
- Javascript语法
- 页面文档对象模型(DOM):文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
- 浏览器对象模型：BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
1.3.Js的书写位置
1.3.1.行内式
<body>
<!-- 1. 行内式的js 直接写到元素的内部 -->
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>- 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
- 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
- 可读性差， 在html中编写JS大量代码时，不方便阅读；
- 引号易错，引号多层嵌套匹配时，非常容易弄混；
- 特殊情况下使用
1.3.2.内嵌式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 2.内嵌式的js -->
<script>
alert('沙漠骆驼');
</script>
</head>- 可以将多行JS代码写到 <script> 标签中
- 内嵌 JS 是学习时常用的方式
1.3.3.外部JS
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 3. 外部js script 双标签 -->
<script src="my.js"></script>
</head>新建一个my.js文件
alert('如果我是DJ，你还爱我吗？');- 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
- 引用外部 JS文件的 script 标签中间不可以写代码
- 适合于JS 代码量比较大的情况
1.3.4.JS注释
单行注释 ctrl + //
多行注释 默认的快捷键 shift + alt + a /*注释内容*/
多行注释 vscode 中修改多行注释的快捷键： ctrl + shift + /
1.3.5.JS输入输出语句
| 方法 | 说明 | 归属 |
| alert(msg) | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 这是一个输入框
prompt('请输入您的年龄');
// alert 弹出警示框 输出的 展示给用户的
alert('计算的结果是');
// console 控制台输出 给程序员测试用的
console.log('我是程序员能看到的');
</script>
</head>2.变量
2.1概述
本质：变量是程序在内存中申请的一块用来存放数据的空间
2.2变量的使用
2.2.1声明变量
// 声明变量
var age; // 声明一个 名称为age 的变量 - var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
- age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
2.2.2赋值
age = 10； //给age 这个变量赋值为10- =用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
- 变量值是程序员保存到变量空间的值
<script>
// 1. 声明了一个age 的变量
var age;
// 2. 赋值 把值存入这个变量中
age = 18;
// 3. 输出结果
console.log(age);
// 4. 变量的初始化
var myname = 'pink老师';
console.log(myname);
</script>案例一：
有个叫卡卡西的人在旅店登记的时候前台让他填一张表，这张表里的内容要存到电脑上，表中的内容有：姓名、年龄、邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下：我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是 kakaxi@itcast.cn，我的工资2000
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var myname = '旗木卡卡西';
var address = '火影村';
var age = 30;
var email = 'kakaxi@itcast.cn';
var gz = 2000;
console.log(myname);
console.log(address);
console.log(age);
console.log(email);
console.log(gz);
</script>
</head>案例二：
1、弹出一个输入框，提示用户输入姓名。
2、弹出一个对话框，输出用户刚才输入的姓名。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1. 用户输入姓名 存储到一个 myname的变量里面
var myname = prompt('请输入您的名字');
// 2. 输出这个用户名
alert(myname);
</script>
</head>2.3变量语法扩展
2.3.1更新变量
一个变量被重新赋值后，它原有的值会被覆盖，变量值将以最后一次赋的值为准
<script>
// 更新变量
var myname = 'pink老师';
console.log(myname);
myname = '迪丽热巴';
console.log(myname);
</script>2.3.2.同时声明多个变量
同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。
<script>
// 声明多个变量
// var age = 18;
// var address = '火影村';
// var gz = 2000;
var age = 18,
address = '火影村',
gz = 2000;
</script>2.3.3.声明变量特殊情况
| 情况 | 说明 | 结果 |
| var age;console.log (age); | 只声明，不赋值 | undefined |
| console.log(age); | 不声明 不赋值 直接使用 | 报错 |
| age = 10;console.log (age); | 不声明 只赋值 | 可以使用（会变成全局变量） |
<script>
// 声明变量的特殊情况
// 1 只声明不赋值 结果是？ 程序也不知道里面存的是啥 所以结果是 undefined 未定义的
var sex;
console.log(sex); // undefined
// 2 不声明 不赋值 直接使用某个变量会报错滴
// console.log(tel);
// 3 不声明直接赋值使用
qq = 110;
console.log(qq);
</script>2.4.变量命名规范
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)、组成，如：usrAge,num01,_name
- 严格区分大小写。var app;和var App；是两个变量
- 不能以数字开头。18age是错误的
- 不能是关键字，保留字。 例如：var、for、while
- 变量名必须有意义
- 遵循驼峰命名法。首字母小写，后面的首字母需要大写
<script>
var app = 10;
var App = 100;
console.log(app);
console.log(App);
// var 18age;
// var var; 因为var 有特殊意义了，这个叫做关键字 不能作为变量名的 for while if
// name 我们尽量不要直接使用name 作为变量名
// console.log(tel);
console.log(name);
</script>案例：交换两个变量值
-
需要一个临时变量 temp
-
把apple1 给我们的临时变量 temp
-
把apple2 里面的苹果给 apple1
-
把临时变量 temp 里面的值给apple2
<script>
var temp; // 声明了一个临时变量为空
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1; // 把右边给左边
apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);
</script>3.数据类型
- JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。使用typeof()判断数据类型
- 变量的数据类型根据=右边变量值的数据类型来判断的
- JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型
<script>
// int num = 10; java
// var num; // 这里的num 我们是不确定属于哪种数据类型的
var num = 10; // num 属于数字型
// js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
var str = 'pink'; // str 字符串型
// js是动态语言 变量的数据类型是可以变化的
var x = 10; // x 是数字型
x = 'pink'; // x 字符串型
</script>3.1数据类型的分类
- 简单数据类型 （Number,String,Boolean,Undefined,Null）
- 复杂数据类型 （object)
3.2简单数据类型（基本数据类型）
| 简单数据类型 | 说明 | 默认值 |
| Number | 数字型，包含整型值和浮点型值，如21、0.21 | 0 |
| Boolean | 布尔值类型，如true .false，等价于1和0 | false |
| String | 字符串类型，如"张三”注意咱们js里面,字符串都带引号 | "" |
| Undefined | var a;声明了变量a但是没有给值,此时a = undefined | undefined |
| Null | var a = null;声明了变量a为空值 | null |
3.2.1数字型Number
1.数字型进制
最常见的进制有二进制，八进制，十进制，十六进制
<script>
var num = 10; // num 数字型
var PI = 3.14 // PI 数字型
// 1. 八进制 0 ~ 7 我们程序里面数字前面加0 表示八进制
var num1 = 010;
console.log(num1); // 010 八进制 转换为 10进制 就是 8
var num2 = 012;
console.log(num2);
// 2. 十六进制 0 ~ 9 a ~ f #ffffff 数字的前面加 0x 表示十六进制
var num3 = 0x9;
console.log(num3);
var num4 = 0xa;
console.log(num4);
</script>2.数字型的范围
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32
<script>
// 数字型的最大值
console.log(Number.MAX_VALUE);
// 数字型的最小值
console.log(Number.MIN_VALUE);
</script>3.数字型的三个特殊值
Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值
<script>
// 无穷大
console.log(Number.MAX_VALUE * 2); // Infinity 无穷大
// 无穷小
console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
// 非数字
console.log('pink老师' - 100); // NaN
</script>4.isNaN()
用来判断一个变量是否为非数字的类型,如果变量是数字返回false，如果不是数字类型返回true。
<script>
// isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是true
console.log(isNaN(12)); // false
console.log(isNaN('pink老师')); // true
</script>3.2.2字符串型String
语法为双引号”“和单引号‘’，推荐使用单引号
1.字符串引号嵌套
外双内单，外单内双
<script>
// 'pink' 'pink老师' '12' 'true'
var str = '我是一个"高富帅"的程序员';
console.log(str);
var str1 = "我是一个'高富帅'的程序员";
console.log(str1);
</script>2.字符串转义符
| 转义符 | 解释说明 |
| \n | 换行符，n 是 newline 的意思 |
| \\ | 斜杠 \ |
| \' | 单引号 |
| \" | 双引号 |
| \t | tab缩进 |
| \b | 空格，b 是 blank 的意思 |
<script>
// 字符串转义字符 都是用 \ 开头 但是这些转义字符写道引号里面
var str1 = "我是一个'高富帅'的程序员";
console.log(str1);
</script>3.字符串长度以及拼接
.length属性显示长度，可以使用+号拼接（数值相加，字符相连）
<script>
// 1. 检测获取字符串的长度 length
var str = 'my name is andy';
console.log(str.length); // 15
// 2. 字符串的拼接 + 只要有字符串和其他类型相拼接 最终的结果是字符串类型
console.log('沙漠' + '骆驼'); // 字符串的 沙漠骆驼
console.log('pink老师' + 18); // 'pink老师18'
console.log('pink' + true); // pinktrue
console.log(12 + 12); // 24
console.log('12' + 12); // '1212'
</script>4.字符串拼接加强
<script>
console.log('pink老师' + 18); // pink老师18
console.log('pink老师' + 18 + '岁');//pink老师18岁
var age = 19;
console.log('pink老师age岁');//pink老师age岁
// 我们变量不要写到字符串里面，是通过和 字符串相连的方式实现的
console.log('pink老师' + age + '岁');//pink老师18岁
// 变量和字符串相连的口诀： 引引加加
console.log('pink老师' + age + '岁');
</script>- 变量不能添加引号
- 如果变量两侧都有字符串拼接，口诀“引引相加”，删掉数字，变量加中间
案例：显示年龄
案例分析：
交互编程三要素：用户输入，程序内部处理，输出结果
步骤：
- 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
- 把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
- 使用alert语句弹出警示框（输出结果）
<script>
var age = prompt('请输入您的年龄');
var str = '您今年已经' + age + '岁了';
alert(str);
</script>3.2.3布尔型Boolean
true为1（真），false为0（假）
<script>
var flag = true; // flag 布尔型
var flag1 = false; // flag1 布尔型
console.log(flag + 1); // true 参与加法运算当1来看
console.log(flag1 + 1); // false 参与加法运算当 0来看
</script>3.2.4Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
一个声明变量给 null 值，里面存的值为空
<script>
// 如果一个变量声明未赋值 就是 undefined 未定义数据类型
var str;
console.log(str);
var variable = undefined;
console.log(variable + 'pink'); // undefinedpink
console.log(variable + 1); // NaN undefined 和数字相加 最后的结果是 NaN
// null 空值
var space = null;
console.log(space + 'pink'); // nullpink
console.log(space + 1); // 1
</script>3.3获取变量数据类型
3.3.1
<script>
var num = 10;
console.log(typeof num); // number
var str = 'pink';
console.log(typeof str); // string
var flag = true;
console.log(typeof flag); // boolean
var vari = undefined;
console.log(typeof vari); // undefined
var timer = null;
console.log(typeof timer); // object
// prompt 取过来的值是 字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
</script>3.3.2字面量
字面量是在源代码中一个固定的表示法
- 数字字面量：8,9,10
- 字符串字面量：“大前端”
- 布尔字面量：ture,false
3.4数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
3.4.1转换为字符串
| 方式 | 说明 | 案例 |
| toString() | 转成字符串 | var num= 1; alert(num.toString()); |
| String()强制转换 | 转成字符串 | var num = 1; alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; alert(num+"我是字符串"); |
<script>
// 1. 把数字型转换为字符串型 变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
// 2. 我们利用 String(变量)
console.log(String(num));
// 3. 利用 + 拼接字符串的方法实现转换效果 隐式转换
console.log(num + '');
</script>- toString() 和 String() 使用方式不一样。
- 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。
3.4.2转换为数字型
| 方式 | 说明 | 案例 |
| parseInt(string)函数 | 将string类型转成整数数值型 | parseInt(78') |
| parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat('78.21') |
| Number()强制转换函数 | 将string类型转换为数值型 | Number('12') |
| js 隐式转换( - * /) | 利用算术运算隐式转换为数值型 | '12'- 0 |
<script>
// var age = prompt('请输入您的年龄');
// 1. parseInt(变量) 可以把 字符型的转换为数字型 得到是整数
// console.log(parseInt(age));
console.log(parseInt('3.14')); // 3 取整
console.log(parseInt('3.94')); // 3 取整
console.log(parseInt('120px')); // 120 会去到这个px单位
console.log(parseInt('rem120px')); // NaN
// 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 会去掉这个px单位
console.log(parseFloat('rem120px')); // NaN
// 3. 利用 Number(变量)
var str = '123';
console.log(Number(str));
console.log(Number('12'));
// 4. 利用了算数运算 - * / 隐式转换
console.log('12' - 0); // 12
console.log('123' - '120');
console.log('123' * 1);
</script>- parseInt 和 parseFloat 单词的大小写，这2个是重点
- 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型
3.4.3案例：计算年龄
步骤：
- 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
- 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄（程序内部处理）
- 使用alert语句弹出警示框，把结果输出（输出结果）
<script>
var year = prompt('请您输入您的出生年份');
var age = 2018 - year; // year 取过来的是字符串型 但是这里用的减法 有隐式转换
alert('您今年已经' + age + '岁了');
</script>3.4.4案例：简单加法器
步骤：
- 先弹出第一个输入框，提示用户输入第一个值 保存起来
- 再弹出第二个框，提示用户输入第二个值 保存起来
- 把两个值相加，并将结果赋给新的变量（注意数据类型转化）
-
弹出警示框（alert) ， 把计算的结果输出 （输出结果）
<script>
var num1 = prompt('请您输入第一个值：');
var num2 = prompt('请您输入第二个值：');
var result = parseFloat(num1) + parseFloat(num2);
alert('您的结果是:' + result);
</script>3.4.5转换为布尔型
| 方式 | 说明 | 案例 |
| Boolean()函数 | 其他类型转成布尔值 | Boolean('true'); |
- 代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
- 其余值都会被转换为 true
<script>
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log('------------------------------');
console.log(Boolean('123'));
console.log(Boolean('你好吗'));
console.log(Boolean('我很好'));
</script>4.标识符，关键字，保留字
4.1标识符
指开发人员为变量，属性，参数取的名字
标识符不能是关键字和保留字
4.2关键字
在JS中有特殊含义的次
4.3保留字
“预留”的关键字
5.运算符
运算符（操作符）：operator，是一种将数据进行运算的特殊符号，在PHP中一共有十种运算符。
5.1算数运算符
5.1.1算数运算
- +：执行数据累加
- -：数据相减
- *：键盘上没有乘法符号，使用*代替，两个数相乘
- /：正斜杠代替，表示两个数相除
- %：取余(模)运算，两个数（整数）相除，保留余数
在进行除法运算或者取余运算的时候，对应的除数（第二个数）不能为0；
5.1.2浮点数
浮点数在算数运算里面会有问题
不要直接判断两个浮点数是否相等
5.1.3表达式和返回值
-
是由数字、运算符、变量等组成的式子
5.2递增和递减运算符
5.2.1前置递增运算符
++写在变量的前面
先自加1，后返回值
5.2.2后置递增运算符
++写在变量的后面
先返回原值，后自加1
5.3比较运算符
比较运算：比较两个数据的大小，或者两个内容是否相同，返回的结果都是布尔类型：满足返回true，不满足返回false
>：左边大于右边，返回结果true
>=：左边大于等于右边
<：左边小于右边
<=：左边小于或者等于右边
==：左边的与右边的相同（大小相同，不管类型，string ”123“==int 123）
!=：左边的与右边的不同（大小不同，不管类型）
===：全等于，左边与右边相同：大小以及数据的类型都要相同
!==：不全等于，只要大小或者类型不同就为true
//比较运算符
$a = '123'; //
$b = 123; //
//判断相等
var_dump($a == $b);//true
var_dump($a === $b);//false
5.4逻辑运算符
5.4.1逻辑运算
针对不同的结果进行匹配。满足条件返回true，不满足返回false
| 逻辑运算符 | 说明 | 案例 |
| && | “逻辑与”，简称“与” and（左边的条件与右边的条件同时成立） | true&&false |
| || | ”逻辑或“，简称“或”or（左边的条件或者右边的条件只要有一个满足即可） | true||false |
| ！ | “逻辑非”，简称“非” not(对已有条件进行取反，本身为true，取反结果就是false) | !ture |
5.4.2短路运算（逻辑中断）
短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值
逻辑与
- 语法：表达式1&&表达式2
- 如果第一个表达式的值为真，则返回表达式2
- 如果第一个表达式的值为假，则返回表达式1
- 如果有空的或者否定的为假 （0；‘’，null undefined NaN) 其余都是真
console.log(123 && 456); // 456
console.log(0 && 456); // 0
console.log(0 && 1 + 2 && 456 * 56789); // 0
console.log('' && 1 + 2 && 456 * 56789); // ''逻辑或
- 语法：表达式1||表达式2
- 如果第一个表达式的值为真，则返回表达式1
- 如果第一个表达式的值为假，则返回表达式2
console.log(123 || 456); // 123
console.log(123 || 456 || 456 + 123); // 123
console.log(0 || 456 || 456 + 123); // 456逻辑中断会影响程序的运行结构
var num = 0;
console.log(123 || num++);
console.log(num); // 05.5.赋值运算符
| 赋值运算符 | 说明 | 案例 |
| = | 直接赋值 | var usrName = '我是值'; |
| +=，-= | 加，减一个数，后再赋值 | var age = 10;age+=5;//15 |
| *=，/=，%= | 乘除取模后再赋值 | var age =2; age*=5;//10 |
5.6运算符优先级
| 优先级 | 运算符 | 顺序 |
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++ -- ！ |
| 3 | 算术运算符 | 先*/%后+- |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&&后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
- 逻辑与比逻辑或优先级高
6.流程控制
流程控制：代码执行的顺序（方向）
6.1顺序结构
按照代码顺序，依次执行
6.2分支结构
根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
6.2.1if语句
1. 语法：
if (条件表达式) {
执行语句
}2. 执行思路 如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句
如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
3.案例：进入网吧
步骤：
- 弹出 prompt 输入框，用户输入年龄， 程序把这个值取过来保存到变量中
- 使用 if 语句来判断年龄，如果年龄大于18 就执行 if 大括号里面的输出语句
<script>
var age = prompt('请输入您的年龄:');
if (age >= 18) {
alert('我想带你去网吧偷耳机');
}
</script>5.2.2if else语句
1. 语法结构 : if 如果 else 否则
if (条件表达式) {
执行语句1
} else {
执行语句2
}2. 执行思路: 如果表达式结果为真 那么执行语句1 否则 执行语句2
3. if里面的语句1 和 else 里面的语句2 最终只能有一个语句执行 2选1
4. else 后面直接跟大括号
5案例：判断闰年
1.算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
2.步骤：
- 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
- 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句
- 一定要注意里面的且 && 还有或者 || 的写法，同时注意判断整除的方法是取余为 0
3.代码
<script>
var year = prompt('请您输入年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert('您输入的年份是闰年');
} else {
alert('您输入的年份是平年');
}
</script>6.2.3if else if语句(多分支语句)
多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程
1. 语法规范:
if (条件表达式1) {
语句1;
} else if (条件表达式2) {
语句2;
} else if (条件表达式3) {
语句3;
} else {
最后的语句;
}2.执行思路
- 如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句
- 如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
- 如果上面的所有条件表达式都不成立，则执行else 里面的语句
3. 注意点
(1) 多分支语句还是多选1 最后只能有一个语句执行
(2) else if 里面的条件理论上是可以任意多个的
(3) else if 中间有个空格了
4.案例：判断成绩
步骤：
- 伪代码 按照从大到小判断的思路
- 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中
- 使用多分支 if else if 语句来分别判断输出不同的值
<script>
var score = prompt('请您输入分数:');
if (score >= 90) {
alert('宝贝，你是我的骄傲');
} else if (score >= 80) {
alert('宝贝，你已经很出色了');
} else if (score >= 70) {
alert('你要继续加油喽');
} else if (score >= 60) {
alert('孩子，你很危险');
} else {
alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
}
</script>6.3三元表达式
有三元运算符组成的式子我们称为三元表达式
1. 语法结构：
条件表达式 ？ 表达式1 ： 表达式2 2. 执行思路：如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值
3.案例：数字补零
步骤：
- 用户输入0~59之间的一个数字
- 如果数字小于10，则在这个数字前面补0,（加0 拼接） 否则 不做操作
- 用一个变量接受这个返回值，输出
<script>
var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
var result = time < 10 ? '0' + time : time; // 把返回值赋值给一个变量
alert(result);
</script>6.4分支流程控制Switch语句
6.4.1语法结构
switch 语句也是多分支语句 也可以实现多选1
switch (表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;6.4.2执行思路
利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句 如果都没有匹配上，那么执行 default里面的语句
6.4.3注意事项
- 我们开发里面 表达式我们经常写成变量
- 我们num （变量）的值 和 case 里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
- break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
6.4.4案例：查询水果
分析
- 弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
- 将这个变量作为 switch 括号里面的表达式。
- case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
- 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
- 将 default 设置为没有此水果。
代码
var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
case '苹果':
alert('苹果的价格是 3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是 35/斤');
break;
default:
alert('没有此水果');
}6.4.5 Switch语句和 if...else if 语句
- 一般情况下，他们两个语句可以相互替换
- Switch...case语句通常处理case为比较确定值的情况，而if...else...语句更加灵活，常用于范围判断（大于，等于某个范围）
- Switch语句进行条件判断后直接执行到程序的条件语句，效率高。而if...else语句有几种条件，就得判断多少次
- 当分支较少时，if...else...语句的执行效率比Switch语句高
- 当分支较高时，Switch语句的执行效率高且结构清晰
7.循环结构
循环的目的：可以重复执行某些代码
7.1 for循环
7.1.1语法结构
for (初始化变量; 条件表达式; 操作表达式) {
循环体
}- for 重复执行某些代码， 通常跟计数有关系
- 初始化变量： 就是用var 声明的一个普通变量， 通常用于作为计数器使用
- 条件表达式：就是用来决定每一次循环是否继续执行 就是终止的条件
- 操作表达式：是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
7.1.2for 循环的执行过程
-
for 循环可以执行相同的代码
-
for 循环可以重复执行不同的代码
for (var i = 1; i <= 100; i++) {
console.log('你好吗');
}1. 首先执行里面的计数器变量 var i = 1 .但是这句话在for 里面只执行一次 index
2. 去 i <= 100 来判断是否满足条件， 如果满足条件 就去执行 循环体 不满足条件退出循环
3. 最后去执行 i++ i++是单独写的代码 递增 第一轮结束
4. 接着去执行 i <= 100 如果满足条件 就去执行 循环体 不满足条件退出循环 第二轮
7.1.3案例：求1-100之间所有偶数和奇数的和
需要一个偶数的和变量 even 还需要一个奇数 odd
var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
even = even + i;
} else {
odd = odd + i;
}
}
console.log('1~100 之间所有的偶数和是' + even);
console.log('1~100 之间所有的奇数和是' + odd);
7.1.4学生案例
- 弹出输入框输入总的班级人数(num）
- 依次输入学生的成绩（ 保存起来 score）， 此时我们需要用到
- for 循环， 弹出的次数跟班级总人数有关系 条件表达式 i <= num
- 进行业务处理: 计算成绩。 先求总成绩（ sum）， 之后求平均成绩（ average）
- 弹出结果
var num = prompt('请输入班级总人数:');
var sum = 0;
var average = 0;
for (var i = 1; i <= num; i++) {
var score = prompt('请输入第' + i + '个人的成绩');
sum += parseFloat(score);
}
average = score / num;
alert('总成绩为' + sum);
alert('平均成绩为' + num);7.2双重for循环
7.2.1语法结构
for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
// 执行语句;
}
}7.2.2注意
-
可以把里面的循环看做是外层循环的语句
-
外层循环循环一次， 里面的循环执行全部
7.2.3案例：打印n行n列的星星
var rows = prompt('请您输入行数:');
var cols = prompt('请您输入列数:');
var str = '';
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
str = str + '★';
}
str += '\n';
}
console.log(str);7.2.4案例：九九乘法表
- 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
- 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行
- 内层的 for 循环控制每行公式 j
- 核心算法：每一行 公式的个数正好和行数一致， j <= i;
- 每行打印完毕，都需要重新换一行
var str = '';
for (var i = 1; i <= 9; i++) { // 外层循环控制行数
for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数 j <= i
str += j + '×' + i + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);7.3while循环
7.3.1语法结构
while (条件表达式) {
循环体
}7.3.2执行思路
当条件表达式结果为true 则执行循环体 否则 退出循环
7.3.3注意
-
应该也有计数器 初始化变量
-
应该也有操作表达式 完成计数器的更新 防止死循环
7.4do while 循环
7.4.1语法结构
do {
// 循环体
} while (条件表达式)7.4.2执行思路
跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环
7.4.3注意事项
do while 循环体至少执行一次
7.5continue
退出本次（当前次的循环） 继续执行剩余次数循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue; // 只要遇见 continue就退出本次循环 直接跳到 i++
}
console.log('我正在吃第' + i + '个包子');
}7.6break
退出整个循环
8.数组
8.1创建数组
8.1.1利用new关键字创建数组
var arr = new Array(); // 创建一个新的数组8.1.2使用数组字面量创建数组
var arr = []; // 创建了一个空的数组
var arr1 = [1,2,'pink',true];8.1.3注意
- 我们数组里面的数据一定用逗号分隔
- 数组里面的数据 比如1,2， 我们称为数组元素
- 获取数组元素 格式 数组名[索引号] 索引号从 0开始
- 数组里面可以放任意的数据类型，例：数字，字符串，布尔值
8.2遍历数组
遍历: 就是把数组中的每个元素从头到尾都访问一次
8.2.1数组长度
格式：
索引：用来访问数据元素的序号
数组名.length注意：
-
数组的长度是元素个数 不要跟索引号混淆
-
arr.length 动态监测数组元素的个数
8.2.2示例
示例1：计算数组的和以及平均值
题目要求： 求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值。
步骤（思路）：
- 声明一个求和变量 sum。 遍
- 历这个数组，把里面每个数组元素加到 sum 里面。
- 用求和变量 sum 除以数组的长度就可以得到数组的平均值。
代码：
var arr = [2,6,1,7,4];
var sum =0;
var average =0;
for(var i=0;i<arr.length;i++){
sum += arr[i];
}
average = sum/arr.length;
console.log("这组数的和为: "+ sum);
console.log("这组数的平均值为: " +average);示例二：数组最大值
题目要求： 求数组[2,6,1,77,52,25,7]中的最大值。
思路（步骤）：
- 声明一个保存最大元素的变量 max。
- 默认最大值可以取数组中的第一个元素。
- 遍历这个数组，把里面每个数组元素和 max 相比较。
- 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
- 最后输出这个 max。
代码：
var arr = [2,6,1,77,52,25,7];
var max = arr[0];
for(var i =1;i<= arr.length;i++){
if(arr[i] > max ) {
max= arr[i];
}
}
console.log("最大值为："+ max);8.3数组中新增元素
8.3.1通过修改 length 长度新增数组元素
- 可以通过修改 length 长度来实现数组扩容的目的
- length 属性是可读写的
var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);
- 注意：
其中索引号是 4，5，6 的空间没有给值，就是声明变量未给值，默认值就是 undefined。
8.3.2 通过修改数组索引新增数组元素
- 可以通过修改数组索引的方式追加数组元素
- 不能直接给数组名赋值，否则会覆盖掉以前的数据
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);
8.4 数组案例
8.4.1删除指定数组元素
问题描述：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。
思路（步骤）：
- 需要一个新数组用于存放筛选之后的数据。
- 遍历原来的数组，把不是 0 的数据添加到新数组里面( 此时要注意采用数组名+索引的格式接收数据)。
- 新数组里面的个数，用 length 不断累加。
代码：
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = []; // 空数组的默认的长度为 0
// 定义一个变量 i 用来计算新数组的索引号
for (var i = 0; i < arr.length; i++) {
// 找出大于 10 的数
if (arr[i] != 0) {
// 给新数组
// 每次存入一个值，newArr长度都会 +1
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
8.4.2.翻转数组
问题描述：要求: 将数组 ['red', 'green', 'blue', 'pink', 'purple'] 的内容反过来存放。
输出： ['purple', 'pink', 'blue', 'green', 'red']
思路（步骤）：
代码：
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
// newArr 是接收方，arr 是输送方
newArr[i] = arr[arr.length - i - 1];
}
console.log(newArr);
8.4.3 数组排序（冒泡排序）
问题描述：
冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小）。 例如，我们可以将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出： 1，2，3，4，5
思路（步骤）：
代码：
var arr = [5, 4, 3, 2, 1];
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
9.函数
9.1函数的概念
封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
9.2函数的使用
函数在使用时分为两步：声明函数和调用函数。
9.2.1声明函数
// 声明函数
function 函数名() {
//函数体代码
}
- function 是声明函数的关键字,必须小写
- 由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum
9.2.2 调用函数
// 调用函数
函数名(); // 通过调用函数名来执行函数体代码
- 调用的时候千万不要忘记添加小括号
- 口诀：函数不调用，自己不执行。
注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
9.2.3函数的封装
函数的封装是把多个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。 简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）
9.2.4案例 利用函数计算1-100之间的累加和
function getSum(){
var sumNum = 0;// 准备一个变量，保存数字和
for (var i = 1; i <= 100; i++) {
sumNum += i;// 把每个数值 都累加 到变量中
}
alert(sumNum);
}
// 调用函数
getSum();
9.3函数的参数
9.3.1 形参和实参
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。
参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);案例：利用函数求任意两个数的和
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 3); // 4
getSum(6, 5); // 11
9.3.2 函数参数的传递过程
// 声明函数
function getSum(num1, num2) {
console.log(num1 + num2);
}
// 调用函数
getSum(1, 3); // 4
getSum(6, 5); // 11
1. 调用的时候实参值是传递给形参的
2. 形参简单理解为：不用声明的变量
3. 实参和形参的多个参数之间用逗号（,）分隔
9.3.3函数形参和实参个数不匹配问题
function sum(num1, num2) {
console.log(num1 + num2);
}
sum(100, 200); // 形参和实参个数相等，输出正确结果
sum(100, 400, 500, 700); // 实参个数多于形参，只取到形参的个数
sum(200); // 实参个数少于形参，多的形参定义为undefined，结果为NaN
注意：在JavaScript中，形参的默认值是undefined
9.4函数的返回值
9.4.1 return 语句
// 声明函数
function 函数名（）{
...
return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
- 在使用 return 语句时，函数会停止执行，并返回指定的值
- 如果函数没有 return ，返回的值是 undefined
案例 1：利用函数求任意两个数的最大值
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 2));
console.log(getMax(11, 2));
案例 2：利用函数求任意一个数组中的最大值
求数组 [5,2,99,101,67,77] 中的最大数值
//定义一个获取数组中最大数的函数
function getMaxFromArr(numArray){
var maxNum = 0;
for(var i =0;i < numArray.length;i++){
if(numArray[i] > maxNum){
maxNum = numArray[i];
}
}
return maxNum;
}
var arrNum = [5,2,99,101,67,77];
var maxN = getMaxFromArr(arrNum); // 这个实参是个数组
alert('最大值为：'+ maxN);
9.4.2return 终止函数
function add(num1，num2){
//函数体
return num1 + num2; // 注意：return 后的代码不执行
alert('我不会被执行，因为前面有 return');
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum); // 27
9.4.3return 的返回值
return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准
function add(num1，num2){
//函数体
return num1，num2;
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum); // 6
9.4.4函数没有 return 返回 undefined
函数都是有返回值的
- 如果有return 则返回 return 后面的值
- 如果没有return 则返回 undefined
9.4.5break ,continue ,return 的区别
- break ：结束当前的循环体（如 for、while）
- continue ：跳出本次循环，继续执行下次循环（如 for、while）
- return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
9.5arguments的使用
当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。
9.5.1伪数组具有以下特点
- 具有 length 属性
- 按索引方式储存数据
- 不具有数组的 push , pop 等方法
9.6函数案例
9.6.1案例一
利用函数封装方式，翻转任意一个数组
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);
9.6.2案例二
利用函数封装方式，对数组排序 -- 冒泡排序
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
9.6.3案例 3： 判断闰年
要求：输入一个年份，判断是否是闰年（闰年：能被4整除并且不能被100整数，或者能被400整除）
function isRun(year) {
var flag = false;
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
flag = true;
}
return flag;
}
console.log(isRun(2010));
console.log(isRun(2012));
9.7函数的两种声明方式
9.7.1 自定义函数方式(命名函数)
利用函数关键字 function 自定义函数方式。
// 声明定义方式
function fn() {...}
// 调用
fn();
- 因为有名字，所以也被称为命名函数
- 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面
9.7.2 函数表达式方式(匿名函数）
// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();
- 因为函数没有名字，所以也被称为匿名函数
- 这个fn 里面存储的是一个函数
- 函数表达式方式原理跟声明变量方式是一致的
- 函数调用的代码必须写到函数体后面
扫一扫
1909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
