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

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);
}

②条件结构流程图
这里写图片描述
②、条件结构语法
语法1:
if(条件){}
else {}

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

扫描二维码关注公众号,回复: 100642 查看本文章
<!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>

循环结构流程图

这里写图片描述

③、循环结构
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="&nbsp;&nbsp;"+result;                               
            document.write(j+"*"+i+"="+result);                                 
            document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");                                   
        }                                       
        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="&nbsp;&nbsp;"+result;//                             
            document.write(j+"*"+i+"="+result);                                 
            document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");                                   
        }                                       
        document.write("<br/>");                                        
    }                                           
}                                               

猜你喜欢

转载自blog.csdn.net/dl0246/article/details/80104206