目录
[var 关键字声明变量](#var 关键字声明变量)
[5. 数据检测](#5. 数据检测)
[8.选择结构if(if - else)](#8.选择结构if(if - else))
1.js常用的输出语句
-
document.write() HTML文档输出
-
console.log(); 控制台输出
-
prompt() 输入框
-
alert 弹出框
案例:js初体验
1.代码
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js常用输出语句</title> </head> <body> <script> // HTML输出 document.write("hello world"); //控制台输出 console.log("hello world"); //带提示的输入框 prompt("请输入你的名字"); //弹出框 alert("/**/是js的多行注释+\n //是js的行注释"); </script> </body> </html>
2.效果
输入框
.
alert框
HTML输出
控制台输出
2.js命名规则
- 不能以数字开头，不能以运算符号开头
- 严格区分大小写
- 不能使用javaScript关键字命名
- 下划线命名:单词以下划线分割
- 例子: var my_score = 100;
- 驼峰命名法:首字母大写
- 例子: var myScore = 100;
3.js赋值
var 关键字声明变量
varmyFirstName = "惜.己";
案例:交换两个变量的内容
var leftHand = "水果刀"; //右手
var rightHand = "饭叉"; //左手
var table = "" //桌子
/**
例如你想交换左手和右手的东西，那么肯定需要先把手中的东西放在桌子上，然后在交换，然后再从桌子上拿去，交换完成
*/
//模拟
table = leftHand;****//左手的东西放在桌子上
leftHand = rightHand;****//右手的东西给左手
rightHand = table;****//右手从左手拿取物品
console.log(leftHand);
console.log(rightHand);
完整代码
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var leftHand = "水果刀"; //右手 var rightHand = "饭叉"; //左手 var table = "" //桌子 /** 例如你想交换左手和右手的东西，那么肯定需要先把手中的东西放在桌子上，然后在交换，然后再从桌子上拿去，交换完成 */ //模拟 table = leftHand; //左手的东西放在桌子上 leftHand = rightHand; //右手的东西给左手 rightHand = table; //右手从左手拿取物品 console.log(leftHand); console.log(rightHand); </script> </body> </html>
效果
4.js数据类型
布尔类型
false , true;
//定义一个布尔类型
var flag = false;
cosnole.log(flag)
var flag_two = true;
console.log(flag_two);
整数
定义一个整数
//八进制
var oct = 032 ; //八进制 的二十六 八进制以0开头
var dec = 100 ; // 十进制的100
var hex = 0x1a; //十六进制的 26 十六进制以0x开头
浮点数
//定义一个浮点数
var myFloat = 3.1415926;
字符串
//单引号字符串
var mySingleString = '我的第一个字符串';
//多引号字符串
var myDoubleString = "我的第二个字符串"
空型
//空型只有一个null
//定义一个空型
var myNull = null;
console.log(myNull);
未定义型
var a ;
console.log(a);
//输出结果为undefined
5. 数据检测
typeof 用于检测数据类型
console.log(typeof2); //number
console.log(typeof'2'); //string
console.log(typeoftrue); //布尔值
console.log(typeofnull); //object
console.log(typeofundefined); //undefined
6.算术运算符
-
- 两个数相加
-
- 两个数相减
- * 两个数相乘
- / 两个数相除
- % 两个数相除取模（取余数）
- ++myNumber 前自增 （计算之前本身先加1）
- --myNumber 前自减 （计算之前本身先减一）
- myNumber-- 后自减 （计算之后本身自己减一）
- myNumber++ 后自增 （计算之后本身加1）
7.比较运算符
- > 大于号
- < 小于号
- >= 大于或等于
- <= 小于或等于
- == 等于
- != 不等于
- === 全等
- !== 不全等
案例:计算圆周长和面积
1.代码
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算圆周长和面积</title> </head> <body> <script> //计算圆 var ricle = prompt("输入圆的半径") var pi = 3.14; //计算圆的周长 document.write("圆的周长为：" + 2*pi*ricle + "<br>"); //计算圆的面积 document.write("圆的面积为：" + pi*ricle*ricle); </script> </body> </html>
2.效果
8.选择结构if(if - else)
if
if(条件){
满足条件执行的代码
}
if-else
if(条件){
满足条件执行的代码
}else{
不满足条件执行的代码
}
案例:判断成绩等级
1.代码
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>判断成绩等级</title> </head> <body> <script> // 判断成绩等级 //首先输入成绩 var score = prompt("请输入你的成绩"); //使用if else 判断成绩 if (score >= 90) { alert("你的成绩为优秀"); } else if (score >= 80) { alert("你的成绩为良好"); } else if (score >= 70) { alert("你的成绩为中等"); } else if (score >= 60) { alert("你的成绩为及格"); } else { alert("你的成绩为不及格"); } //页面输出成绩 document.write("你的成绩为：" + score); </script> </body> </html>
2.效果
9.switch语句
switch(变量){
case(值1): 执行代码1 ; break;
case(值2): 执行代码2 ; break;
case(值3): 执行代码3 ; break;
case(值4): 执行代码4 ; break;
case(值5): 执行代码5 ; break;
default: 默认执行
}
案例:改写判断成绩等级
1.代码
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>判断成绩改</title> </head> <body> <!-- 使用switch --> <script> var score = parseInt(prompt("请输入成绩")); switch(true){ case score >= 90 && score <= 100: alert("优秀"); break; case score >= 80 && score < 90: alert("良好"); break; case score >= 70 && score < 80: alert("中等"); break; case score >= 60 && score < 70: alert("及格"); break; default: alert("不及格"); break; } document.write("成绩:"+score) </script> </body> </html>
2.效果
10.for循环
for(var 变量名;变量条件判断;变量值进行操作){
满足条件执行的代码;
}
//注: continue 跳出当次循环不执行后面的代码
案例:从1输出到100
1.代码
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>从1输出到100</title> </head> <body> <script> //从1输出到100 for(var i=1;i<=100;i++){ document.write(i+"<br>"); } </script> </body> </html>
2.效果
11.while循环
while(条件){
执行代码
}
// 注：如果条件不满足直接跳出循环 ，或者使用break跳出当前层循环
案例：从1输出到100改
1.代码
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>从1输出到100改</title> </head> <body> <script> //从1输出到100 //while 实现 var i = 1 ; while (i<=100){ document.write(i+"<br>"); i++; } </script> </body> </html>
2.效果
12.嵌套循环
for
for(var 变量 ;判断是否满足条件；变量变化操作){
满足条件执行代码
for(var 变量2;判断是否满足条件；变量变化操作){
满足条件执行代码
}
}
while
while (条件){
执行代码
while(条件){
执行代码
}
}
案例:输出一个三角形
这段HTML中的JavaScript代码实现了用两种不同的循环结构（while和for）来生成一个简单的文本金字塔，并在两个金字塔之间插入一条水平线以作区分。
-
使用
while循环生成金字塔- 初始化变量
i为1。 - 当
i小于等于5时，执行循环体。- 初始化变量
j为1。 - 当
j小于等于i时，在页面上输出一个"^"符号，并递增j。 - 每完成一轮内层循环后，在页面上输出换行符
<br>以开始新的一行。 - 递增
i以便进入下一轮外层循环。
- 初始化变量
- 结果是在网页上输出一个由"^"组成的金字塔形状。
- 初始化变量
-
使用
for循环生成金字塔- 外层循环从
i=1到i=5。- 内层循环从
j=1到j=i，每次循环在页面上输出一个"*"符号。 - 每完成一轮内层循环后，在页面上输出换行符
<br>以开始新的一行。
- 内层循环从
- 这个循环同样生成一个金字塔形状，但这次是由"*"组成。
- 外层循环从
-
添加水平线
- 在两个金字塔之间，使用
document.write("<hr>")插入一条水平线，以便于区分两个不同方法生成的结果。
- 在两个金字塔之间，使用
1.代码
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>输出一个三角型</title> </head> <body> <script> //输出一个金字塔 var i = 1; while(i <= 5){ var j = 1; while(j <= i){ //输出^号 document.write("^"); j++; } document.write("<br>"); i++; } document.write("<hr>"); /** * for输出一个金字塔 */ for(var i = 1; i <= 5; i++){ for(var j = 1; j <= i; j++){ document.write("*"); } document.write("<br>"); } </script> </body> </html>
2.效果
