前端技术（JavaScript）学习笔记（一）JavaScript基本概念、变量、数据类型、运算符、控制语句、函数方法

川长思鸟来 2022-05-26 07:08 115阅读 0赞

**0、什么是JavaScript？JavaScript一种基于浏览器、弱类型、基于对象的轻量级脚本语言**   
基于浏览器：js代码有浏览器负责解析执行  
弱类型： 在js中可以不定义变量而直接使用这个变量，同时在js中定义变量可以不指名具体的数据类型  
基于对象： 在js中提供了诸多对象，在编码过程中可以直接拿来使用

**00重要，我们知道Java代码最终会在JVM中被解析执行，那么JavaScript代码会被谁解析呢？**  
答案是：浏览器。你发现没有，web前端技术中涉及到的科目比如，html、css、JavaScript都是由浏览器解析执行的。当然，由于目前市面上浏览器厂家版本都不尽相同，所以很有可能出现这样的情况，我们所编写的一段代码，在不同浏览器上显示的效果可能会不同

**1、JavaScript代码往哪里写？**   
①、可以在script元素（可以放在body中也可以放在head中）内编写  
②、可以在html元素中的相关事件中编写  
③、可以在独立的以扩展名是.js的独立文件中编写 就像独立的\*.css一样

**2、变量 ？**  
变量是一个容器，其中存储的数据（值）是可以发生改变的。

**3、JavaScript中的数据类型**   
①、数值型（Number）：包括小数和整数，正数和负数（和java不同，java中小数（float|double），正数（byte|short|int|long））  
②、字符串型（String）：字符串类型，即是有一个或多个字符序列组成。一个字符串数据叫字面值，字面值要使用单引号或者双引号扩起来。如,”刘备”、‘关羽’等都是字符串类型的字面值  
③、数组类型(Array)：用于管理多个数据（一组数据）  
④、布尔型(Boolean)：布尔型数据只有两个取值，就像二进制数据只有0和1两个数一样，ture | flase  
⑤、对象型（Object）：在JavaScript中可以自定义对象，同时JavaScript也提供了很多对象供开发人员使用，简化开发工作量。  
⑥、undefined型：未定义类型  
⑦、null型：空值类型

**4、Java和JavaScript有什么区别**  
Java和JavaScript可以说没有关系也可以说有关系，关键看从哪个角度考虑。比如Javascript中的很多语法规则和java一致，但是，所以说有一定的关系。但是由于Java和JavaScript是完全不同性质的两门语言（Java是服务器端的编程语言，而JavaScript是客户端技术），所以说没有关系。  
语法一致大概情况如下：  
比如：在js中一条语句的结束也和java一样使用;号  
比如：在js中字符串使用“”括起来  
比如：js中的条件结构和循环结构与java基本一致

**5、Javascript中运算符（基本和java一模一样）**   
①、算数运算符 + - \* / % 。需要注意的是，在js中，/运算符的运算结构可能是小数，比如3/2的结果在java中是1，但是在js中结果确实1.5  
②、赋值运算符 =  
③、增量减量运算符 注意前缀形式和后缀形式 ++ –  
④、算数赋值运算符 += -= \*= /= %=  
⑤、关系比较运算符 < <= > >= != ==  
⑥、逻辑运算符 && || !  
⑦、条件运算符 ? :  
⑧、typeof运算符 返回对应的变量后者字面值是哪种类型  
⑨、（）： js中也有（） 来强制将某些表达式括起来，进而改变计算的顺序  
⑩、位运算符：<< >>将数据转化成二进制后移位，比如2<<4 结果是32

