【基础语法】JavaScript 全栈体系（一）

柠檬小帽

已于 2023-02-16 23:36:01 修改

阅读量483

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript全栈体系文章标签： javascript 前端 html

于 2023-02-14 23:32:48 首次发布

本文链接：https://blog.csdn.net/sgsgkxkx/article/details/128963369

JavaScript全栈体系专栏收录该内容

10 篇文章

订阅专栏

本文介绍了JavaScript的基本概念，包括它是一种运行在浏览器端的编程语言，用于实现网页特效、表单验证和数据交互。JavaScript由ECMAScript和WebAPIs（包括DOM和BOM）组成。同时，文章讲解了JavaScript的三种书写位置——内部、外部和内联，以及单行和块注释的使用，还有关于结束符的使用习惯。此外，提到了JavaScript的输出语句如alert()和document.write()，以及字面量的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 基础

第一章 JavaScript 介绍

一、JavaScript 是什么

1. JavaScript （是什么？）

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

2. 作用（做什么？）

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

在这里插入图片描述

3. JavaScript的组成（有什么？）

ECMAScript:

规定了js基础语法核心知识。
比如：变量、分支语句、循环语句、对象等等

Web APIs:

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

4. 总结

4.1 JavaScript是什么？

JavaScript 是一种运行在客户端（浏览器）的编程语言

4.2 JavaScript组成是什么？

ECMAScript( 基础语法 )、web APIs （DOM、BOM）

二、JavaScript 书写位置

1. 内部 JavaScript

直接写在html文件里，用script标签包住
规范：script标签写在</body>上面
拓展： alert(‘你好，js’) 页面弹出警告对话框

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

注意事项：

我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

2. 外部 JavaScript

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

// demo.js
document.write('嗨，欢迎学习JavaScript！')

<!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标签中间无需写代码，否则会被忽略！
外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

3. 内联 JavaScript

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

4. 总结

4.1 JavaScript三种书写位置？

内部
外部
行内

4.2 注意事项

书写的位置尽量写到文档末尾 </body> 前面
外部 js 标签中间不要写代码，否则会被忽略

三、JavaScript 注释

目标：会使用两种JavaScript注释方法

1. 单行注释

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

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

2. 块注释

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

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

四、JavaScript 结束符

1. 结束符

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

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