[JS]前置介绍

王震是也

已于 2024-06-22 09:19:25 修改

阅读量1k

点赞数 15

分类专栏： JavaScript 文章标签： javascript 前端

于 2024-06-19 08:55:55 首次发布

本文链接：https://blog.csdn.net/CSDN20221005/article/details/139789572

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

本节目标

初步了解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 组成

体验

步骤

新建html文件
生成骨架代码: Vs Code中, 输入 ! , 选择第一个选项, 可以快速生成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: 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>

运行代码:

重点总结

JavaScript是一种运行在浏览器的编程语言
JavaScript由 ECMAScript(基础语法) + Web APIs( DOM/BOM ) 组成

2,JavaScript书写位置

内部JS

直接写在HTML文件里, 用<script></script>标签包裹

规范: script标签写在</body>标签上面

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

外部JS

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

引入: <script src="my.js"></script>

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

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

行内JS

代码写在标签内部

示例: <button οnclick="alert('逗你玩')">按钮</button>

课堂练习

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

步骤:

新建html文件
使用内部JS弹出内容,
引入外部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>
  <!-- 需求: 用内外两种JS弹出内容 -->
  <script src="./index.js"></script>
  <script>
    alert('加油, 努力')
  </script>
</body>

</html>

新建外部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 我来了
在控制台输出: 它~会魔法吧

步骤:

新建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>
</head>

<body>
  <!-- 输入输出练习  -->
  <script>
    prompt('你好js')
    confirm('删除它?')
    document.write('JavaScript我来了')
    console.log('它~会魔法吧')
    console.warn('警告它!');
  </script>
</body>

</html>