JavaScript--

最新推荐文章于 2024-10-08 13:51:35 发布

我超爱学习&

最新推荐文章于 2024-10-08 13:51:35 发布

阅读量1.1k

点赞数 31

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/st03zy/article/details/141938331

版权

js的写法

js的第一种写法：在元素的属性上书写js代码

js的第二种写法：将js代码写在script标签中，然后在元素的属性上引用

js的第三种写法：将js代码单独封装到一个扩展名为.js的文件中，然后使用

script标签将其引入到html文档里，再在元素的属性上引用js文件中的函数等代码。

注意：第三种方式，在生产环境中用的最多，其次是第二种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/my.js"></script>
    <script>
        var a;
        function f1(){
            var b;
            console.log("使用了第二种写法");
        }
    </script>  

</head>
<body>
    <input type="button" value="js的第一种写法" onclick="javascript:alert('你好，js')">
</body>
</html>


function f2(){
    console.log("第三种方法");
}

字符串类型的学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function f1(){
        var name = "michael";
            var gender = '男';
            //查看变量里的值的类型
            console.log(typeof name); //string
            console.log(typeof gender); //string
            var school=new String("吉林大学");
            console.log("school:"+typeof school);
            console.log(name, gender, school);
            //字符串里有一些特殊字符，需要使用转义字符
            var url = "jdbc:mysql:\"";
            console.log("url的值：" + url);
            //获取字符串的长度，  使用length属性
            console.log("name的值的长度:" + name.length); // 7
            //其他方法的应用
            // 大小写转换方法
            console.log("转成大写形式:" + name.toUpperCase()); // 7
            console.log("转成小写形式：" + "AbCdEf".toLowerCase());
            //获取指定位置上的字符,   注意下标从0开始
            var line = "http://www.baidu.com"
            var c1 = line.charAt(4);
            var c2 = line.charCodeAt(4); //获取指定位置上的字符对应的unicode编码
            console.log(c1, c2);
            //获取子串的下标 , 下面两个方法，如果没有找到子串，返回-1
            var index1 = line.indexOf("www"); //7
            var index2 = line.lastIndexOf("w"); //9
            console.log(index1, index2);

            //截取子串，替换子串
            var subLine = line.substring(11, 16);
            console.log("subLine:", subLine);
            var newLine = line.replace("baidu", "taobao");
            console.log("newLine:" + newLine);

            //切分字符串
            line = "zhangsan,lisi,michael,lucy,lily"
            var names = line.split(",", 3);
            console.log(names); // [zhangsan,lisi,michael]
            console.log(typeof names) // object   数组类型不直接显示而是object

    }
    </script>
</head>
<body>
    <button onclick="f1()">字符串</button>
</body>
</html>

number

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var x1 = 34;
        var x2 = 0x123;
        console.log(x1, x2);
        var x3 = 3.1415;
        var x4 = 123e2;
        var x5 = 123e-2;
        //查看变量的类型
        console.log(typeof x5); // number

        var r1 = x3.toFixed(2);//将 `x3` 四舍五入到两位小数。
        console.log("r1的值：" + r1, "r1的类型：" + (typeof r1));

        //扩展类型：Math
        console.log(Math.E);
        console.log(Math.PI);
        console.log(Math.LN2);
        console.log(Math.random());
        console.log(Math.round(3.56)); //  只对小数部分进行四舍五入。保留整数部分。
        console.log(Math.round(45600));
        console.log(Math.pow(2, 3)); // 8
        console.log(Math.sqrt(8)); // 2.828


    </script>
</head>

<body>

</body>

</html>

布尔类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    var isMarry = true;
    console.log(typeof isMarry);

    var flag = false;
    console.log(isMarry, flag);

    //布尔类型，可以用于计算  true相当于1   false相当于0
    var r1 = true + true;
    console.log("r1:" + r1);
    var r2 = true + 10;
    var r3 = false - 10;
    console.log(r2, r3);

</script>

</html>

函数

1. 函数的定义语法：

function funName([参数]){

逻辑体

[return]

}

2. 函数的调用：函数名(有形参传实参)

3. 函数的返回值：

- 如果函数体没有想要返回的数据，return关键字可加可不加, 返回值是undefined

- 如果有想要返回的数据，那么必须添加return 并将要返回的数据写在return关键字之后

4. 函数的参数：

- js中的函数没有重载一说。不管调用几个参数的，都是同一个函数。

- 参数用于向函数体中传入数据

- 参数值实际上被保存到内置的一个对象arguments里。该对象是一个数组

arguments.length

arguments[index]

- 形参没有接受到实参时，值为undefined

5. 匿名函数：定义期间没有函数名的函数

