JS的快速入门
前端开发：JS的入门02
三元表达式
?:
表达式1 ? 代码1 : 代码1;
语法解析 :
- 表达式1成立 , 就执行代码1, 否则就执行代码2
- 如果代码1或者代码2有结果, 那么这个三元表达式的结果就是代码1或者代码2的结果
表达式1可以是哪些表达式 :
- 关系表达式
- 布尔类型的值
一般表达式都会有一个结果 要不就直接输出, 要不就是用一个变量保存
数据转换
显示转换，隐式转换
显示转换：
转换成String类型
- 其他数据类型转换成字符串（String类型）：String(变量名或者数据)
可以转换undefined和null - 变量名.toString()
不可以转换undefined和null
转换成数字类型： - 数据+"" 在数据后面加一个空字符串就可以实现转换
转换成number类型
-
parseInt() 把其他数据类型转换成整数类型 偏向于转换字符串
特点 :
(1) 从左到右解析,遇到非数字字符, 就停止解析, 输出已经解析出的数字
(2) 如果第一字符就是非数字字符, 就无法转换, 得到NaN -
parseFloat() 把其他数据类型转换成小数
与parseInt特点一样, 唯一的区别, 就是可以解析小数 -
Number() 把其他数据类型转换成数字
特点
(1) 可以把其他数据类型转换成数字类型, 偏向于转布尔类型的数据
(2) 如果转换的数据里面有任意一个是非数字字符(小数点除外), 那么得到的结果就是NaN
(3) 注意undefined 转换成数字, 是NaN null 是0
(4) 转布尔类型 true 是1 false是0 -
在数据前面加 +
特点 :
跟Number()转换的原理一样, 特点也一样
把+ 当做数学里面的正负号来用
在我们算术运算符里面, 运算符两边的操作数必须是数字
转换成布尔类型
- Boolean()
- 转换成false的8种情况，（其他都是true）：0，-0，null，NaN,undefined,"",false，document.all
隐式转换：
1.转换成字符串：+ 字符串连接符，运算符两边，只要有一边是字符串，那么就会把另外一边转成字符串进行拼接
2.转换成数字：自增自减，算数运算符（除+作为字符串连接符以外）两边必须是数字才能计算
3.转换成布尔类型：！ 逻辑非的操作必须是布尔类型的，计算机自动转换
短路运算
在逻辑表达式中，如果第一个式子就可以决定整个逻辑表达式的结果，那么第二个式子就不用计算了
1.逻辑与的短路运算：找假
在逻辑与表达式中，如果第一个式子的结果为false，那么该逻辑表达式的结果就是第一个式子的值，否则就是第二个式子的值
2.逻辑或的短路运算：找真
在逻辑或表达式中，如果第一个式子的结果为true，那么该逻辑表达式的结果就是第一个式子的值，否则就是第二个式子的值
3.逻辑非没有短路运算
分支结构 :
1. if
语法结构 :
if (表达式) {
条件成立时执行的代码
}
表达式可以是哪些 :
- 关系表达式
- 布尔类型的值
- 其他类型的值
if结构里面的{} 在条件成立时需要执行的代码只有一行时可以省略, 但是一般不要省略
2. if else(用的最多)
语法结构 :
if(表达式) {
条件成立时执行的代码(代码1)
} else {
条件不成立时执行的代码(代码2)
}
语法解析 :
- 当表达式成立时, 执行代码1, 否则执行代码2
- if-else 是表示两个互斥的结构, 只满足其中一个 , 两个大括号的里面的代码不可能同时执行
- else 后面绝对不能接()
3. if else-if else
语法结构 :
if(条件1) {
条件1成立时执行的代码
} else if (条件2) {
条件2成立时执行的代码
}
…
else {
以上条件都不满足的时候, 执行的代码
}
特点 :
- if-else if 是做多条件判断的
- 所有大括号里面的代码只会执行一个
4. swicth case
switch-case 主要用于固定值匹配
switch-case 匹配规则 : 匹配值必须是全等的
break的作用 : 是用来结束switch-case语句的 可以不写, 但是不写 会出现穿透现象（防止穿透）
break只能用于switch语句和循环语句
循环结构 :
while 代码结构 :
while(条件 true/ false) {
循环体 : 重复执行的代码
}
特点 : 先奏后斩
结构解析 :
判断条件是否成立, 如果成立, 执行循环体代码, 重复判断条件是否成立
如果不成立, 跳出循环, 执行大括号之后的代码
条件语句可以是哪些 :
1 .关系表达式
2. 布尔类型的值
3. 其他类型的值 (都会转换成布尔类型)
do-while结构 :
do-while 结构
do {
循环体 : 条件成立时重复执行的代码
} while (判断条件 true / false);
结构解析 : 先无条件执行一遍循环体, 然后再判断, 如果条件成立, 就重复执行循环体代码
特点 : 先斩后奏
for循环结构(最常用) :
for(语句1 ; 语句2 ; 语句3) {
循环体 : 条件成立时重复执行的代码
}
语句1 : 声明一个变量, 来记录循环次数, 叫做循环变量
语句2 : 判断条件(通常是条件表达式), 他是用来控制循环的结束还是继续
语句3 : 通常都是循环变量的自增或者自减
结构解析 :
1. 执行语句1(声明循环变量)
2. 执行语句2, 判断条件是否成立：
（1） 如果成立 执行循环体代码
（2） 循环变量自增, 重复执行步骤2
如果不成立, 就跳出循环, 执行大括号外面的代码
三种循环结构的适用场景 :
while : 适用于循环次数不固定的场景
do-while : 适用于循环次数不固定的场景, 但是循环体代码必须无条件执行一次
for : 适用于循环次数固定的场景
三种循环的注意点 :
for :
- 小括号里面的语句都可以省略, 但是分号不能省略, 三个语句都省略了, 就变成死循环了
- 循环变量的定义可以提到循环外
- 循环变量自增可以写在循环体里面
while :
- 循环变量 循环条件 循环变量的自增或者自减 都必须有
- 循环变量自增或者自减一定不能忘
do-while :
- 循环变量 循环条件 循环变量的自增或者自减 都必须有
- 循环变量自增或者自减一定不能忘
循环的解析思想
箩筐思想求和
1. 声明空箩筐
2. 遍历萝卜堆数
3. 计算萝卜总数
打擂思想求极值
1. 声明一个空擂主
2. 遍历所有的挑战者
3. 依次和擂主PK
开关思想数组去重
循环的嵌套 :
一个循环套着一个循环
循环嵌套中, 我们要找到外层循环变量和内存循环变量之间的关系
外层循环决定行, 内层循环决定列
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
//1.电话
// var yewu=+prompt("请输入要办理的业务：1.余额查询；2.取款；3.转账；0.退出系统");
// while(true){
// if(yewu==1){
// alert("余额查询中...");
// break;
// }else if(yewu==2){
// alert("取款进行中...");
// break;
// }else if(yewu==3){
// alert("转账进行中...");
// break;
// }else if(yewu==0){
// alert("退出系统，谢谢使用");
// break;
// }else{
// alert("业务出错");
// break;
// }
// }
// var yewu=+prompt("请输入要办理的业务：1.余额查询；2.取款；3.转账；0.退出系统");
// while(true){
// if(yewu==1){
// alert("余额查询中...");
// break;
// }else if(yewu==2||yewu==3){
// alert("系统维护中。。。");
// break;
// }else if(yewu==0){
// alert("退出系统，谢谢使用");
// break;
// }else{
// alert("业务出错");
// break;
// }
// }
// 2.奇数和偶数和3的倍数
// var num=1;
// var onum=0;
// var jnum=0;
// var sbnum=0;
// while(num<=100){
// if(num%2==0){
// onum+=num;
// console.log("偶数和"+onum);
// }else{
// jnum+=num;
// console.log("奇数和"+jnum);
// }
// num++;
// }
//
// while(num<=100){
// if(num%3==0){
// sbnum += num;
// console.log("3的倍数和"+sbnum);
// break;
// }
// num++;
// }
// 3.猜数字
// var n1=Math.ceil(Math.random()*10);
// var n2;
// while(true){
// n2=+prompt("请输入0-9之间的整数");
// if(n2>n1){
// alert("猜大了");
// }else if(n2<n1){
// alert("猜小了");
// }else if(n2==n1){
// alert("猜对了");
// break;
// }else{
// alert("别搞我");
// }
// }
//
// 4.月份
// var month;
// while(true){
// month=+prompt("请输入月份");
// switch(month){
// case 12:
// case 1:
// case 2:
// alert("冬天");
// break;
// case 3:
// case 4:
// case 5:
// alert("春天");
// break;
// case 6:
// case 7:
// case 8:
// alert("夏天");
// break;
// case 9:
// case 10:
// case 11:
// alert("秋天");
// break;
//
//
// default:
// alert("别搞我");
// break
// }
//
// }
// 5.1-100随机数
// var num;
// while(true){
// num=Math.ceil(Math.random()*100);
// if(num<20){
// alert("随机数为"+num+"结果为"+(num+=30));
// }else if(num>=20 && num<50){
// alert("随机数为"+num);
// }else if(num>=50){
// alert("随机数为"+num+"结果为"+(num-=20));
// }else{
// alert("别搞我");
// }
// }
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
// 1. 请写1个程序,打印100次 新年到啦
// for(var i=0;i<100;i++){
// console.log("新年到了");
// }
// 2.请写1个程序,接收用户输入1个整数. 然后打印这个整数的2倍 接收5次.
// var num=parseInt(prompt("请输入一个整数"));
// for(var i=0;i<5;i++){
// console.log(num=num*2)
// }
// 3.打印100-200之间的整数
// for(var i=100;i<=200;i++){
// console.log(i);
// }
// 4.打印100-200之间能被7整除的数
// for(var i=100;i<=200;i++){
// if(i%7==0){
// console.log(i);
// }
// }
// 5.打印1-100之间所有整数的和
// for(var i=1,num=0;i<=100;i++){
// num+=i;
// }
// console.log(num);
// 6.打印1-100之间所有偶数的和
// for(var i=1,num=0;i<=100;i++){
// if(i%2==0){
// num+=i;
// }
//
// }
// console.log(num);
// 7.请用户输入5个数, 将最大的那个数打印出来
// var n1= +prompt("第一个数"),
// n2= +prompt("第二个数"),
// n3= +prompt("第三个数"),
// n4= +prompt("第四个数"),
// n5= +prompt("第五个数");
// if(n1>n2&&n1>n3&&n1>n4&&n1>n5){
// alert("最大值为："+n1);
// }else if(n2>n1&&n2>n3&&n2>n4&&n2>n5){
// alert("最大值为："+n2);
// }else if(n3>n1&&n3>n2&&n3>n4&&n3>n5){
// alert("最大值为："+n3);
// }else if(n4>n1&&n4>n2&&n4>n3&&n4>n5){
// alert("最大值为："+n4);
// }else if(n5>n1&&n5>n2&&n5>n3&&n5>n4){
// alert("最大值为："+n5);
// }
// 方法2
// var num;
// var max=-Infinity;
// for(var i=0;i<5;i++){
// num=+prompt("请输入第"+i"个数字");
// if(num>max){
// max=num
// }
// }
// alert("最大值为："+max);
// 8.用户输入学生的人数，然后依次输入每一个学生的成绩，输入完毕后计算平均成绩
// 提示 : 必须使用循环来实现
// var num=+prompt("请输入学生人数");
// var sc=0
// var chengji;
// for(var i=0;i<num;i++){
// chengji= +prompt("请输入成绩");
// sc+=chengji;
//
// }
// document.write("平均成绩为："+(sc/num));
// 9.输入某年某月某日，判断这一天是这一年的第几天？
// 以3月5日为例，应该先把前两个月的加起来，然后再加上5天即本年的第几天，
// 特殊情况，闰年且输入月份大于3时需考虑多加一天。
// var year=+prompt("请输入年份");
// var month=+prompt("请输入月份");
// var day=+prompt("请输入几号");
// var count=0;
// switch(month){
// case 12:
// count+=30;
// case 11:
// count+=31;
// case 10:
// count+=30;
// case 9:
// count+=31;
// case 8:
// count+=31;
// case 7:
// count+=30;
// case 6:
// count+=31;
// case 5:
// count+=30;
// case 4:
// count+=31;
// case 3:
// count+=28;
// case 2:
// count+=31;
// case 1:
// count+=day;
// default:
// break;
// }
// if((year%400==0||(year%4==0&&year%100!=0))&&month>2){
// count++;
// }
// alert(count);
for(var i=1; i<=5;i++){
for(var j=1;j<=i;j++){
document.write(i+"*"+j+" ");
}
document.write("</br>")
}
</script>
</body>
</html>
来源：CSDN
作者：weixin_45060872
链接：https://blog.csdn.net/weixin_45060872/article/details/103738757