前端开发 - JavaScript - 上-优快云博客

本文详细介绍了JavaScript的基础语法，包括JS的引入方式、变量声明、数据类型、运算符、流程控制等内容，适合初学者入门。

1.js引入

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>js引入</title>
    <style type="text/css">
        .span1{ color: red;}
    </style>

    <!--外链式-->
    <!--<script src="./1.js"></script>-->

</head>
<body>
    <!-- dom == document object model 有属性 有方法  行内式引入 -->
    <p class="" id="" onclick="clickhandler()">123</p>
    <span>234</span>
</body>

<!-- 内部式 引入  建议引入时候在body之后，因为要等待所有dom元素标签加载完成后再去执行相应得js操作-->
<script type="text/javascript">

     // window.document.write()
    // document.write('有一首歌叫123')
    document.write('<span class="span1">233</span>');


    // windows.console.log()
    console.log('我很好');
    console.error('错误ss');

    console.dir(window);
    console.clear();

    var a = prompt('输入姓名');
    console.log(a);

    function clickhandler(){
        // 弹出警告框
        /*
        这是一个方式
        一个很好得方法
        */
        window.alert(1);
        alert(1)
    }
</script>

</html>

<!--
    总结：
        引入js 三种方式； 行内式 内部式  外链式
        做项目时：css js 一般使用外链式引入；

        javascript得输出方式：
            1.document.write('有一首歌叫123')
                document.write('<span class="span1">233</span>');
                window.document.write()
            2.console.log('我很好');
                console.error('错误');
                console.clear();
                windows.console.log()
            3.alert(1);
                 window.alert(1);
            4.innerHTML/innerText
                ...
            5.var a = prompt('输入姓名');
              console.log(a);
-->

2.变量的声明和定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量得声明和定义</title>
</head>
<body>

</body>

    <script type="text/javascript">
        // 变量得声明
        //js 中代码得执行顺序 自上往下

        //1.先声明在定义
        var dog;
        // alert(dog);  //undefined 未定义

        dog='小黄';
        // alert(dog)
        // alert(dog)
        // alert(dog)

        //2.声明立刻定义
        var dog2='小红';
        // alert(dog2);

        var $='aa';
        alert($);

        //建议使用驼峰标识 来命名
        var myHousePrice = '$1234';

    /*
        变量命名规范：
            1.严格区分大小写
            2.命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字，不能包含关键字和保留字。
                关键字：var number等
                除了关键字 top name 也尽量不使用。
            3.推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写
            4.匈牙利命名：就是根据数据类型单词的的首字符作为前缀
    */

    </script>



</html>

3.五种基本数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本数据类型</title>
</head>
<body>

<script type="text/javascript">
    /*
    js中有两种数据类型
        1.基本数据类型
            number string boolean null undefined
        2.引用数据类型
            对象
                Array object 正则
            函数
     */

    //1.number 数字类型
    var a = 123;
    console.log(a);
    console.log(typeof a);

    //2.string 字符串类型
    var str = '123';
    console.log(str);
    console.log(typeof str);

    //3.boolean 布尔类型
    var b1 = false;  //true/false
    console.log(b1);
    console.log(typeof b1);

    //4.null
    var c1 = null;  //空对象
    console.log(c1);
    console.log(typeof c1);

    //5.undefined
    var d1;
    console.log(d1);
    console.log(typeof d1);

    //特殊：分母为0；
    //  Infinity
    //  number
    var e1 = 5/0;
    console.log(e1);
    console.log(typeof e1);



</script>
</body>
</html>

