js基础
目录
1.JS简述
一个完整的JavaScript实现由ECMAScript、DOM、BOM三个部分构成。
ECMAScript是JavaScript标准。
2.JS的Helloworld
js代码需要写在script标签中。
从上到下，一行一行执行js代码。
js代码用分号 ' ；' 结尾。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JS代码需要编写到script标签中
type="text/javascript" 写不写都可以，默认就是它
-->
<script type="text/javascript">
/*
* 控制浏览器弹出一个警告框
* */
alert("这是我的第一个JS代码");
/*
* 让计算机在页面中输出一个内容
* 网页就是一个文档document
* */
document.write("你看我帅不帅"); /*作用就是向body标签中写一个内容*/
/*
* 向控制台输出一个内容
* */
console.log("我是在控制台输出的！");
</script>
</head>
<body>
</body>
</html>
3.JS编写位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
2.可以写在script标签中
-->
<script type="text/javascript">
alert("写在script标签中");
</script>
<!--
3.可以将JS代码编写到外部JS文件中，然后通过script标签的src属性引入外部文件路径
写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制
推荐使用的方式
-->
<script type="text/javascript" src="js/JS编写位置.js">
/*script标签一旦用于引入外部文件了，就不能在内部编写代码了，即使编写了浏览器也会忽略
* 如果需要编写内部代码，则可以再创建一个新的script标签用于编写内部代码
* */
alert("引入外部文件，内部编写代码会被忽略");
</script>
</head>
<body>
<!--
1.可以将JS代码编写到标签的onclick属性中
当点击按钮时，JS代码才会执行
虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用
-->
<button onclick="alert('行内编写JS代码');">点我有惊喜</button>
<!--可以将JS代码写在超链接的href属性中，这样当点击超链接时，会执行JS代码
必须先写 javascript：冒号后面写JS代码,JS代码后面不要忘记 ; 分号结束
-->
<a href="javascript:alert('必须先写(javascript: ),再写JS代码');">链接</a>
<!--也可以在冒号后不写JS代码，一个分号结束，这样点击超链接不会有效果，常用形式-->
<a href="javascript:;">链接</a>
</body>
</html>
4.基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 单行注释
/*多行注释*/
/*
* 1.JS中严格区分大小写
* 2.JS中每条语句以分号（;）结尾
* - 如果不写分号结尾，浏览器会自动添加，但是会消耗一些系统资源。
* - 而且有些时候，浏览器会加错分号。所以开发中分号必须写
* 3.JS会自动忽略多个空格和换行，所以可以利用空格和换行对代码进行格式化操作
*
* */
</script>
</head>
<body>
</body>
</html>
5.字面量和变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 字面量：都是一些不可改变的值
* 比如：1、3、6、"asd"
* 字面量都可以直接使用：alert(12344556);
* 但是我们一般不会直接使用字面量
*
*
* 变量：变量可以用来保存字面量，而且变量的值可以任意改变
* 开发中都是通过变量保存字面量，而很少直接使用字面量
* 可以通过变量对字面量进行描述（见名知意）
* */
// 声明变量
// 在JS中使用var关键字来声明一个变量
var a;
// 为变量赋值
a = 123;
// 声明和赋值同时进行
var b = "adf";
</script>
</head>
<body>
</body>
</html>
6.标识符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 标识符：
* - 在JS中所有可以由我们自主命名的都可以称为标识符
* - 例如：变量名、函数名、属性名
*
* 命名一个标识符需要遵循规则：
* - 标识符中可以含有字母、数字、_ 、$
* - 不能以数字开头
* - 不能是ES中的关键字或保留字
* - 标识符一般采用驼峰命名法
*
* JS底层保存标识符时实际上是采用Unicode编码，理论上UTF-8中含有的内容都可以作为标识符
* - 但是最好不要用中文定义标识符
* */
</script>
</head>
<body>
</body>
</html>
7.数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 数据类型：指的是字面量的类型
* 在JS中一共有六种数据类型：
* String 字符串
* Boolean 布尔值
* Null 空值
* Number 数值
* Undefined 未定义
* Object 对象
*
* String、Number、Boolean、Null、Undefined 是基本数据类型
* Object 是引用数据类型
* */
</script>
</head>
<body>
</body>
</html>
1）字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* String字符串：使用引号引起来
* 使用单双引号都可以，但不要混着用
* 引号嵌套：单引号内嵌双引号、双引号内嵌单引号
* */
var str = "javascript is good";
/* 字符串中使用\作为转义字符，当表示一些特殊符号可以使用\进行转义
\" -> "
\' -> '
\n -> 换行
\t -> 制表符
\\ -> \
*/
var stri = "hello\"World\"";
</script>
</head>
<body>
</body>
</html>
2）Number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* var 声明变量声明一次即可
* 第二次使用变量时不用再声明（不再写var关键字）
* */
var str = "ad"; // 声明变量并赋值
// var str = "hello";
str = 1233; // 变量已经声明，不用再声明直接使用。
/*
* 在JS中所有数值都是Number类型，包括整数和浮点数（小数 ）
*
* */
var num = 123;
num = 123.456;
var num2 = "123";
console.log(num);
console.log(num2);
// 控制台都打印"123",区分不出来谁是数值型，谁是字符串
/*
* 使用一个运算符 typeof 来检查一个变量类型
* 语法：typeof 变量
*
* */
console.log(typeof num); // 控制台结果：number
console.log(typeof num2); // 控制台结果：string
// JS中可以表示数字的最大值：Number.MAX_VALUE
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
// JS中可以表示数字的最小值：Number.MIN_VALUE
console.log(Number.MIN_VALUE); // 5e-324 大于0的最小值
// 如果使用Number表示的数字超过了最大值，则会返回一个Infinity(正无穷)
console.log(Number.MAX_VALUE * Number.MAX_VALUE); // Infinity
console.log(-Number.MAX_VALUE * Number.MAX_VALUE); // -Infinity （负无穷）
num = Infinity; // num变量为正无穷，Infinity是字面量表示正无穷。
// NaN 是一个特殊的数字，表示Not A Number
console.log("abc" * "def"); // 控制台结果：NaN
// 使用typeof 检查一个NaN也会返回number
num2 = NaN;
console.log(typeof num2); // 控制台结果：number
/*
* 在JS中整数的运算基本可以保证精确
* */
var c = 123 + 456;
console.log(c);
/*
* JS中进行浮点运算，可能得到一个不精确的结果
* 所以千万不要使用JS进行对精确度要求比较高的运算
* */
var d = 0.1 + 0.2;
console.log(d); // 控制台结果：0.30000000000000004
</script>
</head>
<body>
</body>
</html>
3）布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* Boolean布尔值
* - true 真
* - false 假
* */
var bool = false;
</script>
</head>
<body>
</body>
</html>
4）Null和Undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* Null（空值）类型的值只有一个，就是null
* null这个值专门用来表示一个为空的对象
*
* 使用typeof检查一个null值时，会返回object
*
* */
var a = null;
/*
* Undefined（未定义）类型的值只有一个，就undefined
* 当声明一个变量，但是并不给变量赋值时，它的值就是undefined
*
* 使用typeof检查一个undefined值时，会返回undefined
* */
var b;
console.log(typeof b);
</script>
</head>
<body>
</body>
</html>
8.强制类型转换
1）String
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 强制类型转换
* - 指将一个数据类型强制转换为其他数据类型
* - 类型转换主要指，将其他的数据类型，转换为 String、Boolean、Number
* */
/*
* 将其他类型转换为String
* 方式一：调用被转换数据类型的toString()方法， 调用什么方法就是xxx.方法() 。
* 该方法不会影响到原变量，它会将转换结果返回。
*
* 注意：null和undefined这两个值没有toString()方法，否则报错。
* */
var a = "abcd";
var b = a.toString(); // 结果赋值给b变量
a = a.toString(); // 结果再赋值给自身
/*
* 方式二：调用String()函数 ，并将被转换的数据作为参数传递给函数。
* - 调用什么函数就是 直接写什么函数。
*
* 使用String()函数做强制类型转换时，
* - 对于Number和Boolean实际上就是调用toString()方法
* - 但是对于null和undefined，就不会调用toString()方法
* 他会将null 直接转换为 "null" 字符串类型的null
* 将undefined 直接转化为 "undefined"
*
* */
var c = "jkl";
var d = String(c); // 调用String()函数转换
console.log(typeof d);
console.log(d);
c = String(c); // 转换结果赋给自己
console.log(typeof c);
console.log(c);
</script>
</head>
<body>
</body>
</html>
2）Number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 其他类型转换为Number
*
* 方式一：使用Number()函数
*
* 1.字符串 转 Number：
* 注意：1.如果是纯数字，则直接将其转换为Number类型
* 2.如果字符串中有非数字内容，则转换为NaN
* 3.如果字符串是一个空串或者是一个全空格的字符串，则转换为0
*
* 2.Boolean 转 Number：
* true -> 1
* false -> 0
*
* 3.null 转 Number：
* null -> 0
*
* 4.Undefined 转 Number：
* undefined -> NaN
* */
var a = "str";
var b = Number(a); // 转换结果赋给变量b
// a = Number(a); // 结果赋给自己
var c = Number("123add"); // 结果为：NaN
var d = Number(" "); // 结果为：0
// Boolean类型转换为Number
var e = true;
e = Number(e); // 结果为：1
var f = false;
f = Number(f); // 结果为：0
/*
* 方式二：专门用来处理字符串 parse /pɑːz/ 解析
*
* - parseInt() 把一个字符串转换为一个整数
* 可以将一个字符串中有效的整数内容取出来（遇到第一个字母或其他字符，以后的字符都失效）
*
* - parseFloat() 把一个字符串转换为一个浮点数
* 与parseInt()类似，当遇到第一个点后面的数字依然有效，遇到字母或新的点，后面字符都失效
*
* 如果对非String类型使用parseInt()、parseFloat()，它会先将其转换为String然后再操作
* */
var str = "123a13";
str = parseInt(str); //结果：123
var st = "a123456";
st = parseInt(st); // 结果：NaN
var str1 = "123.123aaa";
str = parseFloat(str1); // 结果：123.123
var bool = true;
bool = parseInt(bool); // 结果：NaN 先将true 转为 "true" 再转为 整数
var str2 = 123.556;
str2 = parseInt(str2); // 结果：123 利用parseInt()对浮点数取整,并不会进行四舍五入
console.log(str2); // 应该是先将str2转换为字符串，转化为整数，遇到.后面失效了
</script>
</head>
<body>
</body>
</html>
3）Boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 将其他类型转换为Boolean
* - 使用Boolean()函数
* 数字 -> 布尔 ： 除了0和NaN，其余都是true
*
* - 字符串 -> 布尔 ： 除了空串，其余都是true(包括空格，空格也是字符)
*
* - null和undefined ： 都转换为false
*
* - 对象也会转换为 true
*
* */
</script>
</head>
<body>
</body>
</html>
9.其他进制数字
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* JS中，如果需要表示16进制的数字，则需要以 0x 开头
* 需要表示8进制数字，以 0 开头
* 需要表示2进制数字，以 0b 开头，但不是所有浏览器都支持
* */
// 十六进制
var a = 0xff; // 255
// 八进制
var b = 070; // 56
console.log(b);
// 二进制
var c = 0b10; // 2
console.log(c);
// 字符串
// 像 "070" 这种字符串，有些浏览器会当成八进制，有些会当成十进制解析
var d = "070";
// 可以在parseInt中传递第二个参数，来指定数字的进制
d = parseInt(d, 8);
</script>
</head>
<body>
</body>
</html>
10.运算符
1）算数运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 运算符也叫操作符，运算符都会返回结果。
* 通过运算符可以对一个或多个值进行运算，并获取运算结果。
* 比如：typeof就是运算符，可以获得一个值类型
* 它会将该值类型以字符串形式返回
*
* 任何值与NaN运算结果都为NaN
* */
/*
* 算数运算符：
* + ： 对非Number类型的值进行运算时，会将这些值转换为Number，然后再运算。
* 如果对两个字符串进行加法运算，则会拼接，得到一个新的字符串，并返回。
* 任何数值与字符串进行加法运算，数字都会先转换为字符串，然后再拼接成新字符串
*
* - ： 两个值减法运算，返回结果。
* 如果一个数值减一个字符串，先将字符串转换为Number，然后再进行减法运算
*
* * ： 两个值乘法运算，返回结果。
* 如果一个数值乘一个字符串，先将字符串转换为Number，然后再进行乘法运算
* 数值乘undefined ：undefined先转换为NaN，结果为NaN
*
* / ： 两个值除法运算，返回结果。
* 如果一个数值除一个字符串，先将字符串转换为Number，然后再进行除法运算
*
* % ： 取模运算（取余）
*
* 对原变量不会产生影响
*
*
* 任何值做 - 、* 、/ 运算时都会自动转换为Number
* 字符串通过为一个值 -0 、 *1 、 /1 ，将其转换为Number
* 隐式转换为Number，原理和Number()函数一样
* */
var a = 123;
var result;
result = a + 1; // 124
result = true + false; // 1
result = 2 + null; // 2 null=0
// 任何值和NaN做运算，都得 NaN
result = 2 + NaN; // NaN
// 字符串拼接
result = "123" + "456"; // "123456"
// 数值先转换为字符串，再拼接
result = 123 + "789"; // "123789"
result = true + "hello"; // "truehello"
// 隐式的类型转换，有浏览器自动完成，实际上也是调用String()函数
result = 128 + ""; // "128"
result = 100 - "1"; // 99 先将字符串"1" 转换为数字 1 在进行运算
result = "2" * 3; // 6
console.log(result);
</script>
</head>
<body>
</body>
</html>
2）一元运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 一元运算符，只需一个操作数
* + 正号
* 正号不会对数字产生任何影响
* -负号
* 负号对数字符号取反
*
* 对于非Number类型的值：
* 他会先转换为Number，然后运算
* 可以对其他类型使用 + ，将其转换为Number，原理与Number()函数一样
*
* */
var a = -"18";
console.log(a); // 结果为 18
console.log(typeof a); // 类型是 number
var b = 1 + +"2" + 3;
console.log(b); // 结果为 6
console.log(typeof b); // 类型是 number
</script>
</head>
<body>
</body>
</html>
3）自增、自减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 自增：++
* 变量在自身基础上增加1
* 一个变量自增以后，原变量值会立即自增1
* a++ / ++a
*
* 自减：--
* 变量在自身基础上减1
* a-- / --a
* */
var a = 1;
a++;
</script>
</head>
<body>
</body>
</html>
4）逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 三种逻辑运算符：
*
* && 与 ：两值都为true才返回true
* JS中&&是短路与
*
* || 或 ：两值都为false才返回false
* JS中||是短路或
*
* ！ 非 ：对非布尔值取反，先将值转变为布尔值，再取反
* */
// 布尔值的与 或 运算
var s = true;
var t = false;
var st = s && t; // false
// 短路与 ： 第一个参数为false，就不判断第二个参数是否为true，直接返回false
st = t && s;
console.log(st);
st = s || t; // true
// 短路或 ： 第一个参数为true，就不判断第二个参数是否为true，直接返回true
console.log(st);
/*
* 非布尔值的与 或 运算
* 先将其转换为布尔值，然后再运算，并且返回原值
*
* 与运算：如果两个值都为true，则返回&&后面的值
* 如果两个值中有false，则返回小的值
* 例如 var ab = 2 && 0; 0小于2，返回0
* 如果第一个值为false，则直接返回第一个值
* 如果第一个值为true，则必然返回第二个值
*
* 或运算：如果第一个值为true，则直接返回第一个值
* 如果第一个值为false，则直接返回第二个值
* */
var ad = 1 && 2; // 2
var ac = 0 && 2; // 0
var ab = 2 && 0; // 0
console.log("ab =" + ab);
var str = "" || "hello"; // "hello"
str = -1 || "world"; // -1
var a = false;
var b = 1;
var result = a && b;
console.log(result); // false
result = a || b;
console.log(result); // 1
</script>
</head>
<body>
</body>
</html>
5）赋值运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 赋值运算符： = 将符号右侧值赋值给左侧变量
*
* += ：a += 1 => a = a+1
* -= ：
* *= ：
* /= ：
* %= ：
* */
</script>
</head>
<body>
</body>
</html>
6）关系运算符
注意：比较两个字符串型的数字，一定要转型（字符串是比较每一位字符的Unicode编码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 关系运算符：比较两个值大小关系
*
* > 大于号 ：关系成立，返回true，不成立返回false
*
* >= :
* < :
* <= :
*
* 任何值与NaN比较都是false
*
* 对非数值进行比较是，先转换为数字，然后再比较
* 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而是分别比较字符串中字符的Unicode编码
*
* */
// 比较字符编码时会一位一位字符比较,同一位字母编码相同，比较下一位字符编码
var result = "abd" < "abc";
console.log(result);
// 如果比较的两个字符串类型的数字，可能会得不到预期的结果。
// 注意：比较两个字符串型的数字，一定要转型
var mx = "12344353" < +"7"; // 对字符串"7"使用+（正号）转变为数值型进行比较
</script>
</head>
<body>
</body>
</html>
7）Unicode编码表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* Unicode编码
* 在字符串中使用转义字符输入Unicode编码
* \u四位编码
* */
console.log("\u2620");
</script>
</head>
<body>
<!--
在网页中使用Unicode编码
&#编码; 这里的编码需要是十进制
-->
<h1 style="color: red">☠</h1>
</body>
</html>
8）相等运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 相等运算符：用来比较两个值是否相等
* 相等返回true，否则返回false
*
* 使用 == 做相等运算
*
* 当使用== 来比较两个值时，如果值类型不同，则会自动类型转换，将其转换为相同类型，然后比较
* */
console.log(1 == "1"); // true
/*
* undefined 衍生自 null
* 所以这两个值做相等判断时会返回true
* */
console.log(undefined == null); // true
/*
* NaN 不和任何值相等 ，包括它本身
* */
console.log(NaN == NaN); // false
/*
* 通过函数isNaN()来判断一个值是否是NaN
* */
console.log(isNaN(NaN)); // true
/*
* != : 不相等
* 不相等返回true，相等返回false
* 不相等也会对变量进行类型转换，如果转换后相等，也会返回false
* */
console.log(10 != "10"); // false
/*
* 全等 ： ===
* 用来判断两个值是否全等，与相等类似，不同的是它不会做自动类型转换
* 如果两个值类型不同，直接返回false
* */
console.log("123" === 123); // false
/*
* 不全等 ： !==
* 用来判断两个值是否不全等，与不等类似，不同的是它不会做自动类型转换
* 如果两个值类型不同，直接返回true
* */
</script>
</head>
<body>
</body>
</html>
9）条件运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 条件运算符右称三元运算符
* 语法：
* 条件表达式 ? 语句1 : 语句2 ;
* */
var a = 10;
var b = 20;
// a > b ? alert("a大") : alert("b大");
// 获取最大值
var max = a > b ? a : b;
console.log("max = " + max);
</script>
</head>
<body>
</body>
</html>
10）运算符优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 使用 , 分隔多个语句，一般可以在声明多个变量时使用
* */
var a,b,c; // 同时声明多个变量
a = 10;
b = "10";
c = true;
var d = 1, e = "2", f = false; // 同时声明多个变量并赋值
console.log(d);
console.log(e);
console.log(f);
/*
* 优先级：
* 先乘除，后加减
* 优先级表查看
* */
</script>
</head>
<body>
</body>
</html>
11.代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 代码块：
* 程序是有一条一条语句构成
* 语句是按照自上向下的顺序一条一条执行的
* 在JS中，可以使用 {} 来为语句进行分组
* 同一个{}中语句我们称为是一组语句
* 他们要么都执行，要么都不执行
* 一个{}中的语句我们称为一个代码块
* 一个代码块后不用写 ; 结束
*
* Js中代码块只有分组作用，没有其他用途
* */
{
var a = "java";
alert("代码块");
console.log(123);
document.write("厉害了，我的javascript！");
}
console.log(a); // 代码块中内容，在外部完全可见
</script>
</head>
<body>
</body>
</html>
12.if语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 流程控制语句
* Js程序从上到下一行一行执行
* 通过流程控制语句可以控制程序执行流程，使程序可以根据一定条件选择执行
*
* 语句分类：
* 1.条件判断语句
* 2.条件分支语句
* 3.循环语句
*
* 条件判断语句：
* if语句：
* 语法一：
* if(表达式){
*
* 语句;
* }
*
* 语法二：
* if(表达式){
* 语句1;
* } else {
* 语句2;
* }
*
* */
if(true) {
alert("if条件判断语句");
}
/*
* prompt("提示文字")
* 可以弹出一个提示框，该提示框中会带有一个文本框，用户可以在文本框中输入一段内容，
* 该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字。
*
* 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容
* */
var str = prompt("请输入内容：");
alert(str);
</script>
</head>
<body>
</body>
</html>
13.条件分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 条件分支语句也叫switch语句
*
* 语法：
* switch(条件表达式){
* case 表达式1:
* 语句;
* break;
* case 表达式2:
* 语句;
* break;
* ...
* default:
* 语句;
* break;
* }
* */
</script>
</head>
<body>
</body>
</html>
14.while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 循环语句：
* 通过循环语句，可以反复执行一段代码多次
*
* while循环
* 语法：
* while(条件表达式){
* 语句； // 循环体
* }
*
* do while()循环
* 语法：
* do{
* 语句;
* } while(条件表达式);
* */
</script>
</head>
<body>
</body>
</html>
15.for循环
初始化表达式定义变量用 var 不能用int 等类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* for循环
* 语法：
* for(初始化表达式;条件表达式;更新表达式){
* 语句;
* }
*
* */
for (var i = 1; i < 10; i++) {
console.log("i = " + i);
}
// 嵌套for循环
for (var i = 1; i < 10; i++) {
for (var j = 1; j < 10; j++) {
console.log("i = " + i + " j = " + j);
}
}
</script>
</head>
<body>
</body>
</html>
16.break和continue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* break关键字可以用来退出switch或循环语句
* 不能在if语句中使用break和continue
* break关键字，会立即终止离它最近的循环语句
*
* */
var i = 1;
while (true) {
if (i == 10) {
alert(i);
break;
}
document.write(i+"<br/>");
i++;
}
/*
* continue关键字可以用来跳过当此循环
* 同样continue也是默认只会对离它最近的循环起作用
* */
outer: // 标签
for (var i=0;i<5;i++) {
for (var j= 0;j<5;j++) {
continue outer; // 跳转到标签处
console.log("--->" + j);
}
}
// 在程序执行之前，开启计时器
// console.time("计时器名字")，可以用开启一个计时器
// 它需要一个字符串作为参数，这个字符串将会作为计时器标识
console.time("test");
for (var i= 2;i<=10000;i++) {
var flag = true;
for (var j=2;j<i;j++) {
if(i%j==0) {
flag = false;
break;
}
}
if (flag) {
console.log(i);
}
}
// 终止计时器：console.timeEnd()用来停止一个计时器，需要一个计时器名字作为参数
console.timeEnd("test");
</script>
</head>
<body>
</body>
</html>
本文来自博客园，作者：Lz_蚂蚱，转载请注明原文链接：https://www.cnblogs.com/leizia/p/14552893.html
浙公网安备 33010602011771号