JavaScript 基础 ( js引入、输入和输出、变量、常量 )

小白兔的崽崽

已于 2022-07-31 16:11:24 修改

阅读量584

点赞数 4

文章标签： javascript 前端 html

于 2022-07-28 21:34:25 首次发布

本文链接：https://blog.csdn.net/weixin_46646051/article/details/126043152

版权

1. js 的组成

2. js 的引入

2.1 内联式

很少用

<button onclick="alert('唐伯虎点秋香)">按钮</button>

2.2 内部方式

通过 script 标签包裹 JavaScript 代码

<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
       alert('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>

2.3 外部方式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

注意：引入外部 JS 文件的 script 标签中间不可以写代码

// demo.js
document.write('嗨，欢迎来到游乐园！')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

3. js 注释

单行注释 ctrl + /

多行注释 shift + alt + A

4. 输入 & 输出

4.1 输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出

// 三种输出形式

// 1. 警示框形式
alert('警示框')


// 2. 浏览器页面中显示
document.write('浏览器页面中显示')

// 3. 控制台输出
console.log('控制台打印')

注意： document.write(``) 能识别标签

document.write(`<h1>你是小红帽吗</h1>`)

4.2 输入

prompt() 输入的内容会以弹窗的形式出现在浏览器中

// 1.能识别标签，结果在 body 中显示
    document.write('要输出的内容')

// 2. 输入的任意数字，都会以弹窗形式展示
    alert('要输出的内容');

// 3. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')

5. 变量

5.1 var 的缺陷

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

var 的缺陷：

var 可以先使用在声明
var 声明过的变量还可以再声明
var 会自动变量提升、var 声明的是全局变量、var 没有块级作用域

5.2 let 声明变量

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！
关键字变量名 比如：let age

5.2.1 赋值

let name
name = '张三'

// 等价于

let name = '张三'

5.2.2 注意

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名

5.2.3 命名规则

只能是字母、数字、下划线、$，且不能能数字开头
字母区分大小写，如 Age 和 age 是不同的变量
JavaScript 内部已占用于单词（关键字、保留字）不允许使用
尽量保证变量具有一定的语义，见字知义

6. 常量

使用 const 声明
命名规范：和变量一致

注意：

常量不允许重新赋值
声明的时候必须赋值