4.运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>

    <script type="text/javascript">

        //1.赋值运算符
        // var money = prompt('请输入金额...');
        // var saveMoney = money * (1+0.02);
        // console.log(saveMoney);

        //2.算数运算
        var a = 10;
        var b = 3;
        var sum = a + b;
        var min = a - b;
        var t1 = a * b;
        var t2 = a / b;
        var t3 = a % b;  // 余数

        console.log(sum,min,t1,t2,t3);  // 13 7 30 3.3333333333333335 1

        //3.复合运算符
        var c = 7, d = 8;
        // d = c + d;
        d += c;
        console.log(c,d); // 7 15

        // 自增 自减
        var e1 = d++;  //先赋值后+++
        var e2 = ++d;  //先++后赋值
        console.log(e1,e2);

        var f1 = d--;
        var f2 = --d;
        console.log(f1,f2);

        //4.比较运算符  > < >= <= == === !=
        console.log(5>6); //false
        console.log(4==4); //true
        console.log(4==5); //false
        // 隐式转换 浏览器会将数值转成字符串； === 类型和值都比较
        console.log('5'==5); // true
        console.log('5'===5); // false

        console.log(4!=3)   // true

        //5.逻辑运算符 &&（and） ||(or)
        console.log('xxx:',false && false)
        // console.log(true && true)
        console.log(true || false) // true
        
    </script>
</body>
</html>

5.字符串处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串处理</title>
</head>
<body>
    <script type="text/javascript">

        //字符串运算
        var firstName = 'alice';
        var lastNmae = 'B';

        var fullName = firstName + " " + lastNmae;
        console.log(fullName);  // 字符串拼接

        //字符串拼接
        var str1 = '飞行员';
        var str2 = '航空公司';
        var str = '该法院受理的'+str1+'离职纠纷案件中，'+str2+'要求离职飞行';
        console.log(str);

        // 对字符串 +  是拼接  其他得运算可以 - * /
        var a1='1';
        var a2='2';
        console.log(a1+a2);  // 12 拼接 不是数值
        console.log(typeof(a1+a2)); // string
        console.log(parseInt(a1)+parseInt(a2)); // 3

        console.log(a1*a2); // 2
        console.log(typeof (a1*a2)); //number

        var b1 = 'one';
        var b2 = 'two';
        console.log(b1*b2); // NaN == not a number
        console.log(typeof (b1*b2)) // number

    </script>
</body>
</html>

6.数据类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型转换</title>
</head>
<body>
    <script type="text/javascript">
        //1.将数字类型转换成字符串类型  隐式转换 String() num.toString()
        var n1 = 123;
        var n2 = '123';
        var n3 = n1+n2;
        // 123 隐式转换 将数字转换成 string 进行拼接
        console.log(n3); // 123123
        console.log(typeof n3)  // string

        //强制类型转换 String()  toString()
        console.log(':',typeof n1)
        var str1 = String(n1)
        console.log(str1);
        console.log(typeof str1)

        var num = 234;
        console.log(num.toString())

        //2.将 字符串 类型转换成 数字 类型 Number() parseInt() parseFloat()
        var stringNum = '789.123as';
        var num2 = Number(stringNum);
        console.log(num2)
        console.log(typeof num2);

        // parseInt() 解析一个字符串 并且返回一个整数
        console.log(parseInt(stringNum));
        console.log(typeof parseInt(stringNum));

        console.log(parseFloat(stringNum))
        console.log(typeof parseFloat(stringNum)) //number

        // 在js中所有得数据类型 都会被转换为boolean类型
        // 0 NaN null undefined 为false 其他得为true
        var b1 = '123';
        var b2 = -123;
        var b3 = Infinity; //无穷大

        var b4 = 0;
        var b5 = NaN;
        var b6; //undefined
        var b7 = null;

        console.log(':',Boolean(b1)) //true
        console.log(Boolean(b2)) // true
        console.log(Boolean(b3)) // true
        console.log(Boolean(b4)) // false
        console.log(Boolean(b5)) // false
        console.log(Boolean(b6)) // false
        console.log(Boolean(b7)) // false


    </script>
</body>
</html>

7.if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if</title>
</head>
<body>
    <script type="text/javascript">

        //if 语句
        var ji = 10;
        if(ji>=20){
            console.log('大吉大利')
        }else{
            console.log('下次努力')
        }

        if(true){

        }else if(true){

        }else if(true){

        }else{

        }

        // alert(222)
        // 浏览器解析代码得顺序 是 从上往下 执行

        // 考试系统录入
        var math = 90;
        var english = 85;
        var sum = 485;

        //1.模拟 总分 > 400 并且(&&两个条件都成立才成立)数学 > 89 被清华录入
        if(sum>400 && math>90){
            console.log('录入成功')
        }else{
            alert('高考失利')
        }

        //2.模拟 总分>400或者（|| 只要有一个成立就成立）英语>85 就被复旦录入
        if(sum>500 || english>85){
            alert('录入')
        }else{
            alert('失利')
        }

        if(sum>500 || (math+english)>170){
            alert(22)
        }


    </script>
