JavaScript入门到精通（一）

339+

已于 2022-09-28 08:45:00 修改

阅读量212

点赞数

分类专栏： JavaScript零基础文章标签： javascript 前端 node.js

于 2022-09-25 10:39:07 首次发布

本文链接：https://blog.csdn.net/m0_47743942/article/details/127034592

版权

JavaScript零基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JavaScript基础

01. JS简介
02. HelloWorld
03. JS编写位置
04. 基本语法
05. 字面量和变量
06. 标识符
07. 字符串
08. Number
09. 布尔值
10. Null和Undifined

01. JS简介

JavaScript基础分为三个部分：

ECMAScript：JavaScript 的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：Document Object Model（文档对象模型），操作页面上的元素的API。比如让盒子移动、变色、改变大小、轮播图等等。
BOM：Browser Object Model（浏览器对象模型），操作浏览器部分功能的API。通过BOM可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。

通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS提供的API。

JavaScript 的特点

特点1：解释型语言

JavaScript 是解释型语言，不需要事先被翻译为机器码；而是边翻译边执行（翻译一行，执行一行）。

特点2：单线程
特点3：ECMAScript标准

ECMAScript在2015年6月，发布了ECMAScript 6版本（ES6），语言的能力更强（也包含了很多新特性）

02. HelloWorld

<!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>Document</title>
    <!-- JS代码需要写到script标签当中 -->
    <script>
        alert("你好，HelloWorld ！") //窗口中弹出警告框

        document.write("向body中输出内容") //向body中输出一个内容

        console.log("向控制台输出内容")
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

【注意】Javascript代码按从上至下执行，多条语句按顺序先后输出

03. JS编写位置

①<script> </script>标签当中，如上文“02. HelloWorld”所示
②编写到标签、超链接等的属性中

<!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>Document</title>
</head>
<body>
    <!-- JS代码编写到标签的onclick属性中 -->
    <button onclick="alert('别点击我！');"> 
        点击我一下！
    </button>

    <!-- JS代码编写到超链接的herf属性中 -->
    <a href="javascript:alert('点击我干嘛!');">你也点击我一下！</a>
</body>
</html>

在这里插入图片描述

【注意】οnclick="alert(‘别点击我!’);"中’别点击我!'为单引号，双引号会报错
在JS中使用单引号双引号没有什么区别，当嵌套使用时，错开使用即可，一般建议外部使用双引号，里面使用单引号

③外部声明一个script.html文件，引入该文件
在这里插入图片描述

<script src="./02.script.html"></script>

在这里插入图片描述

【注意】<script src=“./02.script.html”>
alert(“我是内部的javascript代码”)；
</script>
在外部声明的script标签中，再想编写JS代码输出语句无法执行，需要重新声明新的script标签

04. 基本语法

JS中注释：注释中内容不会被执行，但可以在源代码中查看

单行注释： // 快捷键：Ctrl + /
多行注释： /* */ 快捷键：Shift + Alt + A

【注意】JS中严格区分大小写， Alert( )和alert( )不一样

【注意】JS中每一条语句以分号结尾，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。有时候浏览器会加错分号，因此在开发中必须加上英文分号，避免出错

【注意】JS中会自动忽略多个空格和换行，可以利用多个空格和换行对代码进行格式化

05. 字面量和变量

字面量：不可改变的值。比如：1,2,3，…，“a”,“b”,“c”…，字面量是可以直接使用的
变量：值可以任意改变。在JS中通常使用var关键字来声明一个变量
在这里插入图片描述

06. 标识符

在JS中所有可由我们自主命名的都可以称为标识符
例如：变量名，函数名，属性名
命名要遵循如下规则：

可以含有字母，数字，下划线，$
标识符不能以数字开头
标识符不能是ES中的关键字或保留字例如：var var = 123 （错误）
标识符一般采用驼峰命名法，除首字母外每个单词首字母大写，其余字母小写例如：xxYyZz

【注意】JS底层保存标识符实际上都是采用Unicde编码，所以理论上讲，所有utf-8都可以作为标识符。（例如： var 锄禾日当午 = 789；但不建议，推荐使用英文）

在这里插入图片描述

07. 字符串

JS数据类型是指字面量的类型，一共有6中数据类型：

String 字符串
Number 数字
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象

其中String，Number，Boolean，Null，Undefined属于基本数据类型，Object属于引用数据类型

String字符串需要用引号引起来，使用双引号或单引号都可以，但不能引号的嵌套使用

在字符串中可以使用\作为转义字符来表示单纯的单引号、双引号、反斜杠等
在这里插入图片描述

08. Number

在JS中所有的数值都是Number类型，包括整数和浮点数
JS中表示的数字最大值，Number.MAX_VALUE 1.7976931348623157e+308
JS中表示的最小正数值，Number.MIN_VALUE 5e-324
在这里插入图片描述
如果使用Number表示的数字超过了最大值，则会返回Infinity表示正无穷，返回-Infinity表示负无穷