JavaScript的一些基础内容归纳

Hls@

于 2023-03-19 01:20:41 发布

阅读量377

点赞数 3

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

本文链接：https://blog.csdn.net/huanglinsang/article/details/129644261

版权

今天我们就来说一下什么是JavaScript，以及JavaScript的基础内容是什么：

1.JavaScript的三种书写方法，输入语句和输出语句

2.变量声明

3.程序控制与函数

JavaScript是一种属于网络的高级脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

既然我们已经大致了解了JavaScript，我们就来仔细的刨析一下，它主要由两部分组成

1.ECMAScript,描述了语言的语法和基本对象。

2.文档对象模型（DOM）,描述处理网页内容的方法和接口。

它主要有三种写法：

<!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>Document</title>
</head>
<body>
    <button onclick="window.alert('js行内写法')">按钮</button>

    <script>
        window.alert('js内部样式')
    </script>

    <script src="./00-js外联写法.js"></script>
</body>
</html>
<!--
注意点:
1.无论是CSS还是JS的三种写法
当一个html文件存在多种写法是
HTML的代码是从上往下解析的。
2.如果sc ript标签没有s rc属性表示内联样式如果有s rc属性表示外联样式，外联样式js代码只能写在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>Document</title>
</head>
<body>
    <script>
        //输出语句：在网页上弹出一个提示框，输出数据
        alert('hello.world')

        //输出语句：在打印台打印某个数据
        //         这个写法不是给用户看的，而是给程序员自己看的。
        console.log('123');

        //输出语句: 将数据显示到网页
        document.write('你甜甜的笑就像乌梅子酱')

        //输入语句: 在网页弹出一个输入框，让用户输入数据
        prompt('你的java分数是')

        //输入语句: 在网页弹出一个确认框，让用户输入确认?
        confirm('你成年了嘛?')
    </script>
</body>
</html>

<!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>Document</title>
</head>
<body>
    <script>
        // 输出语句: 在网页中弹出一个提示框
        alert('18');
        //输入语句:在控制台打印语句
        console.log('123');
        // 输出语句:将·1数据显示到网页
        document.write('今天天气真好，可惜要上晚自习');
    </script>
</body>
</html>

说完了输出语句和输入语句接下来就是变量声明：

<!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>Document</title>
</head>
<body>
    <script>
        //声明变量
        var myName
        var myAge
        var myScore,myHight//
        //给变量赋值
        myName = '小明'
        myScore = '60'
        myHight = '188'
        //控制台打印变量
        console.log(myName);
        console.log(myAge);
        console.log(myScore);
        console.log(myHight);
    </script>
</body>
</html>

接下来是变量声明的区别

<!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>Document</title>
</head>
<body>
    <script>
        //使用var声明全局或局部作用域的变量

        //一次声明一个变量
        var name;

        //一次声明多个变量，不同变量之间使用逗号隔开。
        var name , gender, age

        // 在声明的同时初始化变量
        var name ='张华'

        //在声明的同时初始化全部或者部分变量
        var name ='张华',gender ='男',age

        //使用var声明的变量，可以多次赋值，但是其结果只与最后一次赋值有关
        var name = '张华';
        name = '王红';
        name = 3;
        console.log(name);

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

<!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>Document</title>
</head>
<body>
    <script>
        // 使用var和let声明的变量可以改变
        // 如果希望变量的值在整个运行过程中保持不变,需要使用const声明。

        //const 变量名 = 值

        // 使用const声明变量时，必须给变量赋初值
        //且该值在运行过程中不能被修改
        //另外，此变量也不能多次声明。

        // 一次声明一个变量
        const pi = 3.1415
        
    </script>
</body>
</html>

变量声明也是有区别的

<!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>Document</title>
</head>
<body>
    <!--
        3中变量声明方式的区别

        (1)初始化要求不同。
        使用var和let声明变量时可以先不初始化,
        而使用const声明变量时必须初始化。

        (2)重复声明不同。
        使用var和Let声明的变量可以多次被修改，其值只与最近一次赋值一致
        而使用const声明的变量，在整个运行过程中不能修改初值。

        (3)对块级作用域的支持不同。
        (使用一对花括号括起来的代码称之为一个代码块
        所谓块级作用域，就是变量起作用的返回是当前代码块，离开当前代码块，变量就失效了。)
        使用var声明的变量支持全局作用域，使用Let和const声明的变量支持块级作用域。
    -->
