web学习笔记3 - Js基础1

Js基础1 自学总结
封面画师：唏嘘的星辰 p站ID：13312138

js更改样式

<div id="d1">更改样式</div>
<!-- onclick 当点击的时候， changeStyle() 点击执行changeStyle功能-->
<button onclick="changeStyle()">点击更改样式</button>
<script>
    
//  定义函数
function changeStyle(){
    // 1查找div元素 通过函数进行查找的 document 文档，getElementById() 通过id获取元素
    // .style 添加行内样式 ; .color 字体颜色；
    // document.getElementById("d1").style.color="red"

    // 2 如果标签设置了id，js可以简单通过id直接获取标签, document.getElementById ("d1") 类似于 d1
    d1.style.color="red"
}

</script>

流程控制语句

if : 条件控制语句
switch...case : 条件控制语句
for : 循环控制语句
do...while : 循环语句
while : 循环语句
try...catch...finally : 语句用于处理代码中可能出现的错误信息

if判断

单独if条件 如果条件成了执行{代码块}

var age = 33
if (age>40) {
console.log("大叔一枚")
}

多条件判断
= 赋值，name=”刘能” 证明name是”刘能, 非空字符串作为if条件这个时候成立的
== 比较相等的
=== 恒等的值和类型必须都一样
建议多条件判断不要使用if...if 弊端在于，每个if都会去判断，导致执行时间过长
```
var name = "刘德华"
if(name=="刘德华"){
    console.log("能执行到不?")
    name = "李嘉诚"
}
if(name=="李嘉诚"){
    console.log("帅哥一枚")
}
```

if...else 如果…其他的…
if...else... 只会判断一次

var score = 80
if(score>60){
    console.log("我及格了")
    score = 59
}else{ // 相当小于等于60
    console.log("来年再战")
}

数字作为if条件，非0数字都是true都是成立，0未fasle 不成立的。
```
var a = 0
if(a){
    console.log('33333333333333333333333')
}
```

if...else if...else

score=80
if(score>90){
    alert("优秀")
}else if(score>=80&&score<=90){
    alert("良好")
}else{
    alert("还凑合")
}

Switch语句