**案例代码：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
    //          document.write("");//功能是将write方法中的""中的内容写入到html页面的body元素中
    //          所以假如写入内容中有html元素的话，这个元素也会被浏览器解析
    //          1:算数运算符以及赋值运算符
                var  a=10;
                var b=20;
    
                var c=a+b;
                document.write(c);
    
                c=a-b;
                document.write(c);
    
                c=a*b;
                document.write(c);
    
    //          在javascript中,除运算符结果带有小数（因为在js中没有整数和小数的区分，都属于数字型）
                c=a/b;
                document.write(c);
    
                c=a%b;
                document.write(c);
    
                c=10%3;
                document.write(c);
    
    //          2:增量和减量运算符  ++   --
                var i=10;
                var j=++i;
    //          可以通过js向页面的主体部分(body部分)加入一个html标记
                document.write(i+"<br/>"+j+"<br/>");
                j=++i;
                document.write(j);
                document.write("<hr/>");
    
    //          3:条件(关系)运算符
                var m=10;
                m/=2;
                document.write(m);
                document.write("<br/>");
                document.write(3<m);
                var result=3<m;
                document.write("<br/>");
                document.write(3>m);
                document.write("<br/>");
                document.write(3<=m);
                document.write("<br/>");
                document.write(3>=m);
                document.write("<br/>");
                document.write(3==m);
                document.write("<br/>");
                document.write(3!=m);
                document.write("<hr/>");
    
    //          4:逻辑运算符
                var ft1=true;
                var ft2=false;
                document.write(true&&false);
                document.write(ft1||ft2);
                document.write(!ft1);
                document.write("<hr/>");
    
    //          5:条件运算符
                var m=30;
                var max=m>10?m:10;
                document.write(max);
    
    //          7:typeof 运算符
                var mytype=typeof "刘备";
                document.write(mytype);
                var  x=3.14;
                document.write(typeof x);
    
                var  x=true;
                document.write(typeof x);
    
                var myarr=new Array();
                document.write(typeof myarr);
                document.write("<hr/>");    
    
    //          8:位运算符
                document.write(2<<5);
                document.write("<br/>")
            </script>
        </head>
        <body>
        </body>
    </html>

**6、JavaScript中的控制语句**  
①、语句块，将多条语句使用\{\}括起来  
\{  
var a=10;  
var b=20;  
document.write(a+b);  
\}

**②条件结构流程图**  
![这里写图片描述][70]  
②、条件结构语法  
语法1：  
if(条件)\{\}  
else \{\}

语法2  
switch(a)\{  
case 值：  
语句；  
break;  
case 值2：  
语句：  
break；  
……  
default:  
语句：  
break；  
\}  
**条件结构案例代码**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript"> var score=20; /*与Java中if语句相同,一个if可以没有else 也当然,一个if可以接多个else if*/ if(score<=60){ document.write("不及格"); } else if(score<90) document.write("及格"); else document.write("优秀"); document.write("<hr/>"); /*和Java中的swtich一样,在js中也有switch条件结构*/ var a=40; switch(a){ case 10: var b=100; document.write(b+"------"); break; case 20: var b=100; document.write(b+"======="); break; default: document.write("default"); break; } </script>
        </head>
        <body>
        </body>
    </html>

**循环结构流程图**

![这里写图片描述][70 1]

**③、循环结构**   
while()\{\}  
do\{\}while();  
for(var i=0;i<=100;i))\{\}

循环结构案例代码

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
    //          是将语句块中的代码重复(反复的)去执行的过程即为循环
                /*document.write("****");
                document.write("<br/>")
    
                document.write("****");
                document.write("<br/>")
    
                document.write("****");
                document.write("<br/>")
    
                document.write("****");
                document.write("<br/>")
    
                document.write("****");
                document.write("<br/>")
    
                document.write("****");
                document.write("<br/>")*/
    
                var times=10;
                while(times>0){
                    document.write("****");
                    document.write("<br/>")
                    times--;
                }
                do{
                    document.write("**");
                    document.write("<br/>");
                    times++;
                }while(times<11)
    
    //          因为JavaScript是弱类型的语言,所以与java中的for对其,需要将int的关键字变为var
                for(var i=0;i<100;i++){
                    document.write(i);
                    document.write("<br/>");
                }
    //          注意:js中的for循环和java中的for循环一致,三个表达式都可以省略,若没有第二个表达式,说明是恒成立->死循环
                for(;;){
                    alert("test");
                }
            </script>
        </head>
        <body>
        </body>
    </html>

控制语句中非常重要的两个关键字：continue和break。  
continue是停止当前次循环，继续判断循环条件，若条件成立继续执行循环体  
break是终止整个循环，执行循环体以外的语句

