JavaScript笔记——第一天

关于什么叫JavaScript就不说了，我也记不住，只知道它属于前端的，页面交互的，完成“动作”的，基于对象的……好叭也许后续…再补充呗。

一、JS的三种引入方式

1、内部引用：用script标签实现，这个标签可以放在html页面中任意位置，但一般为了书写不乱，放在head标签中或者html结尾处。

2、行内引用:不太建议使用，因为代码多了就不好书写，跟CSS一个道理。一般书写格式为：在标签内书写οnclick=“script:’除了数字可以不用引起来，其他都放这里’”，onclick表示点击，onload表示加载

3、外部引用:在外部书写一个以.js结尾的代码文件，再在内部引用。script标签中用src引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--方式一、内部引用-->
    <script>
        alert(123);//弹出
    </script>
</head>
<!--方式二、行内引用-->
<body onload="script:alert(1234)">
    <h1 onclick="">脚本演示</h1>

</body>
<!--方式三、外部-->
<script src="my.js"></script>
</html>

二、变量的声明和赋值

我觉得我还是直接贴代码吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var a;
        var b =123;
        var c = false;
        var d = 'Hello';
        var e = [];
        var f = {};
        var g = new Date();
        var h = null;
        var i = /@#$!/;

        alert(typeof a);/*undefined 未定义*/
        alert(typeof b);/*number 数字*/
        alert(typeof c);/*boolean 布尔*/
        alert(typeof d);/*string 字符串*/
        //....................................
        alert(typeof e);/*object 数组*/
        alert(typeof f);/*object 对象*/
        alert(typeof g);/*object 日期*/
        alert(typeof h);/*object 空*/
        alert(typeof i);/*object 正则*/
    </script>
</body>
</html>

三、变量可以切换

就是跟Java不一样，js的变量可以切换类型，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var a;
        alert(typeof a);
        var a=123;
        alert(typeof a);
        var a = false;
        alert(typeof a);
        var a = 'Hello';
        alert(typeof a);
        var a = [];
        alert(typeof a);
        var a = null;
        alert(typeof a);
        var a = /@#$!/;
        alert(typeof a);


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

四、数组

看代码and注解吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
       //定义一个数组，里面放了四个类型的变量
        var arr = [ 123, false , 'Hello', new Date()];
        //在浏览器的控制台（运行代码，打开浏览器，按F12）打印数组的长度
        console.log(arr.length)
        //遍历数组，控制台一个一个打印出来
        for(var i = 0; i< arr.length;i++){
            console.log(arr[i])
        }
        console.log('--------------------')
        //从下标为0开始只有0-3，如果定义一个下标为5的数组，请问，下标为4的数组呢？
        arr[5] = 3.141592654;
        for(var i = 0; i< arr.length;i++){
            console.log(arr[i])
        }
        console.log('--------------------')
        var arr = [1,2.3,4,5];
        var arr2 = [1.1,2.2,3.3]
        console.log(arr.length)
        arr.pop();//pop弹掉，但它弹掉的是数组的最后一个，这里是弹掉arr数组的5，然后剩下1，2.3，4
        arr.push(78);//push表示增加，这里给arr数组增加一个数字78
        var ts = arr.concat(arr2);//这里忘了，明天改

        for(var i = 0; i< ts.length;i++){
            console.log(ts[i])
        }

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

五、字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var str = 'Hello World';
        console.log(str.length);//11
        for(var i = 0;i<str.length;i++){
            console.log(str.charAt(i))//打印出每个字符
        }
        console.log(str.substr(2,3));//llo  从下标为0数，到第2个，包括第3个后面一个。
        console.log(str.substring(2,3));//l 从下标为0数，到第2个,不包括第3个及后面。
        console.log(str.indexOf('llo'));//2 找llo,默认0开始，到第2个数字
        console.log(str.indexOf('llo',7));//-1 找llo,从7开始，找不到，返回-1
        var arr = str.split(' ');//分割，用空格切割
        console.log(arr.length);//2
        for(var i = 0;i<arr.length;i++){
            console.log(arr[i])//遍历
        }
    </script>
</body>
</html>

六、运算符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var a = '10';//变成字符串类型，除了+是拼接，其他正常算
        var b = '20';
        console.log(a + b);//1020
        console.log(a - b);//-10
        console.log(a * b);//200
        console.log(a / b);//0.5
        console.log(a % b);//10
        console.log(a++);//10
        console.log(++b);//21
        console.log('--------------------')
        var x = '10';
        x += 20;//一个是字符串，一个是number，加法运算时从字符串拼接
        console.log(x);//'1020'
        console.log('--------------------')
        var y;
        console.log(typeof y);//undefined
        y += 20;
        console.log(y);//NaN(No a Number)上面用var定义的y，是undefined（未定义）类型
        var z = null;
        z += 20;
        console.log(z);//20
        console.log('--------------------')
        var i = 10;
        var j = 20;//与或非，跟Java语言一样
        console.log(i>j && i<j);//false
        console.log(i>j || i<j);//true
        console.log(!(i<j));//false
    </script>
</body>
</html>

最后一个例子：运行代码，浏览器弹出两个数字（默认为0，可以自己填），然后运算（默认相加，可以自己填）。

这里用到一个函数，明天开始讲函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
       fun();
       function fun() {
            var num1 = prompt("请输入运算数字：",'0');
            var num2 = prompt("请输入运算数字：",'0');
            var op = prompt("请输入运算符号：",'+');
            if(isNaN(num1)) return;
            if(isNaN(num2)) return;
            num1 = parseInt(num1);
            num2 = parseInt(num2);
            var result = null;
            switch (op) {
                case '+':
                    result=num1 + num2
                    break;
                case '-':
                    result=num1 - num2
                    break;
            }
            alert("运算结果为：" + result)
       }

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