if else switch 三元运算和 各种判断语句

在代码中做决定 - 条件语句
if ... else 语句
if (condition) {
  code to run if condition is true
} else {
  run some other code instead
}

<main>
    <label for="name_select">Choose a name</label>
    <select name="name_choose" id="name_Ch">
        <option value="">Please choose a option</option>
        <option value="dog">dog</option>
        <option value="cat">cat</option>
        <option value="park">park</option>

    </select>
    <p id="p_select"></p>
</main>


<script>
    var select = document.querySelector('#name_Ch');
    var para = document.querySelector('#p_select');

    function choose_func() {
        var choise = select.value;
        if (choise === 'dog') {
          para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
        } else if (choise === 'cat') {
            para.textContent = 'BBBBand sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
        } else if (choise === 'park') {
            para.textContent = 'AAAAAA and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
        }
    }
    select.addEventListener('change',choose_func);

</script>


关于比较运算符

比较运算符是用来判断条件语句中的条件的。我们先回过头来看看Basic math in JavaScript — numbers and operators 文章中的比较运算符。我们有如下选择：

=== 和 !== — 判断一个值是否严格等于，或不等于另一个。
< 和 > — 判断一个值是否小于，或大于另一个。
<= 和 >= — 判断一个值是否小于或等于，或者大于或等于另一个。



逻辑运算符：&&  , || 和 !
如果要测试多个条件，而不需要编写嵌套if ... else语句，逻辑运算符可以帮助您。当在条件下使用时，前两个执行以下操作：

&& — 逻辑与; 使得并列两个或者更多的表达式成为可能，只有当这些表达式每一个都返回true时，整个表达式才会返回true.
|| — 逻辑或; 当两个或者更多表达式当中的任何一个返回 true 则整个表达式将会返回 true.
!  — 逻辑非; 对一个布尔值取反, 非true返回false,非false返回true.



switch语句
if...else 语句能够很好地实现条件代码，但是它们不是没有缺点。 它们主要适用于您只有几个选择的情况，每个都需要相当数量的代码来运行，和/或 的条件很复杂的情况（例如多个逻辑运算符）。 对于只想将变量设置一系列为特定值的选项或根据条件打印特定语句的情况，语法可能会很麻烦，特别是如果您有大量选择。

switch 语句在这里是您的朋友 - 他们以单个表达式/值作为输入，然后查看多个选项，直到找到与该值相匹配的选项，执行与之相关的代码。 这里有一些伪代码，可以给你一点灵感：
switch (expression) {
  case choice1:
    run this code
    break;

  case choice2:
    run this code instead
    break;
    
  // include as many cases as you like

  default:
    actually, just run this code
}

<main>
    <label for="name_select">Choose a name</label>
    <select name="name_choose" id="name_Ch">
        <option value="">Please choose a option</option>
        <option value="dog">dog</option>
        <option value="cat">cat</option>
        <option value="park">park</option>

    </select>
    <p id="p_select"></p>
</main>


<script>
    var select = document.querySelector('#name_Ch');
    var para = document.querySelector('#p_select');

    function choose_func() {
        var choise = select.value;
        switch (choise) {
            case 'dog':
                para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
                break;
            case 'cat':
                para.textContent = 'BBBBand sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
                break;
            case  'park':
                para.textContent = 'AAAAAA and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
                break;
            default:
             para.textContent='actually, just run this code.'
            }
        }


    select.addEventListener('change',choose_func);

</script>



三元运算符
条件 condition 为 true  执行 ? 后的 ，false 执行 : 号后的
( condition ) ? run this code : run this code instead
var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
在这里我们有一个变量叫做isBirthday- 如果它是true，我们给客人一个生日快乐的消息; 如果不是，我们给她标准的每日问候。
<main>
    <label for="name_select">Choose a name</label>
    <select name="name_choose" id="name_Ch">
        <option value="">Please choose a option</option>
        <option value="red">red</option>
        <option value="black">black</option>

    </select>
    <p id="p_select"></p>
</main>


<script>
    var select = document.querySelector('#name_Ch');
    var html = document.querySelector('html');
    document.body.style.padding = '10px';

    function update(BgColor,textColor) {
        html.style.backgroundColor = BgColor;
        html.style.color = textColor;
    }
    select.onchange = function () {
        (  select.value === 'black' ) ? update('black','red')  : update('red','black');
    }

</script>