【JS-1】—— JavaScript基础与基本语法
现在开始学习JavaScript了，这是第一次JavaScript的笔记。
文章目录
- 简介
- JavaScript构成
- JavaScript特点
- JS的Hello World
- JS代码编写位置
- 写在标签的属性中
- 写在onclick属性中
- 写在超链接的href属性中
- script标签
- 编写到外部JS文件中
- 基本语法
- 字面量与常量
- 数据类型
- String
- Number
- Boolean
- Null
- Undefined
- 强制类型转换
- 标识符
简介
JavaScript构成
ECMAScript是JavaScript的标准，但它不等同于JavaScript，也不是唯一被标准化的规范。实际上，一个完整的JavaScript实现，由以下三个不同部分组成：
- 核心（ECMAScript）：语言核心部分。
- 文档对象模型（Document Object Model，DOM）：网页文档操作标准。
- 浏览器对象模型（BOM）：客户端和浏览器窗口操作基础。
JavaScript特点
- 解释型语言
- 类似于C和Java的语法结构
- 动态语言
- 基于原型的面向对象
JS的Hello World
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script type="text/javascript">
/*
* 控制浏览器弹出一个警告框
*/
alert("哥，你真帅呀！");
/*
* 让计算机在页面中输出一个内容
* document.write()可以向body中输入一个内容
*/
document.write("你看我出不出来~~~");
/*
* 向控制台输出一个内容
* console.log()的作用是向控制台输出一个内容
*/
console.log("你猜我在哪出来呢？");
script>
head>
<body>
body>
html>
上面的图片显示出了alert();和document.write();的作用，console.log();是向控制台输出一个内容我们可以查看控制台：
上面三个语句可以称为三条输出语句：
- 控制浏览器弹出一个警告框:
alert();。 - 让计算机在页面中输出一个内容:
document.write();。 - 向控制台输出一个内容:
console.log();。
我们需要记住了。
JS代码编写位置
写在标签的属性中
写在onclick属性中
- 可以将JS代码编写到标签的onclick属性中，当我们点击按钮时JS代码才会执行。
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="alert('讨厌，你点我干嘛？')">点我一下button>
body>
html>
写在超链接的href属性中
- 可以将JS代码写在超链接的href属性中，这当我们点击超链接的时候，会执行JS代码。
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="alert('讨厌，你点我干嘛？')">点我一下button>
<a href="javascript:alert('让你点你就点？！')">你也点我一下a>
body>
html>
虽然可以写在标签的属性中，但是他们属于结构与行为的耦合，不方便维护，不推荐使用。
script标签
可以将JS代码写到script标签中就类似，CSS代码写到style标签中。
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
alert("我是script标签中的代码！！");
script>
head>
<body>
<button onclick="alert('讨厌，你点我干嘛？')">点我一下button>
<a href="javascript:alert('让你点你就点？！')">你也点我一下a>
body>
html>
编写到外部JS文件中
- 可以将JS代码编写到外部JS文件中，然后通过script标签引入。
- 写到外部文件中可以在不同页面中同时使用，也可以利用浏览器的缓存机制。
推荐使用的方式！！！
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BNAJfZHe-1588121768686)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/6.jpg)]](http://img.e-com-net.com/image/info8/d86ec7ada75f4521939e9cc2df096140.jpg)
-
注意：script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器一会忽略。
-
如果要编写，需要创建新的script标签。
-
script标签有一个布尔型属性defer属性，设置该属性能将JavaScript文件延迟到页面解析完毕后再运行。
-
-
异步加载JavaScript文件，可以通过script标签中的async属性，让浏览器异步加载JavaScript文件，即在加载JavaScript文件时，浏览器不会暂停，而是继续解析，这样能节省时间，提升响应速度。
-
-
async是HTML5新增的布尔型属性，通过设置async属性，就不同考虑script标签的位置！！
基本语法
- 注释：
/*
多行注释
*/
//单行注释
- JS中严格区分大小写。
- JS中每一条语句以分号结尾。如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。而且有些时候，浏览器会加错分号，所以在开发中分号必须写。
- JS中会自动忽略多个空格和换行，所以我们可以留用空格和换行对代码进行格式化。
字面量与常量
- 字面量：都是一些不可改变的值。
- 比如：1、2、3、4、5…
- 字面量都是可以直接使用的，但是一般都不会直接使用字面量。
- 变量：变量可以用来保存字面量，而且变量的值是可以任意改变的。
- 变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接用字面量。
- 可以通过变量对字面量进行描述。如：
var age = 18;。
数据类型
- 数据类型：数据类型指的就是字面量的类型，比如
123是数字，hello是字符串，在JS中一共有6中数据类型：
- String：字符串。
- Number：数值。
- Boolean：布尔值。
- Null：空值。
- Undifined：未定义。
- Object：对象。
其中前五种属于基本数据类型，而Object属于引用数据类型。
String
-
String字符串，在JS中字符串需要使用引号引起来。如：
var str = "hello"; -
特点：
- 使用单引号或者双引号都可以。但是不要混着用
var str = ' hello "; - 在ECMAScript3中，字符串必须在一行内显示，换行表示是不允许的，如果要换行，可以在字符串中添加换行符
\n。反斜杠作为JavaScript中的转义字符。 - 在ECMAScript5中，字符串允许多行表示。在换行结尾处添加反斜杠。反斜杠和换行符不能最为字符串直接量内容。
- 使用单引号或者双引号都可以。但是不要混着用
Number
- Number数值类型，在JS中所有的数值都是Number类型，包括整数浮点数（小数）。
- 当我们写下这样一段代码的时候：
//数字123
var a = 123;
//字符串123
var b = "123"
console.log(a);
console.log(b);
我们无法在控制台中区分那个是a那个是b，所以我们说：
- 可以使用typeof来检查变量的类型。语法：
typeof 变量名
console.log(typeof a);
console.log(typeof b);
特殊：
- 最大值：
Number.MAX_VALUE=1.7976931348623157e+308，如果数值超过了这个最大数值，则会返回一个Infinity表示正无穷。Infinity也是一个字面量，使用typeof检查会显示为number。 - 非数值：NAN，表示Not A Number。但是用typeof检查会显示为number。它不等于任何数值，包括自己，如果0除以0时会返回这个特殊值。
- 最小值：
Number.MIN_VALUE表示它能表示的最小的正值。
运算：
在JS中整数的运算基本可以保证精确，如果使用JS进行浮点数运算，可能得到不精确的结果。所以千万不要使用JS进行对精确度要求比较高的运算！！
Boolean
布尔型（Boolean）仅包含两个固定的数值：ture和false。其中true代表真，false代表假。布尔值主要用来做逻辑判断。
Null
Null类型的值只有一个就是null。它表示空值，定义一个空对象指针。
- 使用typeof检查null时会返回Object，表明它属于对象类型。
Undefined
Undefined类型只有一个值undefined，当声明一个变量，但是并不进行赋值，它的值就是undefined。
- 使用typeof检查undefined也会返回undefined。
强制类型转换
指将一个数据类型强制转换为其他的数据类型。
类型转换，主要指将其他的数据类型转换为String、Number、Boolean。
- 将其他的数据类型转换为String
方式一：调用被转换数据类型的toString()方法
该方法不会影响原变量，它会将转换的结果返回。
但是注意：null和undefined这两个值没有toString()方法，如果调用，他们的方法，则会报错。
方式二：调用String()函数。使用String()函数做强制类型转换时，对于Number、Boolean实际上就是调用toString()方法，但是对于null和undefined就不会调用toString()方法，他会将null转换为"null"，将undifined转化为"undefined"。
- 将其他数据类型转换为Number
方式一：使用Number()函数，用法和String()函数一样。
字符串转为数字：
- 如果是纯数字的字符串，则会转换为数字。
- 如果有非数字内容，转换为NAN。
- 如果字符串是空串，或是一个全是空格的串，则转换为0。
布尔型转为数字：
- true–>1
- False–>0
null转换为数字：0
undefined转换为数字：NAN
方式二：这种方式专门用来对付字符串，parseInt()；、parseFloat();函数。
parseInt();可以将一个字符串中的有效的数字内容取出来：先解析位置0出的字符，如果不是有效数字，则直接返回NAN，如果0处的字符是数字，或者可以转换为有效数字，则继续解析位置1处的字符，如果不是有效数字，则直接返回0处的有效数字。以此类推，按从左到右的顺序，逐个分析每个字符，直到发现非数字字符为止。
parseFloat();的作用和parseInt();类似，不同的是他可以获得有效的小数。即能识别第一个出现的小数点。
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var a = "123aes235y";
a = parseInt(a);
console.log(typeof a);
console.log(a);
var b = "123.456dsf";
b = parseFloat(b);
console.log(typeof b);
console.log(b);
script>
head>
<body>
body>
html>
再说一下，在JavaScript中以0开头的数字是八进制数字，以0x开头的数字表示十六进制数字。但是要表示二进制要以0b开头，但有些浏览不支持。
像a = "070"这种字符转换为数字，有些浏览器会当成八进制，有些浏览器当做十进制，所以要这样表示：parseInt(a,10);。
- 将其他数据类型转换为Boolean，使用
Boolean()；函数
console.log(Boolean(0));//返回false
console.log(Boolean(1));//返回true
console.log(Boolean("false"));//返回true
console.log(Boolean(""));//返回false
console.log(Boolean(null));//返回false
console.log(Boolean(undefined))l//返回false
注意：
- 数字–>布尔型：除了0和NAN之外，都是true。
- 字符串–>布尔型：除了空串，都是true。
- null–>布尔型：false。
- undefined–>布尔型：false。
- 对象也会转换为true。
标识符
在JS中所有的可以由自己命名的都可以称为是标识符。
- 例如：变量名、函数名、属性名都属于标识符。
- 命名一个标识符的时候要遵循以下规则：
- 标识符中可以含有字母、数字、下划线
_、美元符号$。 - 标识符不能以数字开头。
- 标识符不能是JavaScript中的关键字或者保留字。
- 命名规范：标识符一般都采用驼峰命名法。
补充：JS底层保存标识符实际上是采用Unicode编码，所以理论上所有的utf-8中含有的内容都可以作为标识符。但是考虑到JavaScript版本的兼容性以及开发习惯，不建议使用双字节中的中文字符命名变量或函数名！！虽然能用但千万别用！！