编写位置
- 需要在浏览器中运行,所以JS代码需要在网页中编写
- JS代码写到 <script> 标签中
- 一般将script标签写到head中
- 属性
- type : 默认值text/javascript 可以不写
- src : 当需要引入一个外部的js文件时,使用该属性指向文件的地址
<script type="text/javascript">
//控制浏览器弹出一个警告框
alert("这是我的第一行JS代码");
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//控制浏览器弹出一个警告框
// alert("这是我的第一行JS代码");
/*
让计算机在页面中输出一个内容
document.write()可以向body中输出一个内容
document.write("看我出不出来~~");
* */
/*
向控制台输出一个内容
console.log("你猜我在哪出来?");
* */
alert("这是我的第一行JS代码");
document.write("看我出不出来~~");
console.log("你猜我在哪出来?");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
alert("我是一个内部JS代码");
</script>
</head>
<body>
</body>
</html>
js/script.js
alert("我是外部JS文件中的代码");
-
js代码可以编写到标签的 onclick 属性中
-
可以将js代码写在超链接的 href属性中,点击超链接时,会执行js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
alert("我是script标签中的代码!!");
</script>
</head>
<body>
<button onclick="alert('讨厌,你点我干嘛~~');">点我一下</button>
<a href="javascript:alert('让你点你就点!!');">你也点我一下</a>
<a href="javascript:;">你也点我一下</a>
</body>
</html>
注释
- 单行注释
//注释内容
- 多行注释
/*注释内容
...
...
*/
标识符
自主命名的都是标识符
-
第一个字符必须是 字母 、下划线 或 $
-
其它字符可以是 字母、 下划线、 $ 、 数字
-
ECMAScript标示符采用 驼峰命名法
-
标示符不能是 关键字 和 保留字
关键字
1 | 2 | 3 | 4 | 5 |
---|---|---|---|---|
break | do | instanceof | typeof | case |
else | new | var | catch | finally |
return | void | continue | for | switch |
while | default | if | throw | delete |
in | try | function | this | with |
debugger | false | true | null |
保留字符
1 | 2 | 3 | 4 | 5 | 6 |
---|---|---|---|---|---|
class | enum | extends | super | const | export |
import | implements | let | private | public | yield |
interface | package | protected | static |
其它不建议使用的标示符
1 | 2 | 3 | 4 | 5 | 6 |
---|---|---|---|---|---|
abstract | double | goto | native | static | boolean |
enum | implements | package | super | byte | export |
import | private | synchronize | char | extends | int |
protected | throws | class | final | interface | public |
transient | const | float | long | short | volatile |
arguments | encodeURI | Infinity | Number | RegExp | undefined |
isFinite | Object | String | Boolean | Error | RangeError |
parseFloat | SyntaxError | Date | eval | JSON | ReferenceError |
TypeError | decodeURI | EvalError | Math | URIError | decodeURIComponent |
Function | NaN | isNaN | parseInt | Array | encodeURICOmponent |
变量
- 变量声明
var 变量名;
- 变量赋值
变量名=变量值;
- 同时声明和赋值
var 变量名=变量值;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a;
a = 123;
a = 456;
var b = 789;
var age = 80
console.log(age);
</script>
</head>
<body>
</body>
</html>
数据类型
基本数据类型那个:
- 字符串型(String)
- 数值型(Number)
- 布尔型(Boolean)
- null型(Null)
- undefined型(Undefined)
引用数据类型
- Object
字符串型(String)
- 字符串需要使用 ’ 或 " 括起来
var str = "hello";
console.log(str);
转义字符
转义字符 | 含义 |
---|---|
\n | 换行 |
\t | 制表 |
\b | 空格 |
\r | 回车 |
\\ | 反斜线 |
\’ | 单引号 |
\" | 双引号 |
- 其它数值转换为字符串
toString() //调用被转换数据类型的toString()方法,该方法不会影响到原变量的类型,会将转换的结果返回
String() //String()函数 ,将被转换的数据作为参数传递给函数
拼串 // 字符串做加法
var a = 123;
var b = a.toString();
console.log(typeof a);
console.log(a)
console.log(typeof b);
console.log(b)
var a = 123;
a = a.toString();
console.log(typeof a);
console.log(a)
var a = 123;
a = String(a);
console.log(typeof a)
数值型(Number)
var a = 123;
var b = "123";
console.log(a);
console.log(typeof a);
console.log(b);
console.log(typeof b);
- Number数字大小范围
console.log(Number.MAX_VALUE); //js中的最大值
± 1.7976931348623157e+308
超过这个范围,则返回 ± Infinity(无穷)
NaN , 非数值(Not a Number)是一个特殊的数值,JS中当对数值进行计算时没有结果返回, 则返回 NaN
a = "abc" * "bdc"
console.log(a)
5e-324 零以上的最小值
a = Number.MIN_VALUE;
console.log(a);
使用JS进行浮点数运算,可能得到一个不精确的结果
var c = 0.1 + 0.2;
console.log(c);
数值的转换
- 非数值转换为数值
Number() // 转换任意类型的数据
parseInt() // 将字符串中的有效的整数转换为数值
parseFloat() // 将字符串中的有效的小数转换为浮点数
注意:
- 字符串是一个空串或者是高一二全是空格的字符串,则转换为0
- 布尔转数字, true 转成 1 , false 转成 0
- null 转成 0
- undefined 转成 NaN
对于非String使用 parseInt() 或 parseFloat() ,它会先将其转换为String,再操作
var a = "123";
a = Number(a);
console.log(typeof a);
console.log(a)
var a = "123px";
a = parseInt(a)
console.log(typeof a);
console.log(a)
运行结果:
[Web浏览器] "number" /js01/06.转换为number.html (9)
[Web浏览器] "123" /js01/06.转换为number.html (10)
var a = "123.456px";
a = parseFloat(a);
console.log(typeof a);
console.log(a);
运行结果:
[Web浏览器] "number" /js01/06.转换为number.html (9)
[Web浏览器] "123.456" /js01/06.转换为number.html (10)
js中表示不同进制的数
var a = 0xff; //十六进制数
var b = 070; //八进制数
var c = 0b10; //二进制数 (不是所有的浏览器都支持)
console.log(a);
console.log(b);
console.log(c);
说明:显示时都以十进制显示
a = "070";
a = parseInt(a, 10); // 第二个参数,指定以10进制解析
布尔型(Boolean)
- 布尔型也被称为逻辑值类型或者真假值类型
- 布尔型只有 真(true) 和 假(false) 两个值
- 其它数据类型可以通过 Boolean()函数转换为布尔类型
数据类型 | 转换为true | 转换为false |
---|---|---|
Boolean | true | false |
String | 任何非空字符串 | “”(空字符串) |
Number | 任何非0数字 | 0 和 NaN |
Undefined | n/a | undefined |
Object | 任何对象 | null |
var bool = true;
console.log(bool);
console.log(typeof bool);
var a = 123;
a = Boolean(a); //转换为布尔值
console.log(typeof a);
console.log(a);
null型(Null)
null表示一个空的对象,typeof检查null 会返回一个Object
var a = null;
console.log(a);
console.log(typeof a);
undefined型(Undefined)
- 只有一个值, undefined
- 在使用 var 声明变量但未对其初始化,这个变量的值就是 undefined
var b;
console.log(b);
console.log(typeof b);
typeof运算符
检查一个变量的数据类型,将其类型以字符串的形式返回
typeof 数据
- 返回结果
- 数值 number
- 字符串 string
- 布尔型 boolean
- undefined undefined
- null object
运算符
- +
- -
- *
- /
- %
var a = 123;
var result;
result = a + 1;
result = 456 + 789;
result = true + 1;
result = true + false;
result = 2 + null;
result = 2 + NaN; //任何值和NaN做运算都得NaN
result = "123" + "456"; //字符串做加法, 拼接
var str = "锄禾日当午," +
"汗滴禾下土," +
"谁知盘中餐," +
"粒粒皆辛苦,";
result = 123 + "1"; //任何值和字符串做加法,都会先转换为字符串,然后做拼接
c = 123;
c = c + "";
console.log("c = " + c);
result = 1 + 2 + "3"; //33
result = "1" + 2 + 3; //123
console.log("result = " + result);
任何值做 - * / 运算时都会自动转换为 number
var result;
result = 100 - 5;
result = 100 - true;
result = 100 - "1"; // 99
result = 2 * 2;
result = 2 * "8";
result = 2 * undefined; //NaN
result = 2 * null; // 0
result = 4 / 2;
result = 3 / 2;
console.log("result = " + result);
var d = "123";
d = d - 0;
console.log(typeof d);
console.log(d);
result = 9 % 5;
console.log("result = " + result);
一元运算符
- + 正号
- - 负号
var a = 123;
a = true;
a = "18";
a = +a;
console.log(typeof a);
console.log(a);
运行结果:
[Web浏览器] "number" /js01/10.一元运算符.html (11)
[Web浏览器] "18" /js01/10.一元运算符.html (12)
var result = 1 + +"2" + 3; // 6
console.log("result = " + result);
自增和自减
- ++ 自增
- -- 自减
var a = 1;
//a++;
//++a;
console.log("a++ = " + a++);
console.log("++a = " + ++a);
console.log("a = " + a);
var c = 10;
c++;
console.log(c++);
var d = 20;
console.log(++d);
console.log(++d);
var d = 20;
d = d++;
console.log("d = " + d);
var n1 = 10, n2 = 20;
var n = n1++;
console.log("n = " + n);
console.log("n1 = " + n1);
n = ++n1;
console.log("n = " + n);
console.log("n1 = " + n1);
n = n2--;
console.log("n = " + n);
console.log("n2 = " + n2);
n = --n2;
console.log("n = " + n);
console.log("n2 = " + n2);
逻辑运算符
逻辑运算符会返回一个布尔值
- ! 逻辑非 (NOT)
取反
var a = true;
a = !a;
console.log("a = " + a);
非布尔值进行非运算,先将其转换为布尔值,然后做非运算
为任意的数据类型做两次非运算,可将其转换为布尔值
var b = 10;
b = !b;
console.log("b = " + b);
console.log(typeof b);
- && 逻辑与 (AND)
有0得0,全1得1
若左值为假,则不运算右值
var result = true && true;
result = true && false;
result = false && false;
console.log("result = " + result);
对于非布尔值
- 如果都为true,则返回后边的(如果第一个值为true,则返回第二个值)
- 如果有false ,则返回靠前的false(如果第一个值为false,则返回第一个值)
var result = 1 && 2; // 2
result = 2 && 1; // 1
result = 0 && 2; // 0
result = 2 && 0; // 0
result = NaN && 0; // NaN
result = 0 && NaN; // 0
console.log("result = " + result);
- || 逻辑或 (OR)
有1得1,全0得0
若左值为真,则不运算右值
result = false || false;
result = true || false;
result = true || true;
console.log("result = " + result);
对于非布尔值
- 如果第一个值为true, 则返回第一个值
- 如果第一个值为false, 则返回第二个值
result = 1 || 2; // 1
result = 2 || 1; // 2
result = NaN || 1; // 1
result = NaN || 0; // 0
result = "" || "hello"; // hello
console.log("result = " + result);
赋值运算符
- =
- +=
- -=
- *=
- /=
- %=
var a = 10;
a += 5; //等价 a = a + 5;
a -= 2;
a *= 3;
console.log("a = " + a);
关系运算符
- >
- >=
- <
- <=
- ==
- !=
var result = 5 > 10; //false
result = 5 > 4; //true
result = 5 > 5; //false
console.log("result = " + result);
非数值比较:先将其转换为数字,然后在比较
任何值和 NaN做任何比较都是false
如果符合两边都是字符串时,不会转换为数字比较,而会分别比较字符串中字符的unicode编码(一位一位进行比较,如果一样,则比较下一位)
console.log(1 > true);//false
console.log(1 >= true);//true
console.log(1 > "0");//true
console.log(10 > null);//true
console.log(10 > "hello");//false
console.log(true > false);//true
console.log("1" < "5");
console.log("11" < +"5");// 注意:这里一定要转型!!
console.log("a" > "b");
附:
- js中输出unicode编码对应的字符
console.log("\u0031");
- 在网页中使用unicode编码
&#编码; // 这里的编码需要用 10进制
<h1>☠</h1>
相等运算符
使用 == 或 != 比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型,然后再比较
NaN不和任何值相等,包括它本身
可以通过isNaN()函数判断一个值是否为NaN
var b = NaN;
console.log(isNaN(b));
注意:
表达式 | 值 |
---|---|
null == undefined | true |
“NaN” == NaN | false |
5 == NaN | false |
NaN == NaN | false |
NaN != NaN | true |
false == 0 | true |
true == 1 | true |
true == 2 | false |
undefined == 0 | false |
null == 0 | false |
“5” == 5 | true |
全等
=== 全等
!== 不全等
比较时不会自动转换类型
console.log("123" === 123);//false
console.log(null === undefined);//false
console.log(1 !== "1");//true
条件运算符
条件运算符也称为 三元运算符
条件?语句1:语句2
执行过程:
条件为true,执行语句1并返回结果;条件为false,执行语句2并返回结果
如果条件表达式的值结果是一个非布尔值,会将其转换为布尔值,然后在运算
var a = 30;
var b = 20;
a > b ? alert("a大"):alert("b大");
var a = 30;
var b = 40;
var c = 50;
var max = a > b ? a : b;
//获取 a b c 中的最大值
max = max > c ? max : c;
console.log("max = " + max);
var a = 300;
var b = 140;
var c = 50;
var max = a > b ? (a > c ? a : c) : (b > c ? b : c);
console.log("max = " + max);
逗号
逗号可以在一条语句中执行多次操作
使用逗号运算符分隔的语句会从左到右顺序依次执行
var a, b, c;
var d=1, e=2, f=e;
运算符的优先级
运算符 |
---|
. [] new |
() |
++ -- |
! ~ +(单目) -(单目) typeof void delete |
% * / |
+(双目) -(双目) |
<< >> >>> |
< <= > >= |
== != !== === |
& |
^ |
| |
&& |
|| |
?: |
= += -= *= /= %= <<= >>= >>>= &= ^= |= |
, |
语句
- 表达式和运算符等内容可以理解成是语言中的单词,短语
- 语句(statement)是语言中一句完整的话
- 语句是一个程序的基本单位,js程序是由一条一条语句构成的,每条语句使用 ; 结尾
- js中的语句默认是从上到下顺序执行的
代码块
- 代码块是在大括号 {} 中写的语句将多条语句的集合视为一条语句来使用,要么都执行,要么都不执行
- js中的代码块,只有分组作用,代码块中的内容,在外部是完全可见的
{
var a = 10;
alert("hello");
console.log("你好");
document.write("语句");
}
console.log("a = " + a);
流程控制语句
- js中的语句默认是从上到下顺序执行的,可以通过流程控制语句来控制语句的执行顺序
流程控制语句分为:
-
条件语句
- if … else
- switch … case
-
循环语句
- while
- do … while
- for
if…else
语法:
if(expression){
statement;
...
}
if(expression){
statement;
...
}else{
statement;
...
}
if(expression){
statement;
...
}else if(expression){
statement;
...
}else if(expression){
statement;
...
}...
- if语句只能控制紧随其后的一条语句
- 该语句中只会有一个语句块执行
var a = 15;
if(a > 10 && a <= 20){
alert("a大于10, 并且a小于等于20");
}
var age = 50;
if(age >= 60){
alert("你已经退休了");
}else{
alert("你还没退休");
}
var age = 10;
if(age >= 100){
alert("太老了");
}else if(age > 80){
alert("也不小了");
}else if(age > 60){
alert("你也退休了");
}else if(age > 30){
alert("你已经中年了");
}else if(age > 17){
alert("你已经成年了");
}else{
alert("你还是个小孩");
}
输入函数
prompt() 弹出一个提示框,可以输入,输入内容作为函数的返回值
返回值是string类型
var score = prompt("请输入小明的期末成绩(0-100):");
if (score > 100 || score < 0 || isNaN(score) {
alert("拉出去毙了");
}else{
if(score == 100){
alert("给你一个宝马");
}else if (score >= 80) {
alert("给你一个手机");
}else if (score >= 60) {
alert("参考书");
}else{
alert("打");
}
}
输入三个数,按从小到大输出
var num1 = +prompt("请输入第一个数:");
var num2 = +prompt("请输入第二个数:");
var num3 = +prompt("请输入第三个数:");
if(num1 < num2 && num1 < num3){
//num1最小
if(num2 < num3){
alert(num1 + "," + num2 + "," + num3);
}else{
alert(num1 + "," + num3 + "," + num2);
}
}else if(num2 < num1 && num2 < num3){
//num2最小
if(num1 < num3){
alert(num2 + "," + num1 + "," + num3);
}else{
alert(num2 + "," + num3 + "," + num1);
}
}else{
//num3最小
if(num1 < num2){
alert(num3 + "," + num1 + "," + num2);
}else{
alert(num3 + "," + num2 + "," + num1);
}
}
switch … case
语法:
switch(表达式){
case 表达式1:
语句...
break;
case 表达式2:
语句...
break;
case 表达式3:
语句...
break;
default:
语句...
break;
}
执行时会依次将switch后的表达式的值与case后的表达式的值进行全等比较
- 如果比较结果为true,则从当前case处开始执行代码(当前case后的所有代码都执行),
- 如果比较结果为false,则继续向下比较,
- 如果所有的比较结果都为false,则执行default后的语句
var num = "1";
switch (num){
case 1:
console.log("一");
break;
case 2:
console.log("二");
break;
case 3:
console.log("三");
break;
default:
console.log("非法数字");
break;
}
var score = 61;
switch (parseInt(score/10)){
case 10:
case 9:
case 8:
case 7:
case 6:
console.log("合格");
break;
default:
console.log("不合格");
break;
}
var score = 59;
switch (true){
case score >= 60:
console.log("合格");
break;
default:
console.log("不合格");
break;
}
while
创建一个循环需要三个步骤:
- 初始化一个变量
- 条件表达式
- 更新表达式
语法:
while(表达式){
语句...
}
var i = 1;
while (i <= 10){
document.write(i + "<br/>");
i++;
}
var money = 1000;
var count = 0;
while (money < 5000){
money *= 1.05;
count++;
}
console.log("count = " + count + "年");
var score;
while (true){
score = prompt("请输入小明的期末成绩(0-100):");
if(score >= 0 && score <= 100){
break;
}
alert("请输入有效成绩");
}
if(score == 100){
alert("给你一个宝马");
}else if (score >= 80) {
alert("给你一个手机");
}else if (score >= 60) {
alert("参考书");
}else{
alert("打");
}
do … while
do…while 循环至少执行一次
语法:
do{
语句...
}while(表达式)
for
语法:
for(初值;表达式;步长){
语句...
}
for (var i = 0; i < 10; i++) {
document.write(i + "<br />");
}
var i = 0;
for (;i < 10;) {
document.write(i + "<br />");
i++;
}
/*打印1-100之间的奇数之和*/
var sum = 0;
for (var i = 1; i <= 100; i++) {
if(i % 2 != 0){
sum += i;
}
}
console.log(sum);
/*打印1-100之间所有7的倍数的个数及总和*/
var sum = 0, count = 0;
for (var i = 1; i <= 100; i++) {
if(i % 7 == 0){
//console.log(i);
sum += i;
count++;
}
}
console.log("总和 = " + sum);
console.log("个数 = " + count);
/*水仙花数指一个3位数,它的每个位上的数字的3次幂之和等于它本身
(例如: 1^3 + 5^3 + 3^3 = 153)
* */
for (var i = 100; i < 1000; i++) {
var bai = parseInt(i / 100);
var shi = parseInt((i - bai * 100) / 10);
var ge = i % 10;
if(bai * bai * bai + shi * shi * shi + ge * ge * ge == i){
console.log(bai + "^3" + " + " + shi + "^3" + " + " + ge + "^3" + " = " + i );
}
}
/*在页面中接收一个用户输入的数字,并判断该数是否是质数*/
//方法1
var num = +prompt("请输入一个数:");
//判断值合法
if(num <= 1){
alert("该值不合法!");
}else{
for (var i = 2; i < num; i++) {
if(num % i == 0){
break;
}
}
if(i == num){
console.log(num + "为质数");
}
}
//方法2
var num = +prompt("请输入一个数:");
//判断值合法
if(num <= 1){
alert("该值不合法!");
}else{
//默认当前num是质数
var flag = true;
for (var i = 2; i < num; i++) {
if(num % i == 0){
flag = false;
break;
}
}
if(flag == true){
console.log(num + "为质数");
}else{
console.log(num + "不是质数");
}
}
/*
*
* *
* * *
* * * *
* * * * *
*/
var N = 5;
for (var j = 1; j <= N; j++) {
for (var k = 0; k < N - j; k++) {
document.write(" ");
}
for (var i = 0; i < j; i++) {
document.write("* ");
}
document.write("<br />");
}
/*
* * * * *
* * * *
* * *
* *
*
*/
var N = 5;
for (var j = 0; j < N; j++) {
for (var k = 0; k < j; k++) {
document.write(" ");
}
for (var i = 0; i < N - j; i++) {
document.write("* ");
}
document.write("<br />");
}
/* 99乘法表 */
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
document.write(j +"x" + i + "=" + j * i + " ");
}
document.write("<br />");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
document.write("<span></span>"+j +"x" + i + "=" + j * i + "</span>")
}
document.write("<br />")
}
</script>
<style type="text/css">
span{
display: inline-block;
width: 80px;
}
</style>
</head>
<body>
</body>
</html>
/* 打印1-100之间的所有质数 */
for (var num = 2; num <= 100; num++) {
var flag = true;
for (var i = 2; i < num; i++) {
if(num % i == 0){
flag = false;
break;
}
}
if(flag == true){
document.write(num + "<br />");
}
}
break 和 continue
break
- break可以退出switch和循环语句
- break默认会结束最近的循环
- 可以为循环语句创建一个label,来标识当前循环
label:循环语句 - 使用break语句时,可以在break后跟一个label,break可以结束指定的循环
for (var i = 0; i < 5; i++) {
console.log(i);
if (i == 2) {
break;
}
}
outer:
for (var i = 0; i < 5; i++) {
console.log("@外层循环" + i);
for (var j = 0; j < 5; j++) {
break outer;
console.log("内层循环" + j);
}
}
continue
- continue只用于循环语句
- continue 跳过当次循环,继续下次循环
- 默认只会对离它最近的循环起作用
for (var i = 0; i < 5; i++) {
if (i == 2) {
continue;
}
console.log(i);
}
outer:
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j ++) {
continue outer;
console.log("--->" + j);
}
console.log("@---->" + i);
}
测试性能
/* 打印1-100之间的所有质数 */
//console.timeEnd()开始一个计时器,需要一个计时器的名字作为参数
console.time("test");
for (var num = 2; num <= 100; num++) {
var flag = true;
for (var i = 2; i <= Math.sqrt(num); i++) {
if(num % i == 0){
flag = false;
break;
}
}
if(flag == true){
document.write(num + "<br />");
}
}
//console.timeEnd()停止一个计时器,需要一个计时器的名字作为参数
console.timeEnd("test");