javaScript 基础入门（一）

关注前端体系，获得更多学习资料

对于web前端开发来说，javaScript是核心，说难学也不难，说简单也不简单。有时一些概念，官方文档的解释就及其难懂。对此，我分享我的学习笔记，简单粗暴，通俗易懂，看完你基本就会了！

适合人群：至少掌握HTML+CSS基础知识

基本概念

前端三大基础知识：

HTML：编写网页内容

CSS：设计网页样式、布局

JavaScript：网页交互的语言

什么是JavaScript：

1.专门设计网页交互的语言

2.运行在JavaScript解释器中

JavaScript特点：

纯文本；解释执行；弱类型；基于对象

JavaScript=ECMAScript+DOM（文档对象模型）+BOM（浏览器对象模型）

ECMAScript标准：JavaScript核心语法

DOM标准：专门操作HTML元素，CSS样式，事件的统一标准！

BOM：专门操作浏览器窗口的工具。没标准，由浏览器厂商自行实现

官方详细介绍：

ECMAScript 规定了 JavaScript 脚本的核心语法，如 数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器。

文档对象模型（DOM）——对应Document对象

浏览器对象模型（BOM) ——对应window对象

JavaScript典型用途：

1.嵌入动态文本于html页面中

2.客户端数据计算

3.客户端表单（提交到服务器之前）验证（用户注册，登录验证等）

4.增强网页动画，特效等（下拉菜单，图片轮播等）

5.基于Node.js技术进行服务器端编程

JavaScript的使用

如何编写javaScript：

01

使用浏览器自带的js解释器：

F12打开控制台，光标处写脚本代码，回车执行。

Console：指代控制台，专门调试程序输出结果的窗口。

log：控制台Console提供的一个功能，向控制台输出一行日志

多行代码输入：【shift】+【enter】→换行

02

随网页一同运行：

浏览器包含：【排版引擎】+【解释引擎】

排版引擎：专门加载HTML内容和CSS样式等

解释引擎：专门运行js脚本

标签：专门包含js脚本块的元素，放在网页任何位置都可以。

中脚本块何时运行？随网页加载，解释执行

解释执行，读到才执行。先读到先执行。

放置的先后顺序影响程序结果。

优化：放在body的最后

调试js代码

写JavaScript的时候，如果期望的效果没有实现，不要抓狂，也不要泄气，作为小白，要坚信：JavaScript本身没有问题，浏览器执行也没有问题，有问题的一定是我的代码。

如何调试：bug？

只要没反应或效果没出来就是出错-->F12

查看错误原因-->定位错误位置！

脚本块中的错误，仅影响“当前脚本块”中出错“位置之后”的脚本执行。

不影响之外的其他元素加载或脚本块执行。

function中的错误：只有调用方法时才触发！

常见的JS错误类型：

SyntaxError（语法错误）

解析代码时发生的语法错误。

ReferenceError（引用错误）

引用一个不存在的变量时发生的错误

TypeError（类型错误）

1.变量或参数不是预期类型，比如，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数

2.调用对象不存在的方法

RangeError（范围错误）

当一个值超出有效范围时发生的错误

javaScript语法

ECMAScript（核心语法）

区分大小写

每条结尾都建议有分号(英文模式下的分号)

语句：发给浏览器的命令，如下例子：

脚本块：多行语句的序列

注释：不会被解释执行或显示的代码说明——给程序员看的

注释也占网页流量！生产环境必须去掉！

HTML注释：

CSS注释：/* */

JS注释：//单行注释 /*多行注释*/

如下例子：

变量

概念：变量用于存储数据值。一切数据必须存在变量中

何时使用变量？只要在程序中需要存储的数据，都要放在变量中

语法：var 变量名 =值；

赋值：变量名=值，使用等号赋值操作

如果未赋值：js默认赋值undefined

命名规则：见名知意

保留字/关键字不能当变量名

常见的是驼峰法的命名规则，如 lastName (而不是lastname)

保留字：js中已经占用的特殊意义的关键字

强调：只有等号可以向变量中存入新值。

常量

概念：一旦声明，常量的值就不能改变

如何使用常量：const 常量名=常量值

以上重新赋值，就是出错！

数据类型

js是弱类型：

变量本身没有类型。只有变量中的值才有类型。

一个变量，可以反复保存不同类型的数据

为什么要有数据类型：现实中所有数据根据用途不同，分为不同数据类型。

数据类型：变量中存储的数据的类型。

原始类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）

引用类型：对象(Object)

string类型：

字符串是存储字符的变量。

字符串可以是引号中的任意文本。可以使用单引号或双引号

number类型：

表示一切用于比较或数学计算的数字

程序中数字分整数、浮点数（现实中的小数）

js中一切数字都用number保存，不分整数类型和小数类型

程序中数字类型的舍入误差：程序中不能准确表示1/10，就好像现实中不能准确表示1/3一样。

如何修正：按指定位数四舍五入：数字.toFixed（小数位数）

今后计算结果小数位数超长，说明碰到舍入误差。按位四舍五入。

boolean类型：

仅有两个值的特殊数据类型：true，false

何时使用boolean？只要一个值只有真假两种情况，就用boolean类型

undefined类型：

表示一个变量仅声明过，但从未赋值。所有未赋值的变量，默认值都是undefined。

undefined类型的值还是undefined！

null类型：

可以通过将变量的值设置为 null 来清空变量。

object类型：*重点核心内容*

对象由花括号分隔。

在括号内部，对象的属性以名称和值对的形式来定义。属性由逗号分隔

／未完待续 下期再会.

大家想要什么资源/教程，或者学习上遇到问题都可以留言给小编哦~看到会及时给大家回复~

觉得本文对你有帮助，可以分享给更多人

关注【前端体系】，“领干货” 一起提升技能！