HTML第十二天

作者: 精彩i人生 | 来源:发表于2018-06-25 18:54 被阅读0次

HTML第十二天
#30天专注橙长计划#R2-教资考试-Day12
2018-11-28
2017.4.1
实现百万梦想学习之基金课程笔记12
书法练习打卡第十二天
打卡 ——致自己
2020-03-28
13/100 百日·阅读·红楼
第十三天

1

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>自增和自减</title>
<script type="text/javascript">
    /*
    自增 ++
        - 通过自增可以使变量在自身的基础上增加1
        - 对于一个变量自增以后，原变量的值会立即自增1
        - 自增分成两种：后++(a++) 和 前++(++a)    
            无论是a++还是++a，都会立即使原变量的值自增1
            不同的是a++和++a的值不同
            a++的值等于原变量的值（自增前的值）
            ++a的值等于新值 （自增后的值）
    
    自减 --
        - 通过自减可以使变量在自身的基础上减1
        - 自减分成两种：后--(a--) 和 前--(--a)
            无论是a--还是--a都会立即使原变量的值自减1
            不同的是a-- 和 --a的值不同
                a-- 是变量的原值 （自减前的值）
                --a 是变量的新值 （自减以后的值）
    */
    var a = 1;
    
    //使a自增1
    //a++;
    //++a;
    
    //console.log("++a = " + ++a);
    //console.log("a++ = " + a++);
    
    //console.log("a = " + a);
    
    
    var c = 10;
    
    //第一次c++，是在10的基础上自增
    c++;
    
    //第二次c++，是在11的基础上自增
    //console.log(c++);
    
    var d = 20;
    
    //console.log(++d);//21
    //console.log(++d);//22
    
    //20 + 22 + 22
    var result = d++ + ++d + d ;
    // console.log("result = " + result);
    
    d = 20
    d = d++;
    /*
    相当于
    var e = d++;
    d = e;
     */
    
    // console.log("d = "+d);
    
    var num = 10;
    
    //num--;
    //--num;
    
    // console.log(num--);
    console.log(--num);
    
    console.log("num = "+num);
</script>
  </head>
  <body>

  </body>
  </html>

2

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>自增和自减的练习</title>
<script type="text/javascript">
    var n1=10;
    var n2=20;
    
    var n = n1++; //先赋值n=10  后自增n1=11
    
    console.log('n=' + n);  //10
    console.log('n1=' + n1); //11
    
    n = ++n1; //先自增n1=12  后赋值n=12
    console.log('n=' + n); //12
    console.log('n1=' + n1); //12
    
    n = n2--;//先赋值n=20 后自减n2=19 
    console.log('n=' + n); //20
    console.log('n2=' + n2); //19
    
    n = --n2; //先自减n2=18 后赋值n=18
    console.log('n=' + n); //18
    console.log('n2=' + n2); //18
</script>
  </head>
  <body>

  </body>
  </html>

3

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>逻辑运算符</title>
<script type="text/javascript">
    /*
    JS中为我们提供了三种逻辑运算符
    ! 非
        - !可以用来对一个值进行非运算
        - 所谓非运算就是值对一个布尔值进行取反操作，
            true变false，false变true
        - 如果对一个值进行两次取反，它不会变化
        - 如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反
            所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值
            可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样
    
    && 与
        - &&可以对符号两侧的值进行与运算并返回结果
        - 运算规则
            - 两个值中只要有一个值为false就返回false，
                只有两个值都为true时，才会返回true
            - JS中的“与”属于短路的与，
                如果第一个值为false，则不会看第二个值
    
    || 或
        - ||可以对符号两侧的值进行或运算并返回结果
        - 运算规则：
            - 两个值中只要有一个true，就返回true
                如果两个值都为false，才返回false
            - JS中的“或”属于短路的或
                如果第一个值为true，则不会检查第二个值
     */
    
    var a = true;
    //对a进行非运算
    a = !a;
    //console.log("a = " + a);
    
    var b = 10;
    b = !!b;
    
    //console.log("b = " + b);
    //console.log(typeof b);
    
    //如果两个值都是true则返回true
    var result = true && true;
    
    //只要有一个false，就返回false
    result = true && false;
    result = false && true;
    result = false && false;
    
    //console.log("result = "+result);
    
    //第一个值为true，会检查第二个值
    //true && alert("zzzzzz");
    
    //第一个值为false，不会检查第二个值
    //false && alert("sssssss");
    
    //两个都是false，则返回false
    result = false || false;
    
    //只有有一个true，就返回true
    result = true || false;
    result = false || true ;
    result = true || true ;
    
    //console.log("result = "+result);
    
    //第一个值为false，则会检查第二个值
    //false || alert("123");
    
    //第一个值为true，则不再检查第二个值
    true || alert("123");
</script>
  </head>
  <body>

  </body>
  </html>

4

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>与或运算</title>
<script type="text/javascript">
    /*
    && || 非布尔值的情况
        - 对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，并且返回原值
        - 与运算：
            - 如果第一个值为true，则必然返回第二个值
            - 如果第一个值为false，则直接返回第一个值
    
        - 或运算
            - 如果第一个值为true，则直接返回第一个值
            - 如果第一个值为false，则返回第二个值
    */
    
    //true && true
    //与运算：如果两个值都为true，则返回后边的
    var result = 2 && 1;
    
    //与运算：如果两个值中有false，则返回靠前的false
    //false && true
    result = 0 && 2;
    result = 2 && 0;
    //false &&　false
    result = NaN && 0;
    result = 0 && NaN;
    
    //true || true
    //如果第一个值为true，则直接返回第一个值
    result = 2 || 1;
    result = 2 || NaN;
    result = 2 || 0;
    
    //如果第一个值为false，则直接返回第二个值
    result = NaN || 1;
    result = NaN || 0;
    
    result = "" || "aaaaa";
    
    result = -1 || "ccccc";
    
    console.log("result = "+result);