</body>
</html>

除变量需要声明外常量也需要声明，以及需要注意的东西

<!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>Document</title>
</head>
<body>
    <script>
        // [常量声明const]
        //const声明一个只读的常量。一旦声明，常量的值就不能改变。

        //【语法】
        //声明并设置初始值
        const y = 10;

        //[注意点1-基本类型数据无法重新赋值]
        const PI = 3.1415;
        console.log(PI);//3.1415
        //PI = 3;
        // consolelog(PI); //Assignment to constant variable.(赋值给常量变量。)

        ///[注意点2-必须设置初始值]
        // const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
        //  const foo;
        //  console.log(foo); //Missing initializer.(缺少初始值)
        // 只声明不赋值,就会报错。

        // [注意点3-有块级作用域]
        // const的作用域和Let命令相同: 只在声明的块级作用域内有效
        if(true){
            const MAX = 5;
            console.log(MAX);
        }
        // console.log(MAX); // MAX is not defined

        // [注意点4-不会变量提升]
        // const命令声明的常量也是不能提升，同样存在暂时性死区，只能在声明的位置后面
        if(true){
            console.log(MAX);//Cannot access 'MAX' before initializati
            const MAX = 5;
        }

        // [注意点5-不能重复声明]
        // let age = 18;
        // const age = 30;


        // [总结]
        // 1.基本数据类型无法重新赋值(引用类型可以更改内容)
        // 2.必须设置初始值
        //  3.有块级作用域
        // 4.不会变量提升
        // 5.不能重复声明
        
    </script>
</body>
</html>

以及声明变量所需要注意的一些东西

<!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>Document</title>
</head>
<body>
    <script>
        // 在const中，并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。
        // 在const中，并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。
        // 但对于复合类型的数据(主要是对象和数组)，变量指向的内存地址，保存的只是一个指向实际数据的指针
        // const只能保证这个指针是固定的 (即总是指向另一个固定的地址)。

        // 基本数据类型无法重新赋值。
        // 引用类型(对象、数组...),可以更改内容
        // (注:不能改的是栈)

        const a = [];
        a.push('过过过')//可执行
        console.log(a);
        console.log(a.length);//1
        a.length = 0;//可执行
        console.log(a.length);//0

        a = ['冲冲冲']//Assignment to constant variable.(分配给常量变量。)
        console.log(a);
        // 上面的代码中,常量a是一个数组,这个数组本身是可写的,但是如果将另一个数组赋值给a,就会报错.

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

<!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>Document</title>
</head>
<body>
    <script>
        // [变量声明var]
        //  var现在基本不用它，但是看到了你得认识他哦

        // [作用]
        // 1.设置变量
        // 2.和Let非常类似

        // [语法]
        // 1.声明变量
        var food
        // 2.变量声明+初始值
        var noodle = '重庆小面'
        // 3.重新赋值
        noodle = '兰州拉面'
        console.log(noodle);//兰州拉面

        // [注意点1: 变量会提升]
        console.log(num);
        var num = 10;

        // [注意点2: 没有块级作用域]
        for(var i = 1; i < 5 ; i++){
            console.log('循环内' + i);
        }
        console.log('循环外' + i);
    </script>
</body>
</html>

以上就是JavaScript基础的一些基础内容和代码，以及一些需要注意的一些注意事项。

Hls@

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript的一些基础内容归纳

JavaScript是一种属于网络的高级脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。既然我们已经大致了解了JavaScript，我们就来仔细的刨析一下，它主要由两部分组成。以上就是JavaScript基础的一些基础内容和代码，以及一些需要注意的一些注意事项。除变量需要声明外常量也需要声明，以及需要注意的东西。变量声明也是有区别的。
复制链接

扫一扫