小汤学编程之JavaScript学习day01——认识JS、JS基础语法

本文链接：https://blog.csdn.net/SoupTC/article/details/110625485

在这里插入图片描述

一、认识JS

1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么？ 4.扩展内容

二、JS基础语法

1.代码书写位置 2.变量 3.注释 4.数据类型 5.基础输入输出 6.扩展内容：关键字、保留字和标识符

一、认识JS

1.JavaScript的组成

组成部分	说明
ECMAScript：JavaScript语法	是javascript的核心，也是学习重点。
BOM：浏览器对象模型	一套提供给程序员操作浏览器功能的API，比如alert()。通过BOM可以操作浏览器窗口，如：弹出框、控制浏览器跳转、获取分辨率等
DOM：文档对象模型	通过DOM提供的API可以对页面上的各种元素进行操作（大小、位置、颜色等）

2.浏览器执行js简介

(1)浏览器内核组成

分成渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎。

内核组成	作用
渲染引擎	用来解析HTML与CSS，俗称内核。比如chrome浏览器的blink
JS引擎	js解释器用来读取网页中的js代码，对其处理后运行。比较经典的就是chrome浏览器的V8。

(2)五大浏览器四大内核

浏览器	内核
IE浏览器	Trident内核
Chrome浏览器	以前是Webkit内核，现在是Blink内核
Firefox浏览器	Gecko内核
Safari浏览器	Webkit内核
Opera浏览器	最初是自己的Presto内核，后来是Webkit内核

3.JavaScript是什么？

(1)概念

一种运行在客户端的脚本语言，现在也可以基于Node.js技术进行服务器端编程。
脚本语言：不需要编译，由js解释器（js引擎）逐行进行解释并执行。
世界上最流行的语言。（很多语言都自称最流行）

(2)JS的功能

页面各类动态广告，各类动画效果。
表单效验（密码强度检测，也是最初目的）。
在线游戏（水果忍者、三国志、偷菜）。

(3)HTML/CSS/JS的关系

HTML/CSS是标记语言——描述类语言。
CSS决定网页的妆容。
javascript是脚本语言——编程类语言。

4.扩展内容

(1)JS的历史

JS之父：布兰登·艾奇（Brendan Eich，1961年～）（小猪佩奇）
在这里插入图片描述
Netscape网景公司在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。

(2)解释型语言和编译型语言

编译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译时间点的不同。

编译器是在代码执行之前进行编译，生成中间代码文件。
解释器是在运行时进行及时解释，并立即执行。

当编译器以解释方式运行的时候，也称之为解释器。

二、JS基础语法

1.代码书写位置

(1)行内式

<a href="#" onclick="alert('hello world')">点击我</a>

缺点：可读性差，引号易出错。

(2)内部式

<script type="text/javascript">			
    alert("hello world...");			
</script>

内部式标签里的type可以省略，因为script标签的type默认就是text/javascript。

(3)外部式

<script src="js/hello.js" type="text/javascript"></script>

注意:外部js文件的标签中不写代码是规范的写法，就算写了不会生效。

2.变量

(1)什么是变量

通俗：变量就是一个装东西的盒子。
概念：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。
本质：变量是程序在内存中申请的一块用来存放数据的空间。

(2)变量的使用

声明：var age;
赋值：age = 10;

我们一般连写为：var age = 10;

(3)变量命名规则和规范

规则：

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成。
区分大小写。
不能以数字开头。
不能是关键字、保留字和代码符号。

规范：

变量名必须有意义。
遵守小驼峰命名法。首字母小写，后面单词的首字母需要大写。（如：usrName）

3.注释

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

4.数据类型

(1)五大基本数据类型

①.number

1)整数：int
2)小数：float
3)数值范围：
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-324
4)isNaN(x) 方法：x是一个数值则返回false，x非数值则返回true

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2;结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100); 结果不是 7，而是：7.000000000000001
所以：不要直接判断两个浮点数是否相等 !

②.boolean
boolean布尔类型只有true/false两种值。

③.string
1)字符串嵌套：
JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)。
2)字符串转义符

符号	转义符
\n	换行符
\\	斜杠
’	单引号
"	双引号
\t	tab
\b	空格
\r	回车符

3)字符串长度：str.length
4)字符串拼接：数值相加，字符相连。

④.undefined
未定义类型，一个声明后没有被赋值的变量会有个默认值 undefined。

⑤.null
空

(2)检测变量的数据类型

.typeof()方法可以返回变量的数据类型吗，例如：

例子	结果
typeof(“小白”)	string
typeof(0306)	number
typeof(true)	boolean
typeof(undefined)	undefined
typeof(null)	object(js的一个bug)

(3)数据类型的转换

①.转换为字符串

toString 把变量转成字符串
String() 把特殊值转成字符串
加号拼接字符串,任何基本类型和字符串拼接的结果都是字符串

②.转换为数值

parseInt(string)函数——转成整数
parseFloat(string)函数——转成浮点数
Number()强制转换函数
js隐式转换——利用算术运算隐式转换

③.转换为Boolean值

Boolean——将布尔字符串转成布尔值

代表空、否定的值会被转换为false有五种：“”、0、NaN、null、undefined。
其余任何值都会被转换为true。

(4)引用数据类型

Object 、Array 、Function 、Data等，以及自定义类型，为js的引用数据类型。
创建方式：

字面量方式：var person = {name:'zhangsan'};
构造方法：var obj1= new Object();

5.基础输入输出

代码	说明
alert(msg)	在浏览器页面弹出一个只有确定项的小窗口
prompt(msg)	在浏览器页面弹出一个可输入值的小窗口，（用户输入的任何内容都是一个字符串）
console.log(msg)	在控制台输出信息

6.扩展内容：关键字、保留字和标识符

关键字：指JS本身已经使用了的名字。

break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等

保留字：实际上就是预留的“关键字”，意思是现在虽然现在还不是关键字，但是未来可能会成为关键字的。

boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等

表示符：指开发人员为变量、属性、函数、参数取的名字。