javaweb02--JS--part1

_skyfall

已于 2024-05-07 17:35:07 修改

阅读量312

点赞数 4

分类专栏： java 文章标签： java

于 2024-05-07 17:30:58 首次发布

本文链接：https://blog.csdn.net/intstdi/article/details/138538290

版权

java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

from黑马

1.JS的引入方式

在HTML文档中，可以在任意位置，放置任意数量的<script>。但是一般放在body的底部，可以改善显示的速度。

1.1内部脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    
    <!-- 内部脚本 -->
    <!-- <script>
        alert('hello!');
    </script> -->
    
    <!-- 分号可有可无 -->
</head>
<body>
    
</body>
</html>

1.2 外部脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    
    <!-- 外部脚本 -->
    <script src="../JS/demo.js"></script>
    
</head>
<body>
    
</body>
</html>

然后再外部定义一个.js文件， <script src="../JS/demo.js"></script>中的src就是.js文件的路径。

alert("hellop");

2.JS的输出方式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 方式一：弹出警告框 
    window.alert("hello js");

    // 方式二：写入HTML页面中
    document.write("hello js")

    // 方式三：控制台输出
    console.log("hello js")
</script>
</html>

3.JS的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>

</body>
<script>
    //类型转换--其他类型转为boolean
    if(0){
        alert("0转换为false")
    }
    //false就不会弹出提示框，而true会
    if(1){
        alert("除0和NAN其他数字都转为true")
    }


    //类型转换，其他类型转为数字

    alert(parseInt("12"));//12
    alert(parseInt("12A45"));//12
    alert(parseInt("A45"));//NaN(not a number)

    //==和===，==可以类型转换，而===没有类型转换
    var age = 20
    var _age = "20"
    var $age = 20
    alert(age == _age)//true    
    alert(age === _age)//false   
    alert(age === $age)//true    

    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14);//number

    alert(typeof "A"); //string
    alert(typeof 'Hello');//string

    alert(typeof true);//boolean
    alert(typeof false);//boolean

    alert(typeof null);//object

    var a ;
    alert(typeof a);//undefined?
        
</script>
</html>

3.1 变量定义

在这里插入图片描述

3.2 原始数据类型

在这里插入图片描述

3.3 `==`与`===`

在这里插入图片描述

3.4 数据类型转换

<script>
    //类型转换--其他类型转为boolean
    if(0){
        alert("0转换为false")
    }
    //false就不会弹出提示框，而true会
    if(1){
        alert("除0和NAN其他数字都转为true")
    }


    //类型转换，其他类型转为数字

    alert(parseInt("12"));//12
    alert(parseInt("12A45"));//12
    alert(parseInt("A45"));//NaN(not a number)
</script>

4.JS的函数

在这里插入图片描述

<script>

    //定义函数-1
    // function add(a,b){
    //    return  a + b;
    // }

    //定义函数-2
    var add = function(a,b){
        return  a + b;
    }

    //函数调用,即使传入多个参数，也是可以的，但是只会计算前两个数
    var result = add(10,20);
    alert(result);
    
</script>

5.JS的Array

<script>
    //定义数组
    // var arr = new Array(1,2,3,4);
    // var arr = [1,2,3,4];

    // console.log(arr[0]);
    // console.log(arr[1]);

    //特点: 长度可变 类型可变
    // var arr = [1,2,3,4];
    // arr[10] = 50;

    // console.log(arr[10]);
    // console.log(arr[9]);
    // console.log(arr[8]);

    // arr[9] = "A";
    // arr[8] = true;

    // console.log(arr);



    var arr = [1,2,3,4];
    arr[10] = 50;
    // for (let i = 0; i < arr.length; i++) {
    //     console.log(arr[i]);
    // }

    // console.log("==================");

    //forEach: 遍历数组中有值的元素
    // arr.forEach(function(e){
    //     console.log(e);
    // })

    // //ES6 箭头函数: (...) => {...} -- 简化函数定义
    // arr.forEach((e) => {
    //     console.log(e);
    // }) 

    //push: 添加元素到数组末尾
    // arr.push(7,8,9);
    // console.log(arr);

    //splice: 删除元素,第一个是索引，第二个参数代表删除个数，也就是
    //从下标为二的元素开始删除两个
    arr.splice(2,2);
    console.log(arr);

</script>

注意：主要是几个函数的应用

在这里插入图片描述

6.JS的String

<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(4));

    //indexOf
    console.log(str.indexOf("lo"));

    //trim
    var s = str.trim();
    console.log(s);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>

在这里插入图片描述

7.JSON

在这里插入图片描述

<script>
    //定义json
    var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    alert(jsonstr.name);
    //结果是undefined，因为他现在就是一个字符串。jsonstr.name是对象获取方式，而jsonstr不是对象

    //json字符串--js对象
    var obj = JSON.parse(jsonstr);
    alert(obj.name);

    //js对象--json字符串
    alert(JSON.stringify(obj));

</script>