【前端专栏--JS】第一章（一）：JavaScript的介绍

本专栏内容为：前端专栏记录学习前端，分为若干个子专栏，html js css vue等
💓博主csdn个人主页：小小unicorn

⏩专栏分类：js专栏

🚚代码仓库：小小unicorn的代码仓库🚚

🌹🌹🌹关注我带你学习编程知识

一

JavaScript
- JavaScript(是什么)
- 作用（做什么）
- JavaScript的组成(有什么)
- - ECMAScript
  - [Web APIs:](#Web APIs:)
- 初步体验JavaScript
js书写位置
注释的书写
- 单行注释：
- 多行注释
结束符
输入输出语句
- 输出
输入语法
字面量
总结：

JavaScript

JavaScript(是什么)

JavaScript是一种运行在客户端(浏览器)的编程语言，实现人机交互

作用（做什么）

网页特效（监听用户的一些行为让网页作出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到前端）
服务端编程（node.js）

JavaScript的组成(有什么)

ECMAScript

规定了js基础语法核心

例如：变量，分支语句，循环语句，对象等等、

Web APIs:

DOM:操作文档，比如对页面元素进行移动，大小，添加删除等操作
BOM：操作浏览器，比如页面弹窗，检测窗口宽度，存放数据到浏览器等等

初步体验JavaScript

接下来我们可以初步体验一下JavaScript:

有下面这么个案例：

让屏幕上出现四个按钮，当鼠标点击到这个按钮的时候，这个按钮就变成粉色，其他按钮不变。我们代码实现一下：

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>
    <style>
        .pink{
            background-color: pink;
        }
    </style>
</head>
<body>
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        //捕捉四个按钮
        let bts=document.querySelectorAll('button')
        //用for循环来控制点击事件
        for(let i=0;i<bts.length;i++)
        {
            bts[i].addEventListener('click',function(){
                document.querySelector('.pink').className=''
                this.className='pink'
            })
        }
    </script>
</body>
</html>

运行一下程序：

至于这个程序到底怎么解释，等学到后面就懂了。但还是要强调一下，在这段代码中可以分为三个部分:

分别是css,html,以及js

js书写位置

内部JavaScript

直接写在html文件里面，用Script标签包住

规范：Script标签写在</body> 上面

拓展：alert("你好~js")页面弹出警示框

代码展示：

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>
    <script>
        //我是内部的js文件
        alert("你好~js")
        alert('我是内部的js文件')
    </script>
</body>
</html>

运行后：

外部JavaScript

代码写在.js结尾的文件里

语法：通过script标签，引入到html页面中

代码展示：

首先在我们的代码目录下新创个目录，然后在该目录下创建一个my.js文件：

打开我们的js文件，将里面写上一下代码：

js 复制代码

alert('我是外部的js文件')

然后在我们的html文件中引入我们的js文件：

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>
    <script src="./js/my.js">
        //中间不允许写内容，写了也会被忽略
        // 单行注释  clt+/
        /* 
           shift + alt + a 
        */
    </script>
</body>
</html>

运行结果：

内联JavaScript

代码写在标签内部

注意：此处了解即可，但是后面vue框架会用这种形式

html 复制代码

<body>
	<button onclick="alert('CSDN~')">
	点击我月薪过万
	</button>
</body>

注释的书写

单行注释：

符号：//
作用：//右边这一行的代码会被忽略
快捷键：clt+/

多行注释

符号：/* */
作用：在/*和*/之间的所有内容都会被忽略
快捷键：shift+alt+a

结束符

作用：使用英文的；，代表语句结束
实际情况：实际开发中，可写可不写，浏览器会自动推断语句的结束位置
现状：在实际开发中，越来越多的人主张，书写JavaScript代码实省略结束符
约定：为了风格统一，结束符要么每句都写，要么都不写（按照团队要求）

输入输出语句

输出和输入也可理解为人和计算机的交互，用户通过键盘，鼠标等向计算机输入信息，计算机处理后再展示给用户，这便是依次输入和输出的过程

输出

语法1：

html 复制代码

document.write("要输出的内容")

作用：向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>
    <script>
        //输出语句：
        // 第一种方式
        // 输出
        document.write("hello csdn~")
        // 也可以输出标签
        document.write('<h1>一级标题</h1>')
    </script>
</body>
</html>

运行结果：

语法2：

html 复制代码

alert("要输出的内容")

作用：页面弹出警告对话框

语法3：

html 复制代码

console.log("控制台打印")

作用：控制台输出语法，程序员用来调试用的

代码展示：

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>
    <script>
        //输出语句：
        // 第一种方式
        // 输出
        document.write("hello csdn~")
        // 也可以输出标签
        document.write('<h1>一级标题</h1>')
        // 2.控制台输出
        console.log("调试一下代码")
    </script>
</body>
</html>

输入语法

html 复制代码

prompt("请输入您的年龄")

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

代码展示：

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>
    <script>
        //输入语句
        prompt("请输入您的年龄：")
    </script>
</body>
</html>

字面量

在计算机中，字面量是计算机中描述事/物

比如：

我们工资是：100000 此时100000就是数字字面量
'CSDN' 字符串字面量
[]对象字面量

总结：

JavaScript是什么

JavaScript是一门编程语言，可以实现很多的网页交互效果

JavaScript书写位置

内部
外部
内联

JavaScript的注释

单行注释
多行注释

JavaScript的结束符

分号：可以加也可以不加，根据制作团队约定

JavaScript的输入输出语句

输入：prompt()
输出: alert() document.write() console.log()