JavaScript 基础一part1.介绍、书写位置、注释、结束符、输入输出语法、字面量

JavaScript 基础一

1.1 介绍
1.2 JavaScript 书写位置
- ① 内部 JavaScript
- ② 外部 JavaScript
- ③ 内联 JavaScript
1.3 JavaScript 注释
- 单行注释
- 多行注释
1.4 JavaScript 结束符
1.5 JavaScript 输入输出语法
- （1）输出
- （2）输入
- - JavaScript代码执行顺序
1.6 字面量

1.1 介绍

JavaScript （是什么？）
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

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

组成（有什么）
① ECMAScript
规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等
② Web APIs
DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

JavaScript权威网站
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

1.2 JavaScript 书写位置

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

① 内部 JavaScript

直接写在html文件里，用script标签包住
规范：script标签写在</body>上面

通过 script 标签包裹 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>
</html>

② 外部 JavaScript

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

在这里插入图片描述

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

// 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>

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

③ 内联 JavaScript

代码写在标签内部
语法：
注意：此处作为了解即可，但是后面vue框架会用这种模式

<body>
	<button onclick="alert('haha')">别点我</button>
</body>

1.3 JavaScript 注释

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：

单行注释

快捷键：ctrl + /
使用 // 注释单行代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
    document.write('嗨，欢迎来传智播学习前端技术！');
  </script>
</body>
</html>

多行注释

快捷键：shift + alt + A
使用 /* */ 注释多行代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    /* 这种的是多行注释的语法 */
    /*
    	更常见的多行注释是这种写法
    	在些可以任意换行
    	多少行都可以
      */
    document.write('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>
</html>

注：编辑器中单行注释的快捷键为 ctrl + /

1.4 JavaScript 结束符

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

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 结束符</title>
</head>
<body>
  
  <script> 
    alert(1);
    alert(2);
    alert(1)
    alert(2)
  </script>
</body>
</html>

实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;

1.5 JavaScript 输入输出语法

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

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

（1）输出

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

① document.wirte()
作用：向body内输出内容
注意：如果输出的内容写的是标签，也会被解析成网页元素。它是识别标签的。
② alert()
作用：页面弹出警告对话框
③ console.log()
作用：控制台输出语法，程序员调试使用

（2）输入

语法：prompt('请输入您的名字')
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 输入输出</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');

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