JavaScript 语法基础学习_javacsript语法基础-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_61920612/article/details/122862175

本文介绍了编程语言的基本概念，包括编程、计算机语言和编程语言的分类。重点讲解了JavaScript的历史、作用及其与HTML/CSS的关系，阐述了浏览器如何执行JS以及JS的组成部分ECMAScript、DOM和BOM。同时，展示了JS的三种书写方式，并给出了注释和输出语句的示例。

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

1. 编程语言

1.1 编程

编程： 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。

计算机程序： 就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
从事编程的人员就是程序员，也被幽默地称为“码农”，或者“程序猿”/“程序媛”
Tips: 上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、黑莓PI、服务器等等。

1.2 计算机语言

计算机语言 指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。
计算机语言的种类非常多，总的来说可以分为机器语言，汇编语言和高级语言三大了。
实际上计算机最终所执行的都是 机器语言，它是由“0”和“1”组成的二进制数，二进制就是计算机语言的基础。请添加图片描述

1.3 编程语言

可以通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言（Programming Language）。
编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。
如今通用的编程语言有两种方式：汇编语言和高级语言。

汇编语言 和机器语言实质是相同的，就是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
高级语言 主要是相当于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

1.4 翻译器

高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。
翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。记住1和0。
请添加图片描述

1.5 编程语言和标记语言区别

编程语言 有很强的逻辑和行为能力。在编程语言里，你会看到很多if else、for、while等具有逻辑性和行为能力的指令，这是主动的。
标记语言 （html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的，它是被动的。

1.6 总结

计算机可以帮助人类解决某些问题
程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
编程语言有机器语言、汇编语言、高级语言
高级语言需要一个翻译器转换为计算机识别的机器语言
编程语言是主动的有很强的逻辑性

2. 计算机基础

2.1 计算机组成

请添加图片描述

2.2 数据存储

计算机内部使用二进制0和1来表示数据。
所有数据，包括文件、图片等最终都是以二进制数据（0和1）的形式放在硬盘中的。
所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。
硬盘、内存都是保存的二进制数据。

2.3 数据存储单位

请添加图片描述

2.4 程序运行

请添加图片描述

3. 初识 JavaScript

3.1 JavaScript历史

请添加图片描述

3.2 JavaScript是什么

请添加图片描述

3.3 JavaScript的作用

请添加图片描述

3.4 HTML/CSS/JS 的关系

请添加图片描述

3.5 浏览器执行JS简介

浏览器分为两部分 渲染引擎和JS引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

3.6 JS的组成

请添加图片描述

3.6.1 ECMScript

ECMAScript 是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。
请添加图片描述
ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

3.6.2 DOM —— 文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

3.6.3 BOM —— 浏览器对象模型

BOM（Browser Obeject Model，简称BOM）是指浏览器对象模型,他提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

3.7 JS 初体验

JS有三种书写位置，分别为行内、内嵌和外部。

3.7.1 行内式 JS

< input type=“button” value=“点我试试” οnclick=“alert(‘Hello World!’)” / >

可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
可读性差，在HTML在编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS初体验</title>
</head>

<body>
    <!-- 1. 行内式的js 直接写到元素的内部 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>

</html>

请添加图片描述

3.7.2 内嵌 JS

< script > alert(‘Hello World!’) < /script >

可以将多行JS代码写到< script >标签中
内嵌JS是学习时常用的方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS初体验</title>
    <!-- 2. 内嵌式的js -->
    <script>
        alert('沙漠骆驼')
    </script>
</head>

<body>
</body>

</html>

请添加图片描述

3.7.3 外部 JS

< script src=“my.js”>< /script >

利用HTML页面代码结构化，把大段JS代码独立到HTML页面之外，即美观，也方便文件级别的复用
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS初体验</title>
    <!-- 3. 外部js script是双标签 -->
    <script src="my.js"></script>

<body>
</body>

</html>

alert('如果我是DJ，你会爱我吗？')

请添加图片描述

4. JavaScript 注释

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS注释</title>
    <script>
        // 1. 单行注释 ctrl + / 
        /* 2. 多行注释  默认的快捷键 shift + alt + a
        2. 多行注释 vscode中设置可修改多行注释的快捷键
        */
    </script>
</head>

<body>

</body>

</html>

5. JavaScript 输入输出语句

请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS输入输出语句</title>
    <script>
        // 这是一个输入框
        prompt('请输入您的年龄');
        // alert 弹出警示框 输出的 展示给用户的
        alert('计算的结果是');
        // console 控制台输出 给程序员测试用的
        console.log('程序员能看到的')
    </script>
</head>

<body>

</body>

</html>