7、JavaScript中的函数，和java中的方法是一个概念，是一段可以重复执行的语句块。                                              
    function methodName(){} 
    public int methodName(){}                                               
    
     //1-100之间质数和 
    function zhiShuHe(){ 
        var sum=0;                                          
        for(var i=3;i<=100;i++){                                            // i是否是质数 
            for(var j=2;j<i;j++){// 2-i之间的所有数 
                if(i%j==0)                                  
                    break;                              
            }                                       
           //是否是质数； 
            if(j==i)                                        
                sum+=i;                                 
        }                                           
        sum+=2;                                         
        return sum;//由于js是弱类型语言，所以即使方法有返回值，在定义方法时也无需指定返回值，只需在方法体的合适位置处通过return关键返回具体值即可。 
    }                                               //在页面上打印小九九口角 
    function jiujiu(){ 
        for(var i=1;i<10;i++){                                          
            for(var j=1;j<=i;j++){                                      
                var result=j*i;                                 
                if(result<10&& j!=1)                                    
                    result="  "+result;                               
                document.write(j+"*"+i+"="+result);                                 
                document.write("     ");                                   
            }                                       
            document.write("<br/>");                                        
        }                                           
    }                                               
    /** * 完成min到max之间的所有奇数和的计算。 * 因为JavaScript是一个弱类型的语言，所以在定义形参时无需指定具体的类型。 * @param {Object} min 形参 * @param {Object} max 形参 */                                             
    function jiShuHe(min,max){ 
        var sum=0;                                          
        for(var i=min;i<=max;i++){                                          
            if(i%2!=0)                                      
                sum+=i;                                 
        }                                           
        document.write(sum);                                            
    }                                               
    
    /** * 完成min到max之间的所有奇数和的计算。 * 因为JavaScript是一个弱类型的语言，所以在定义形参时无需指定具体的类型。 * @param {Object} min 形参 * @param {Object} max 形参 */                                             
    function jiShuHe(min,max){ 
        var sum=0;                                          
        for(var i=min;i<=max;i++){                                          
            if(i%2!=0)                                      
                sum+=i;                                 
        }                                           
        /* 因为JavaScript是若类型的编程语言,所有在定义方法时无需指定方法的返回值,若希望给调用者一个结果数据的话 可以在合适的地方直接通过return返回结果数据即可 */                                          
        return sum;                                         
    }

实验：  
①、计算1-100之间的奇数和 将结果打印到页面上  
②、计算1-100之间的偶数和 将结果打印到页面上  
③、计算1-100之间的质数和 将结果打印到页面上  
④、在页面上 打印小九九口角  
⑤、使用\*号打印等腰三角形到页面上

7、JavaScript中的函数，和java中的方法是一个概念，是一段可以重复执行的语句块。  
语法：function methodName(\[参数列表\])\{ \}//Java中定义方法 public int methodName()\{\}  
案例代码：

//1-100之间质数和                                                
    function zhiShuHe(){ 
        var sum=0;                                          
        for(var i=3;i<=100;i++){                                            // i是否是质数 
            for(var j=2;j<i;j++){// 2-i之间的所有数 
                if(i%j==0)                                  
                    break;                              
            }                                       
           //是否是质数； 
            if(j==i)                                        
                sum+=i;                                 
        }                                           
        sum+=2;                                         
        return sum;//由于js是弱类型语言，所以即使方法有返回值，在定义方法时也无需指定返回值，只需在方法体的合适位置处通过return关键返回具体值即可。 
    }                                               //在页面上打印小九九口角 
    function jiujiu(){ 
        for(var i=1;i<10;i++){                                          
            for(var j=1;j<=i;j++){                                      
                var result=j*i;                                 
                if(result<10&& j!=1)                                    
                    result="  "+result;// 
                document.write(j+"*"+i+"="+result);                                 
                document.write("     ");                                   
            }                                       
            document.write("<br/>");                                        
        }                                           
    }

[70]: /images/20220526/079fd0d6ad8e4dceb303e98875ebf5df.png
[70 1]: /images/20220526/56f9ef7ab14e4050a60cbf68acae4cd4.png