// switch 开关 ()写判断的变量 
// case season 的各种情况
var season = "夏"
switch (season) {
    case "春": //如果season=="春"
        console.log("春天万物复苏")
        break;  // 跳出当前判断

    case "夏":
        console.log("夏天烈日炎炎")
        break

    case "秋":
        console.log("秋天硕果累累")
        break

    case "冬":
        console.log("冬天白雪皑皑")
        break

    default:  // 如果以上都不成立 执行default 默认
        break;

运算符号

// 符号
    var a = 10
    a = a + 10    // a=20
    a =  a - 10   // a = 10
    a = a * 10   // a = 100
    a = a / 10   // a = 10
//   a = a / 3    // a 带小数
a = a % 3     // % 求余数 1 
console.log(a)

var b = 3
    b+=3   // b = b+3  6
    b*=8   //48  b*=8    b = b * 8
    b/=3   //16
    b%=3    // 1
console.log(b)

// ++  每次加1  ，c++ 等同于 c=c+1 等同于 c+=1
// -- 每次减1
// ++ 在前 本身先加1 ，再赋值
// ++在后 先赋值  本身再加1
var c = 30 
var d = c++   // d =30 ,c=31
    var e = ++c //  c = 32 ,e=32
console.log(c,d,e)


// 比较运算符号
console.log(3>4) //false
console.log(3<=4) // true
console.log(3==4) //false
console.log("4"==4)  // true 把字符串4转成数字4 再进行比较
console.log("4"===4)  //false 恒等 数字和类型都得相等
console.log(3!=4)  // true

//逻辑运算符号
//  && 并且  多个条件必须同时成立 才为true
// || 或者  只要有一个为true，整个条件都为true
// ! 非     取反
console.log(true&&true) // true
console.log(true&&false)  //fasle
console.log(3>4&&true)  //false
    console.log(true || false)  //true
    console.log(1 && 3>4 )  //false
    console.log(!false) // true
    console.log(!1)  //fasle
    console.log(!"") //true

for循环

// var i = 0 循环初始值
//  i<10 循环条件
//  i++ 每次i加1
// 先执行初始条件，再判断是否小于10，如果小于10，执行循环体，最后i的值再加1
for(var i = 0;i<10;i++){
    console.log(i)//0-9
}

// 如果改变循环次数的时候
// 1 改循环条件
for(var i = 0;i<5;i++){
    console.log(i)  // 0-4
}

// 2 改循环初始值
for(var i = 5;i<10;i++){
    console.log(i)  // 5-9
}

// 3 改递增值
// i+2  表达式  没有赋值
// i+=2 i=i+2  把加的结果赋值给i
for(var i = 0;i<10;i+=2){
    console.log(i)  // 0 2 4 6 8
}

// for非常规的操作1 for循环是同步执行的，执行完for之后才会往下执行，阻塞代码的执行
// for(var i = 0;i<999999999;i++){
//     console.log(i)
// }
// alert(10000)


// 非常规的操作2 写成一个死循环
for(var i =0;i<10;i--){
    console.log(i+"-----------")  // 0  -1 -2 -3 -4
    if(i==-4){  //当i==-4时候 执行break
        break // 跳出循环体 循环不在执行了
    }     
}

// 练习 
//   3人 余2人; 5人 余4人；7人 余6人；9人 余8人;11人正好 问最少多少人？
//  0 1 2 3
for(var i =0;i<9999;i++){
    if(i%3==2 && i%5==4 && i%7==6 && i%9==8 && i%11==0){
        console.log(i) //最少2519 
    }
}

do…while

for(var i = 0;i<3;i++){}
// 先判断 再执行
// while() 当条件成立了 执行{}
var a = 0
while(a<3){
    console.log(a,"11111")
    a++
}

var b = 3
// 现执行再判断，最起码执行一次
do {
    console.log("bbbbbbb")
} while (b<3);


// true 死循环
// while(1){
//     console.log("111111")
// }

continue和break

contine : 结束本次循环执行下次循环
breake : 跳出循环

/*
for(var i = 0;i<10;i++){
    console.log(i)  //0-9
    if(i>5){
        continue // 结束本次循环，执行下次循环
    }
}

for(var i = 0;i<10;i++){
    
    if(i>5){
        continue // 继续循环， 结束本次循环，执行下次循环
        console.log(i,"---------------")  //没打印
    }
}


for(var i = 0;i<10;i++){
    if(i>5){
        console.log(i,"++++++++++") // 6 7 8 9 
        continue // 继续循环， 结束本次循环，执行下次循环     
    }
}

for(var i = 0;i<10;i++){
    console.log(i,"=======") // 0 1 2 3 4 5 6  7 8 9
    if(i<5){
        console.log(i,"dddddddddddddddddddd") // 0 1 2 3 4
        continue // 继续循环， 结束本次循环，执行下次循环    

    }
}

for(var i = 0;i<10;i++){
    if(i<5){
        continue // 继续循环， 结束本次循环，执行下次循环    
    }
    console.log(i,"????????????????????????????????????")//56789
}
*/
for(var i = 0; i<10;i++){
    console.log(i,"jjjjjjjjjjjjjjjjj"); // 0
    break
        // 跳出循环 后面代码不执行
    console.log(i,"hhhhhhhhhhhhhhh")
}



for(var i = 0;i<10;i++){
if(i<5){
    console.log('a',i)  // 0 1 2 3 4
    continue
}
if(i>5){
    console.log("b",i) // 6
    break
}
console.log('c',i) //5
}

运算符

+ : 相加
- :相减
/ : 除以带小数
% : 求余数
+= : i += 1 等同于 i = i + 1
-= : i -= 1 等同于 i = i - 1
*= : i *= 1 等同于 i = i * 1
/= : i /= 1 等同于 i = i / 1
%= : i %= 1 等同于 i = i % 1

++ 在前先加后赋值； ++在后先赋值在加1

++i的结果

var i = 10 var a = ++i

a = 11
i = 11

i++的结果

var a = i++

a = 10 i=11

- -i 和 i- -也是一样

比较运算符号

== 相等（不比较数据类型，只比较值是否相等）
=== 恒等（比较数据类型和值是否相等）

逻辑运算符号

&& 多个条件必须同时成立，才为true，否则为false
|| 一个成立结果就是为true，否则为false
! 取反