- new Function(arg1,arg2.....,functionBody); 用的少

注意事项：最后一个函数，必须是函数体。而且所有的形参都是字符串类型

- function(){} 用的多

6. 常用的内置函数：

- typeof : 用于判断一个变量里的值的类型

- isNaN(..) : 用于判断一个数据是否为非数字。如果是非数字返回true, 如果是数字返回false

- parseInt/parseFloat等：将字符串转成数字

- eval(): 将一个字符串转成一个表达式进行运算，有缺点，可能被黑客通过参数进行注入。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
           1.  函数的定义语法：
                function funName([参数]){
                    逻辑体
                    [return]
                }  
            2. 函数的调用：  函数名(有形参传实参)   
            3. 函数的返回值： 
                  - 如果函数体没有想要返回的数据，return关键字可加可不加,  返回值是undefined
                  - 如果有想要返回的数据，那么必须添加return 并将要返回的数据写在return关键字之后
            4. 函数的参数：
                  - js中的函数没有重载一说。不管调用几个参数的，都是同一个函数。
                  - 参数用于向函数体中传入数据
                  - 参数值实际上被保存到内置的一个对象arguments里。该对象是一个数组
                     arguments.length
                     arguments[index]   
                  - 形参没有接受到实参时， 值为undefined
            5. 匿名函数： 定义期间没有函数名的函数 
                  - new Function(arg1,arg2.....,functionBody);  用的少
                    注意事项：最后一个函数，必须是函数体。  而且所有的形参都是字符串类型
                  - function(){}          用的多

            6. 常用的内置函数：
                - typeof  :  用于判断一个变量里的值的类型
                - isNaN(..)  :  用于判断一个数据是否为非数字。 如果是非数字返回true, 如果是数字返回false
                - parseInt/parseFloat等： 将字符串转成数字
                - eval():   将一个字符串转成一个表达式进行运算，有缺点，可能被黑客通过参数进行注入。        
         */

        function sum(a, b) {
            console.log("两个参数的和：" + (a + b));
            return; // 该关键字可加可不加
        }
        var r1 = sum(10, 20);
        console.log(r1);
        
        function max(a, b) {
            var max = a > b ? a : b;
            return max;
        }
        var r2 = max(10, 20);
        console.log("两个数的较大值：" + r2); // 20

        //定义一个无参的函数：
        function f1() {
            console.log("参数的个数：" + arguments.length);
            var line = "";
            if (arguments.length == 2) {
                line = arguments[0] + arguments[1]
                console.log("2个参数的拼接结果：" + line)
            } else {
                console.log("参数的个数不是2个")
            }
        }
        f1();
        f1("michael", " is good")

        //匿名函数的应用
        //第一种创建方式  :   因为匿名函数没有名字，但是想要使用，因此可以将匿名函数
        //                  这个对象赋值给一个变量，然后通过变量调用
        var fn1 = new Function("a", "b", "console.log(a+b);console.log(a,b)");
        fn1(1, 2)  // 3    1 2
        //第二种方式：  同上，想要使用，需要将匿名函数对象赋值给一个变量
        var fn2 = function (a, b) {
            return a + b;
        }
        console.log(fn2(10, 20)); // 30


        // 内置函数的应用
        var line = "michael";
        var r3 = isNaN(line)
        console.log("r3的结果：" + r3); // true
        console.log("5是不是非数字：" + isNaN(5)); //false
        var str1 = "3.1415";
        var r4 = parseFloat(str1);
        console.log("r4的类型：" + (typeof r4)); // number

        var r5 = str1 + 3;   //  字符串与其他类型运算，是拼接操作
        console.log("r5的值：" + r5);  // "3.14153"

        var r6 = parseInt(str1)
        console.log("r6:" + r6); // 3

        var str2 = "1+2"
        var r7 = eval(str2);
        console.log("r7:" + r7);

    </script>
</head>

<body>

</body>

</html>

1. 数组的创建方式

- var a1 = new Array()

- var a2 = new Array('michael','john','lucy')

- var a3 = [1,2,3,4,5]

2. 数组的长度属性length. 访问方式: 变量名.length. 数组的长度不是固定的

3. 访问元素：使用下标访问，下标从0开始，访问方式：变量[index]

- 注意： js的数组元素可以是不同类型的值。

- 数组下标如果越界，不会报异常，返回undefined

4. 数组的其他方法

indexOf(指定元素): 返回指定元素的第一次出现的索引，没有的话，返回-1

lastIndexOf(指定元素): 返回指定元素的最后一次出现的索引，没有的话，返回-1

sort([function]):排序方法，默认使用字典排序的升序规则（先比较第一个字符，如果相同，再比较第二个字符）