[JS]前置介绍

[JS]前置介绍
本节目标

初步了解JavaScript
- JavaScript是什么
- JavaScript书写位置
- 注释
- 结束符
- 输入和输出
- 字面量
1,JavaScript是什么

定义
- JavaScript是一种运行在浏览器的编程语言, 实现人机交互效果
作用
- 网页特效(监听用户的行为, 让网页做出对应的反馈)
- 表单校验(针对表单数据的合法性进行判断)
- 数据交互(获取后台的数据, 渲染到浏览器)
- 服务端编程(node.js)
💡 Tips：区分运行环境
- JS代码运行在浏览器环境, 就是做前端的工作
- JS代码运行在Node环境, 就是做后端的工作
查询
- 权威网站: https://developer.mozilla.org/zh-CN/docs/Web/Guide
分类
- 安照大类分: JavaScript 由 ECMAScript + Web APIs 组成
- 安装小类分: JavaScript 由 ECMAScript + DOM + BOM 组成
体验

步骤
1. 新建html文件
2. 生成骨架代码: Vs Code中, 输入 ! , 选择第一个选项, 可以快速生成HTML结构
3. 书写代码
```
<!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: rgb(15, 229, 93);
    }
  </style>
</head>
 
<body>
  <button class=" pink">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
 
  <script>
    let bts = document.querySelectorAll('button');
    for (let i = 0; i < bts.length; i++) {
      bts[i].addEventListener('click', function () {
        document.querySelector('.pink').className = ''
        this.className = 'pink'
      })
    }
  </script>
</body>
 
</html>
```
1. 运行代码:
重点总结
- JavaScript是一种运行在浏览器的编程语言
- JavaScript由 ECMAScript(基础语法) + Web APIs( DOM/BOM ) 组成
2,JavaScript书写位置

内部JS

直接写在HTML文件里, 用标签包裹

规范: script标签写在标签上面

原因: 浏览器从上往下加载, 把脚本文件放在body结束标签这里, 可以保证结构加载完成再执行脚本

外部JS

代码写在以 .js 结尾的文件里, 通过script标签,引入到html页面中

引入:

注意: script标签中间的位置不要写代码, 否则会被忽略

优势: 外部JS有利于代码复用, 且有利于html文件的清爽, 因此推荐使用

行内JS

代码写在标签内部

示例:

课堂练习

需求: 用内部和外部两种方式的JS, 弹出: 努力,奋斗

步骤:
1. 新建html文件
2. 使用内部JS弹出内容,
3. 引入外部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>
</head>
 
<body>
  
  <script src="./index.js"></script>
  <script>
    alert('加油, 努力')
  </script>
</body>
 
</html>
```
1. 新建外部JS文件, 弹出内容
```
alert('我是js')
```
重点总结
- JavaScript的三种书写位置: 内部, 外部, 行内
3,注释

单行注释
- 符号: //
- 作用: // 右边的这一行代码会被忽略
- 快捷键: ctrl + /
多行注释(块注释)
- 符号: /* */
- 作用: 在 /* 和 */ 之间的所有内容都会被忽略
- 快捷键: shift + alt + a
4,结束符
- 符号: 使用英文的分号 ; 作为结束符
- 作用: 代表语句结束
- 说明: 可写可不写, 浏览器可以自动推断语句的结束位置
- 约定: 按照团队要求, 要么都写, 要么都不写
5,输入和输出

输入和输出可以理解为人和计算机的交互, 用户通过键盘, 鼠标向计算机输入信息, 计算机处理后再展示结果给用户, 这就是一次输入和输出的过程

输出语法

文档打印输出
- 语法1: document.write('要输出的内容')
- 作用: 向body输出内容
- 注意: 可以识别标签
警告框输出
- 语法2: document.alert('要输出的内容')
- 作用: 页面弹出警告对话框
控制台输出
- 语法3: console.log('要输出的内容')
- 作用: 控制台输出语法, 普通日志
- 语法4 console.warn('要输出的内容')
- 作用: 控制台输出语法, 警告日志
- 语法5: console.error('要输出的内容')
- 作用: 控制台输出语法, 错误日志
输入语法

输入框
- 语法1 prompt('请输入您的姓名:')
- 作用: 显示一个对话框, 对话框中包含一条提示信息, 用户可以输入文字
- 效果
确认框
- 语法2: document.confirm('确认删除吗?')
- 作用: 显示一个对话框, 对话框中包含一条提示信息, 用户确认或者取消
补充: 代码执行顺序

JavaScript默认从上往下执行代码,

但是alert()和prompt() 它们会跳过页面渲染先被执行( 先作了解 )

课堂练习

需求:
- 在浏览器中弹出对话框: 你好 JS
- 在页面中打印输出: JavaScript 我来了
- 在控制台输出: 它~会魔法吧
步骤:
1. 新建html页面
2. 书写 js 代码
3. 运行代码
```
<!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('你好js')
    confirm('删除它?')
    document.write('JavaScript我来了')
    console.log('它~会魔法吧')
    console.warn('警告它!');
  </script>
</body>
 
</html>
```
6,字面量

在计算机科学中, 用字面量(literal) 描述计算机中的所有事/物

示例
- 我的工资是1000, 1000就是数字字面量
- 我的名字是张三, 张三就是字符串字面量
- 还有 []数组字面量, {}对象字面量等等
相关阅读:
大数据实战之HDFS单机配置
 Python爬虫学了几个月却不敢接单？过来人的经验总结收好！
docker仓库的搭建以及使用
 C语言操作符
 二聚乳酸-羟基乙酸共聚物聚乙二醇 PLGA-PEG-PLGA
Acwing双指针算法
 elementui组件兼容移动端
 NNDL 实验八网络优化与正则化（6）网络正则化
 入门【网络安全/黑客】启蒙教程
 DTU配置工具-F2x16工具
原文地址：https://blog.csdn.net/CSDN20221005/article/details/139789572

本节目标

1,JavaScript是什么

2,JavaScript书写位置

3,注释

4,结束符

5,输入和输出

6,字面量