逻辑运算符与函数浅析-day04 - 《JavaScript 免费课程》

1.逻辑运算符( && :逻辑与 ||:逻辑或)
2.如何获取元素对象
4.函数基础

1.逻辑运算符( && :逻辑与 ||:逻辑或)

&&逻辑与 val && val:如果前边转布尔是true就取后边的，否则就取前边的
|| 逻辑或 val || val：如果前边转布尔是true就取前边的，否则就取后边的

代码示例： ```javascript

  // let num = 1 && 0;
  // console.log(num);
  // let num1 = 0 && 1;
  // console.log(num1);
  // let num2 = 1 && NaN && 3 && 4 && 5 && 0; // NaN
  //     //  NaN && 3 && 4 && 5 && 0;
  //     // NaN
  // console.log(num2); // NaN

// || 逻辑或 val || val：如果前边转布尔是true就取前边的，否则就取后边的
    // let num  = 0 || 18;
    // console.log(num); // 18
    // let num2 = 1 || NaN || 3;
    // console.log(num2); //1
    //  &&逻辑与  val && val:如果前边转布尔是true就取后边的，否则就取前边的
    // || 逻辑或 val || val：如果前边转布尔是true就取前边的，否则就取后边的
    let a = 0 && 1 || '' && NaN; // 先算 && 再算 || 
    //         0   || ''
    //  ''
    console.log(a); // ''


- ++ 和  --
- 累加和累减,代码示例如下：
```javascript
  // +=/-=:累加和累减
        // let num = 2;
        // num+=2; //num = num+2
        // console.log(4);
        // num-=2 // num = num-2
        //--------------------------------------------------------------------------------------------------------------
        // i++/i--:先取值 后运算
        // let i = 5; // 6
        // console.log(i++); // 5
        // console.log(i);// 6
        // let n = 5; // 4
        // console.log(n--); // 5
        // console.log(n); // 4
        // ++i/--i：先运算 后取值
        // let i = 5; // 6
        // console.log(++i); // 6
        // console.log(i);// 6
        // let m = 5; // 6 5
        // let num = (m++) + (--m);
        // //          5   +   5
        // console.log(num); // 10
        // console.log(m); // 5
        // let a = 1; // 2 3 4 3 2
        // let num = (a++) + (++a) + (a++) - (a--) - (--a);
        // //          1   +   3   +   3   -   4  -   2
        // console.log(num); // 1
        // console.log(a); // 2
        // let i = 2; // 3 4 5 4
        // console.log(i++ == ++i); // 2 == 4  // false
        // console.log(++i == i--); // 5 == 5  // true
        // console.log(i); // 4

2.如何获取元素对象

通过id名称来获取ID对象

示例如下: ```javascript // 在js中页面的标签叫做元素

  // 页面中的元素是对象数据类型的
  let box = document.getElementById('box');
  // 通过id名获取页面中的元素
  console.log(box);
  console.dir(box); // dir是详细输出一个对象

    // get:获取
    // element：元素
    // by：通过什么什么

// console.log(box); // console.dir(box); // dir是详细输出一个对象

    /* 
    className:当前元素的class名
    style:当前元素的行间样式
    innerHTML
    innerText
     */
     // 通过js获取当前box元素的class名
    // console.log(box.className); // 获取当前元素的class名
    // box.className = 'xxx'; // 给当前元素class名
    //---------------------------------------------------------
    console.log(box.style.background); // 获取行间样式
    box.style.background = 'green' // 设置当前元素的行间样式
    box.style.fontSize = '80px'
    console.log(box.style.borderBottom);
    box.style.borderBottomWidth = '30px';
    box.style.borderBottomColor = 'pink';
    box.style.borderBottomStyle = 'soild';

<a name="ZZw2b"></a>
## 3.innerHTML和innerText的区别
- innerHtml可以获取HTML元素的HTML内容,也可以通过该属性来给元素标签添加别的元素
- innerText可以获取HTML元素的文本内容
- 代码示例如下
```javascript
       // console.log(box.innerHTML); // 获取当前元素的内容
        // box.innerHTML = '1234567'
        // box.innerHTML = '<span>我是span</span>'; // 可识别字符串的标签
        // // box.innerText = '<span>我是span</span>' // 不可以识别字符串的标签
        // console.log(box.innerHTML);
        box.innerHTML+='<span>我是span</span>'; // 在之前基础上累加内容

4.函数基础

函数是JS里的数据类型之一,属于引用数据类型
函数实际上是一个方法体,方法具体实现就是函数体,当需要使用时进行调用。
函数的存在可以使项目减少代码冗余,提高代码复用率以及降低耦合性

示例代码: ```javascript // 定义函数

  function sum(num3,num4) { // 小括号里的东西就相当于榨汁机的入口(在函数里就是形参变量)
      let total = num3 + num4;
      total = total / 2;
      // console.log(total);
      return total;
      // 就相当于榨汁机倒出来的果汁，(在函数里就是return出来的值，也叫作函数的执行结果)
  };
  // 执行函数
  // 函数名+() // 小括号里就是榨汁机执行时放的水果(在函数里叫做实参)
      sum(10,11)
  // let cup = sum(10,11);
  // console.log(cup);
  // console.log( sum(10,11) );

    // console.log(total);
    // sum(20,40);

```