JavaScript基础语法&进阶案例 | 青训营笔记

北方小学生
196 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的的第5天,今天主要分享JavaScript语法以及如何写好JavaScript代码高效率实现编码.

一、本堂课主要内容:

1. JavaScript变量

2. JavaScript基础语法

3. JavaScript对象

4. JavaScript函数

5. JavaScript如何写出高效率代码

二、详细知识

JavaScript变量

JavaScript中的变量相比其他语言的变量声明简单许多，不需要new关键字，不需要像java一样指定数据类型，只需要var和let关键字即可生成变量.

  1. var生成的变量语法是：var name = "" ，var可以理解为c语言的数据类型，name是变量名字，等于号是赋值，等于号右面是赋值的内容这里默认是字符串.

image.png

图1 定义name变量并输出

  1. let生成的变量语法是let age = 22 ，let也可以理解为c语言的数据类型，age是变量名字，等于号是赋值，等于号右面是赋值的内容这里是证整数.

image.png

图2 定义age变量并输出

3.这时候就有小伙伴会问了，var和let都是定义变量，二者有什么区别呢？ var可以重复声明同一个变量，而let不可以，let重复声明同一变量会保错.

image.png

图3 let定义报错

4.let和var在for循环中迭代变量的区别

image.png

图4 var和循环的事情

提问:为什么var作为for迭代变量最终打印5个5?

image.png

图5 let和循环的事情

解答：上述俩种情况感觉都应该输出01234，可为什么var作为迭代变量却不行，原因是因为let声明的变量有块级作用域，也就是每循环一次let都是新的变量，而var在循环过程中使用的是同一个变量，由于for循环很快执行完毕，所以最终i = 4，然后延迟后输出就是5个5.

5.var可以提前使用、let必须先定义后使用

image.png

图6 var和let的作用域

总结:let是es6提出的，让JavaScript拥有了块级作用域，让我们的代码更安全，更规范，解决了未定义先使用的bug.

JavaScript基础语法

JavaScript跟其他编程语法类似，跟C语言基本一致,比如for、while、do...while、if、三元运算符.让我们下文具体案例.

学会变量声明我们看一下JavaScript常见的流程控制和判断控制语句.

if、else if和else

语法规则是这样if(条件){执行语句}else if(条件){执行语句}else{都不满足执行的语句} image.png

图7 if的简单使用

image.png

图8 if和else if的简单使用

image.png

图7 if和else的简单使用

当然if和else if可以无限嵌套但是else只能有一个..

while循环

语法 while(条件){执行的语句 要让条件有变化否则就是死循环} image.png

图8 while循环

while循环

语法for(迭代变量,判断循环条件,步进){执行的语句}

image.png

图9 for循环

JavaScript对象

<script>
        var stu = {'id':1111,'sex':'boy','name':'xl'}
        console.log(stu);
        console.log(stu.id , stu.name , stu.sex);
</script>

JavaScript中的对象也是变量需要va或者let声明，整体信息需要用花括号包起来，然后键值对的形式写入进去 image.png

图10 控制台输出对象信息

当然JavaScript的对象也可以加函数方法，语法规则是函数名：function (){}

<script>
       var stu = {'id':1111,'sex':'boy','name':'xl',introudce : function (){
           console.log(`名字：${this.name} 性别：${this.sex}`);
       }}
       stu.introudce();
</script>

image.png

图11 对象里的函数

补充:this在对象里指的是本身，谁在调用自己.

JavaScript的函数

<script>
    function add(n1,n2[){](url)
        return n1+n2;
    }
    let res = add(10,10);
    console.log(res);
</script>

语法规则：function 函数名 (参数){语句}

image.png

图12 JavaScript里的函数

JavaScript如何写出高效率代码

评价一个代码的好坏需要衡量多个标准，虽然一个好的算法需要看时空复杂度。但是也需要看具体使用场景，假设一个o(n*m)的算法和o(n)的算法前者比后者思路简单代码少，同时m和n并不是很大优先考虑算法1，这点说明了场景的重要性. 在写JavaScript代码时候需要各司其职，html控制结构，css专门写样式，JavaScript写行为，自己负责自己的区域，不要乱写，然后就是考虑算法的好坏，以及语法的规范性了。

三、练手项目

昼夜切换

昼夜切换这个项目主要利用JavaScriptdocument获取button元素然后监听button单击，通过button单击状态切换对应body的css实现昼夜交换，同时在切换样式的时候使用一个属性transition: all 0.5s;动画可以让切换的更加圆滑.下面是html、css、js的代码.

<body class="night">
    <div class="content">
        <header>
            <button id ='modeBtn'>kg</button>
            <h1>深夜食堂</h1>
        </header>
        <main>
            <div class="pic">
            <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
            </div>
            <div class="description">
            <p>
                这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
                眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
            </p>
            </div>
        </main>
    </div>
</body>

<style>
   .night{
        background-color: black;
        color: white;
        transition: all 0.5s;
   }  
   .day{
        background-color:white;
        color: black;
        transition: all 0.5s;
   }
</style>


<script>
    setTimeout(() => {
        const btn = document.getElementById('modeBtn');
        btn.addEventListener('click', (e) => {
        const body = document.body;
    
    if(body.className !== 'night') { 
      body.className = 'night';
    } else {
      body.className = 'day';
    }
  });
    }, 1);
</script>

JavaScript判断4的幂

4的幂有：1,4,16,64,256.... 通过构建一个input和button搭建html结构，然后使用js代码判断结果，通过document获取输入框的值，然后转为数字然后循环模4，如果模的过程有余数直接修改输入框的css将颜色变为红色，然后退出循环，假设都循环完毕，最后判断是否为1，是的话就是说刚好除4商为1说明就是4的幂，否则不是，下面是代码：

<script>
     function isPowerOfFour() {
         var num = document.getElementById('val').value;
         
         num = parseInt(num);
         while(num > 1) {
             if(num % 4) {
                 document.getElementById('val').style.color = "red";  
                 return 1;
             }
             num /= 4;
         }
         if(num == 1) {
             document.getElementById('val').style.color = "green";  
         }else{
             document.getElementById('val').style.color = "red";  
         }
     }
  </script>

<input type="number" name="" id="val">
<button onclick="isPowerOfFour()">检测</button>

四、个人总结

写JavaScript代码和写c++、java代码一样需要严谨的思维，注重解耦抽象过程，组件化使得效率更高，同时注意代码的作用域，减少一些异常，多读别人写的代码，提高我们的代码效率.

avatar
文章
阅读
粉丝