</body>
</html>

8.switch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch</title>
</head>
<body>
    <script type="text/javascript">

        //switch
        var gameScore = 'good';

        // case 表示一个条件 满足条件走进去 遇到break 跳出
        switch(gameScore){
            case 'good':
                console.log('good 玩得很好');
                break;  // 一定要加 break 否则会打印 better 下得内容
            case 'better':
                console.log('better 很好');
                break;
            case 'best':
                console.log('best');
                break;
            default:
                console.log('很遗憾');
                // break;  // 不需要些 走到最后了
        }
        // alert(11)

    </script>
</body>
</html>

9.while

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while</title>
</head>
<body>
    <script type="text/javascript">

        // while 循环
        //1.初始化循环变量 2.判断循环条件 3.更新循环变量
        var i = 1;
        while(i<=9){
            // console.log(i);
            i+=1;
        }

        //练习
        // 1-100 之间 是3得倍数 输出出来
        var j = 1;
        while(j<=100){
            if(j%3===0){
                console.log(j)
            }
            j++;
        }

    </script>
</body>
</html>

10.do while

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>do_while</title>
</head>
<body>
    <script type="text/javascript">

        // do while
        //1.初始化循环变量 2.判断循环条件 3.更新循环变量
        // 不管有没有满足while，do里面得代码都会执行一次
        var i = 3;
        do{
            console.log(i);
            i++;
        }while(i<5);

    </script>
</body>
</html>

11.for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for</title>
</head>
<body>
    <script type="text/javascript">

        //for 循环
        //1.初始化 2.循环条件 3.更新循环变量
        // for(var i = 1; i < 10; i++){
            // console.log(i);
        // }

        //1-100 偶数
        // for(var i=1;i<=100;i++){
        //     if(i%2===0){
        //         //偶数
        //         console.log(i)
        //     }
        // }


        //1.练习
        //1-100之间所有数得和
        // var sum = 0;
        // for(var i=1;i<=100;i++){
        //     sum += i;
        // }
        // console.log(sum)

        //2.练习
        /*
        ******
        ******
        ******
        */
        // 双重for 循环
        // for(var i=1;i<=3;i++){   // 行
        //     for(var j=1;j<=6;j++){  //列
        //         document.write('*')
        //     }
        //     document.write('<br>')
        // }

        //作业： 在浏览器中输出直角三角形 6行   等边三角形  使用python 和js 语言输出
        /*

        *
        * *
        * * *
        * * * *
        * * * * *
        * * * * * *

        */

        for(var i=1;i<=6;i++){
            for(var j=1;j<=i;j++){
                document.write('*')
            }
            document.write('<br>')
        }
        document.write('<br><br>');

        /*
              *      2*1-1
             ***     2*2-1
            *****    2*3-1
           *******   2*4-1
          *********  2*5-1
         *********** 2*6-1

       */
        /*
              *      2*1-1
             ***     2*2-1
            *****    2*3-1
           *******   2*4-1
          *********  2*5-1
         *********** 2*6-1
          *********
           *******
            *****
             ***
              *
       */

        //等边三角形
        for(var m=1;m<=6;m++){
            for(var n1=m;n1<6;n1++){
                document.write('&nbsp;')
            }
            for(var n2=1;n2<=2*m-1;n2++){
                document.write('*')
            }
            document.write('<br>')
        }

        document.write('<br>');

        //菱形
        for(var a=1;a<=11;a++){
            if(a<=6) {
                for (var a1 = a; a1 < 6; a1++) {
                    document.write('&nbsp;')
                }
            }else{
                for(var a2=7;a2<=a; a2++){
                    document.write('&nbsp;')
                }
            }
            if(a<=6){
                for(var a3=1;a3<=2*a-1;a3++){
                    document.write('*')
                }
            }else{
                for(var a4=a*2-1;a4<22;a4++){
                    document.write('*')
                }
            }

            document.write('<br>')
        }
        
    </script>
</body>
</html>