JavaScript核心语法

超、凢脫俗 2022-04-22 13:54 212阅读 0赞

## JavaScript核心语法 ##

**JavaScript核心语法**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
    //1.变量的声明和赋值
        var width=20;
        x=10;
        var y=1,z=2;
        //    只给了y赋值
        var x,y,z=10;
        var st="ada";
        var  bo=true;
    
    //    数据类型（typeof(值) --此方法判断类型）
        //    1.基本类型
            //    undefined(未定义) var width没有赋值
                document.write("width："+typeof(width)+"<br/>" );
            //    null(空类型 ,给变量赋予了一个空值)
                document.write(undefined + "<br/>");//true
            //    number(数值类型)
                document.write("z:"+typeof(z)+"<br/>" );//number
            //    String(字符串类型)
                document.write("st:"+typeof(st)+"<br/>" );//string
            //    boolean(布尔类型)
                document.write("bo:"+typeof(bo)+"<br/>" );//boolean
        //    2.引用类型
            //    对象，函数，数组
                var date=new Date();
                document.write("date："+typeof (date)+"<br/>") //Object
            // Null类型
                document.write("null："+typeof (null)+"<br/>") //Object
    </script>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
    //    String类型 :indexof()  charAt(index) subString(index1,index2)   split(str)
            var str="this is a String";
            var  one="a";
            document.write(str.length+"<br\>");//16
    //    数组
            var friut=new Array(3);
                friut[0]="apple";
                friut[1]="orange";
                friut[2]="banana";
                var  friut1=new Array("apple","orange","banana");
                var  friut2=["apple","orange","banana"];
    //    遍历数组
            for(var i=0;i<friut.length;i++){
                document.write(friut[i]+"    ")
            }
            for(var j in friut){
                document.write(friut[j]+"    ")
            }
            var str=friut.join("-");
            document.write(str+"<br\>");
        //  push添加元素 返回数组新的长度
            var size= friut.push("peach")
            document.write(size+"<br\>");//4
    </script>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
    //  运算符
        //    算术运算符：+ - * / % ++ --
        //    比较运算符: <  >  <=  >=  ==  !=  ===  !==
            //==只判断值 ，不看类型
            //===判断值和类型（严格比较）
        //    逻辑运算符:&& || !
        //    赋值运算符: + =+ -=
    
    //  逻辑控制语句
        //    条件结构： if-else switch
        //    循环结构：for while do-while
        //    遍历： for(var i=0;i<变量名.length;i++){} ; for(var i in 变量名)
        //    中断循环：break continue
    
    </script>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
    //    常用输出和输入
        document.write("页面输出");
        alert("警告提示！");
        console.log("控制台输出");
        var pwd= prompt("请输入密码","");
        document.write(pwd);
    </script>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>常用系统函数</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
    //    系统函数： parseInt()  parseFloat() isNAN(number）（判断是否是数值）
            var num1=parseInt("78.89"); //78
            var num2=parseInt("4564cor"); //4564
            var num3=parseInt("this36"); //NAN
            var flag=isNaN(num3); //true   判断如果不是数字返回true
            var num4=parseFloat("4564cor");        //4567
            var num5=parseFloat("45.58");        //45.58
            var num6=parseFloat("45.58.25");    //45.58
            var num7=parseFloat("cor4568");     //NAN
    // 常用事件
        //    onclick:单机时触发
        //    onmouseover: 鼠标悬浮时触发
        //    onkeydown：某个键盘按键被触发
        //    onchange： 域的内容被改变时触发
        //    onload:页面加载时触发
    //    自定义函数
        //    function 函数名 (参数1，参数2，.....){
        //          js语句；
        //          return 返回值;
        //     }
        function study(n) {
            for(var i=1;i<=n;i++){
                document.write("欢迎学习javaScript"+"<br\>");
            }
        }
    </script>
    
    <input type="button" value="显示5次学习js" onclick="study(prompt('请输入次数',''))">
    </html>

## 例：统计包含a的个数 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
        var aa=new Array();
        aa[0]="America";
        aa[1]="Greece";
        aa[2]="Britain";
        aa[3]="Canada";
        aa[4]="China";
        aa[5]="Egypt";
        var num=0;
        for (var i=0;i<aa.length;i++){
            if (aa[i].indexOf("a")!=-1){
               num++;
            }
        }
        document.write("共有"+num+"个字符串包含a")
    </script>
    </html>

## 例：编写一个四则运算函数 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    <script type="text/javascript">
        function  calculate() {
            var num1= parseFloat( prompt('请输入第一个数',''));
            var num2= parseFloat( prompt('请输入第一个数',''));
            var symbol= prompt('请输入运算符','');
            var num=0;
            switch(symbol){
                case "+":
                    num=num1+num2;
                    break;
                case "-":
                     num=num1-num2;
                    break;
                case "*":
                     num=num1*num2;
                    break;
                case "/":
                     num=num1/num2;
                    break;
            }
            alert(num1+""+symbol+""+num2+"="+num)
        }
    </script>
    <input type="button" value="计算两数运算结果" onclick="calculate()">
    </html>