</script>
  </head>
  <body>

  </body>
  </html>

5

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>赋值运算符</title>
<script type="text/javascript">
    /*
    =
        可以将符号右侧的值赋值给符号左侧的变量
    += 
        a += 5 等价于 a = a + 5
    -=
        a -= 5 等价于 a = a - 5
    *=
        a *= 5 等价于 a = a5
    /=
        a /= 5 等价于 a = a / 5
    %=
        a %= 5 等价于 a = a % 5
        
     */
    var a = 10;
    
    //a = a + 5;
    //a += 5;
    
    //a -= 5;
    
    //a *= 5;
    
    // a = a%3;
    a %= 3;
    
    console.log("a = "+a);
</script>
  </head>
  <body>

  </body>
  </html>

6

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>关系运算符</title>
<script type="text/javascript">
    /*
    通过关系运算符可以比较两个值之间的大小关系，
        如果关系成立它会返回true，如果关系不成立则返回false
    
    > 大于号
        - 判断符号左侧的值是否大于右侧的值
        - 如果关系成立，返回true，如果关系不成立则返回false
    
    >= 大于等于
        - 判断符号左侧的值是否大于或等于右侧的值
    
    < 小于号
    <= 小于等于
    
    非数值的情况
        - 对于非数值进行比较时，会将其转换为数字然后再比较
        - 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而会分别比较字符串中字符的Unicode编码
    */
    
    var result = 5 > 10;//false
    
    result = 5 > 4; //true
    
    result = 5 > 5; //false
    
    result = 5 >= 5; //true
    
    result = 5 >= 4; //true
    
    result = 5 < 4; //false
    
    result = 4 <= 4; //true
    
    //console.log("result = "+result);
    
    //console.log(1 > true); //false
    //console.log(1 >= true); //true
    //console.log(1 > "0"); //true
    //console.log(10 > null); //true
    //任何值和NaN做任何比较都是false
    //console.log(10 > "hello"); //false
    //console.log(10 >= "hello"); //false
    //console.log(10 < "hello"); //false
    //console.log(10 <= "hello"); //false
    //console.log(true > false); //true
    //console.log("1" < "5"); //true
    //console.log("11" < "5"); //true
    
    //比较两个字符串时，比较的是字符串的字符编码
    //console.log("a" < "b");//true
    //比较字符编码时是一位一位进行比较
    //如果两位一样，则比较下一位，所以借用它来对英文进行排序
    // console.log("abc" < "b");//true
    // console.log("bbc" < "b");//false
    //console.log("abc" < "bcd");//true
    //比较中文时没有意义
    //console.log("热热热热" > "哇哇哇"); //false
    // console.log("哈哈哈" > "呵呵"); //true
    
    //如果比较的两个字符串型的数字，可能会得到不可预期的结果
    //注意：在比较两个字符串型的数字时，一定一定一定要转型
    console.log("8435184683518" < +"5"); //false
</script>
  </head>
  <body>

  </body>
  </html>

7

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>Unicode编码</title>
<script type="text/javascript">
    /*
    在字符串中使用转义字符输入Unicode编码
        \u四位编码
    */
    console.log("\u2F81");
    console.log("\u2620");
</script>
  </head>
  <body>
<!--
在网页中使用Unicode编码：
    &#编码; 
注意：这里的编码需要的是10进制
-->
<h1 style="font-size: 200px;">&#9760;</h1>
<h1 style="font-size: 200px;">&#9856;</h1>

  </body>
  </html>

8

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>相等运算符</title>
<script type="text/javascript">
    /*
    相等运算符用来比较两个值是否相等，
        如果相等会返回true，否则返回false
    
    使用 == 来做相等运算
        - 当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较
    不相等
        不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
            - 使用 != 来做不相等运算
            - 不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
    
    ===
        全等
        - 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换
            如果两个值的类型不同，直接返回false
    !==
        不全等
        - 用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换
            如果两个值的类型不同，直接返回true
    */
    
    //console.log(1 == 1); //true
    
    var a = 10;
    
    //console.log(a == 4); //false
    
    //console.log("1" == 1); //true
    
    //console.log(true == "1"); //true
    
    //console.log(null == 0); //false
    
    /*
    undefined 衍生自 null
        所以这两个值做相等判断时，会返回true
     */
    //console.log(undefined == null);//true
    
    /*
    NaN不和任何值相等，包括他本身
     */
    //console.log(NaN == "1"); //false
    //console.log(NaN == "undefined"); //false
    //console.log(NaN == NaN); //false
    
    var b = NaN;
    
    //判断b的值是否是NaN
    //console.log(b == NaN);//无法判断，只会返回false
    /*
    可以通过isNaN()函数来判断一个值是否是NaN
        如果该值是NaN则返回true，否则返回false
     */
    //console.log(isNaN(b)); //true
    
    //console.log(10 != 5); //true
    //console.log(10 != 10); //false
    //console.log("abcd" != "abcd"); //false
    //console.log("1" != 1);//false
    
    //console.log("123" === 123);//false
    //console.log(null === undefined);//false
    
    console.log(1 != "1"); //true
</script>
  </head>
  <body>

  </body>
  </html>