JavaScript学习笔记004-if判断0for循环

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

js原生代码

是学习一切js框架的基础

不管是现在很火的vue

还是想做全栈的node

都能很容易的学会

反之

只会调用框架

出了bug都不支持如何改正

要搞清楚的一点

是人玩js

而不是人被js玩

<!DOCTYPE html> <!-- 文档类型:标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字:英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/
#box{
width:300px;
height:200px;
background-color:pink;
}

</style>

</head>

<body> <!-- 网页主干:可视化区域 -->
<div id='box' class='box'>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>

<script>
// 流程判断(条件分支)

// 比较运算符:>大于,<小于,>=大于等于,<=小于等于,==等于,===全等于,!=不等于,!==全不等于

// 6个假值,'',0,NaN,false,undefined,null

// if 判断方法:只要真值时,不需要写else
if (true) {
console.log('帅!'); // 语句为真,输出此行
}

// if 判断方法:两个分支时
let shuai = 1;
let chou = 2;
if (shuai===1) {
console.log('帅!'); // 语句为真,输出此行
} else {
console.log('丑!'); // 语句为假,输出此行
}

// if 判断方法:多个分支时
let shuai = 1;
let chou = 2;
if (shuai===1) {
console.log('帅!'); // 1语句为真,输出此行
} else if (shuai===3){
console.log('丑!'); // 3语句为真,输出此行
} else if (shuai===5){
console.log('丑!'); // 5语句为真,输出此行
} else if (shuai===7){
console.log('丑!'); // 7语句为真,输出此行
} else if (shuai===9){
console.log('丑!'); // 9语句为真,输出此行
} else {
console.log('丑!'); // 语句为假,输出此行
}

// switch判断方法:比较对象为同一个,===时
let shuai = 1;
switch (shuai) {
case 1:
console.log('1语句为真,输出此行');
break; // 跳出
case 2:
console.log('3语句为真,输出此行');
break; // 跳出
case 3:
console.log('5语句为真,输出此行');
break; // 跳出
case 4:
console.log('7语句为真,输出此行');
break; // 跳出
case 5:
console.log('9语句为真,输出此行');
break; // 跳出
default:
console.log('语句为假,输出此行');
break; // 跳出
}

// 三目运算符:if 有且只有真假两个分支,并且每个分支只有一条语句
let shuai = 9;
if (shuai > 5) {
console.log('shuai大于5');
} else {
console.log('shuai小于等于5');
}
shuai > 5 ? console.log('shuai大于5') : console.log('shuai小于等于5'); // 三目简写方法1
console.log(shuai > 5 ? 'shuai大于5' : 'shuai小于等于5'); // 三目简写方法2

// 简单开关:取反
let mark = true;
let div01 =document.getElementById('box');
div01.onclick = function () {
if (mark) {
div01.style.width = '500px';
mark = false;
} else {
div01.style.width = '300px';
mark = true;
}
}

// for 循环
for (let i = 0; i < 6; i++) { // (计次变量;比较条件;递增1)
console.log(`第${i+1}次循环i值为${i}`);
}

// for 循环实际应用
let div = document.getElementsByTagName('div');
for (let i = 0; i < div.length; i++) {
div[i].onclick = function () {
console.log(`当前点击的div序号是:${i}`);
}
}

// while 循环
let num = 0;
let mark = true;
while (mark) {
console.log(num);
if (num===10) {
mark = false;
}
num++;
}

// do while 循环
do {
console.log('1'); // 先执行一次再循环
} while (false) {
console.log('2');
}

// 循环关键字属性
for (let i = 0; i < 9; i++) {
if (i === 5) {
continue; // 跳出当前次循环
break; // 停止for循环
}
console.log(`第${i+1}次循环i值为${i}`);
}
let a = 0;
while (true) {
if (a === 5) {
continue; // 跳出当前次循环
break; // 停止while循环
}
console.log(`第${i+1}次循环i值为${i}`);
a++;
}

// 知识点:for中for
for (let i = 0; i < 5; i++) {
for (let q = 0; q < 4; q++) {
}
console.log(1);
} // 共循环:5*4=20次
for (let i = 0; i < 5; i++) {
// i = 0,1,2,3,4
// q = 0,1,2,3
for (let q = 0; q < 4; q++) {
if (i === 2) {
break;
}
// i 执行 0,1,3,4
} 
console.log(1);
} // 共循环:4*4=16次

// lable标记:给for加上标记(l1,l2),以用于关键字属性定位
l1 : for (let i = 0; i < 5; i++) {
// i = 0,1,2,3,4
// q = 0,1,2,3
l2 : for (let q = 0; q < 4; q++) {
if (i === 2) {
break l1;
}
// i 执行 0,1
} 
console.log(1);
} // 共循环:2*4=8次

</script>

</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android机动车

简单工厂模式

含义:简单工厂模式专门定义一个类来负责创建其他类的实例,被创建的实例通常都具有共同的父类。因为在简单工厂模式中用于创建实例的方法是静态(static)方法,因此...

9410
来自专栏Golang语言社区

Golang 常见问题

1. Golang的特点和发起目的 Golang的特点以及要解决的问题概括起来就是三点: 1. concurrent : 多核 解决方式-> 语言层级并发, ...

40360
来自专栏HansBug's Lab

算法模板——并查集 2(支持快速即时查询本连通块内容,纯原创!)

实现功能:输入N,现在有N个数;接下来输入任意行,如果是"1 x y"则表示把x和y所在的块合并;如果是"2 x"则表示输出x所在的块的全部内容 原理:其实主要...

32460
来自专栏菜鸟前端工程师

JavaScript学习笔记007-js的执行

11560
来自专栏章鱼的慢慢技术路

《算法图解》第六章笔记_广度优先搜索

17140
来自专栏liulun

Nim教程【五】

这是国内第一个关于Nim的系列教程 先说废话 业内的人认为能够直接操作系统硬件的语言才称得上系统级的编程语言 常见的系统级编程语言有:汇编、C、C++、D、GO...

32280
来自专栏带你撸出一手好代码

JavaScript消除游戏实现思路讲解

之前讲解过一款JavaScript贪食蛇游戏详细的设计与实现,但是以那种方式进行描述 , 整篇文章会显得复杂冗长,除非深入细致的阅读和思考,否则文中内容并不容易...

40150
来自专栏互联网杂技

基础JavaScript装逼指南

本文秉承着 你看不懂是你sb,我写的代码就要牛逼 的理念来介绍一些js的装逼技巧。 下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,l...

36250
来自专栏嵌入式程序猿

sizeof应用的小陷阱

本篇笔记主要介绍在项目开发中,使用sizeof的一个要注意的地方。分别在8位机microchip PIC18F46K22, 16位机microchip ds...

37780
来自专栏章鱼的慢慢技术路

《算法图解》第六章笔记

18750

扫码关注云+社区

领取腾讯云代金券