JavaScript入门笔记1

作者: David_Rao | 来源:发表于2019-11-09 20:48 被阅读0次

写在前面

本文是我通过在网易云课堂上学习叶建华老师的撩课-零基础玩转JavaScript 视频教程，整理、精炼其配套笔记总结而来的。附上视频教程地址：

https://study.163.com/course/courseMain.htm?courseId=1005973001

以下是我的所有js入门笔记
JavaScript入门笔记1：https://www.jianshu.com/p/ab044eb35c56
JavaScript入门笔记2：https://www.jianshu.com/p/348805d50b77
JavaScript入门笔记3：https://www.jianshu.com/p/2146931d6706
JavaScript入门笔记4：https://www.jianshu.com/p/e95f00b53343
JavaScript入门笔记5：https://www.jianshu.com/p/97a241434881
JavaScript入门笔记6：https://www.jianshu.com/p/fc091ce8924e
JavaScript入门笔记7：https://www.jianshu.com/p/ea33bfb83da1

以下是本章节的内容
1、JavaScript的组成
2、JS基本语法
---2.1、JS的书写样式
---2.2、字面量和变量
---2.3、标识符，关键字，保留字
---2.4、数据类型
---2.5、数据类型转换
---2.6、进制表示

1、JavaScript的组成

包括ECMAScript、DOM、BOM

ECMAScript
ECMAScript是ECMA（欧洲计算机制造商协会）制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
DOM
DOM全称是document object model(文档对象模型)，是JavaScript操作网页上的元素的API
BOM
BOM全称是browser object model(浏览器对象模型)，是JavaScript操作浏览器的部分功能的API

2、JS基本语法

2.1、JS的书写样式

2.1.1、行内式

<!--方式1-->
<button onclick="alert('今天天气很好！');">今天天气?</button>
<!--方式2-->
<a href="javascript:alert('你点疼我了！！');">点我</a>

2.1.2、页内式

</body>
      ......
     <script type="text/javascript">
        alert("今天天气很好！");
     </script>
 </body>

注意事项：

1、<script></script>标签中的js代码一般写在文档的尾部；
2、网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
3、HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。
所以如果把js代码如果写在head中, 那么js代码执行完毕之前后续网页无法被加载。

2.1.3、外链式

<script type="text/javascript" src="01-js书写格式.js"></script>

2.2、字面量和变量

2.2.1、字面量

一些不可改变的值，比如: 数字, 字母, ....

2.2.2、变量

可以用来保存字面量，而且变量的值是可以任意改变的。在开发中都是通过变量去保存一个字面量。

// 1.声明变量
// 在js中使用var关键字来声明一个变量
var name;
var intro;
var age;
// 2.给变量赋值
name = "David Rao";
intro = "Hello, I am David Rao. You can also call me UJ";
age = 20;

// 可以申明的同时赋值
var name = "David Rao";
var intro = "Hello, I am David Rao. You can also call me UJ";
var age = 20;

2.3、标识符，关键字，保留字

2.3.1、标识符

在JS中所有的可以由开发者自主命名的都可以称为是标识符

2.3.2、关键字

JavaScript语言用于程序控制或者执行特定操作的英语单词；它们是被JavaScript语言赋予了特殊含义的英文单词；

2.3.3、保留字

JavaScript预留的保留字，它们虽然现在没有作为关键字，但在以后的升级版本中有可能作为关键字。

2.4、数据类型

2.4.1、数据

数据是指所有能输入到计算机并被计算机程序处理的符号的介质的总称，是具有一定意义的数字、字母、符号和模拟量等的通称。

2.4.2、数据类型

数据类型指的就是字面量的类型

基本数据类型

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

复杂数据类型

Object 对象

String(字符串)

在JS中字符串需要使用引号引起来
使用双引号或单引号都可以，但是不要混着用
引号不能嵌套，双引号不能放双引号，单引号不能放单引号

var name = 'David Rao';
var hello = "大家好";
// 转义字符
var str = '她说:\'再见\'';

Number(数值)

在JS中所有的数值都是Number类型，包括整数和浮点数（小数）

var num1= 123;
var num2= 3.14;
// 最大值：Number.MAX_VALUE
console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308
// 最小值：Number.MIN_VALUE
console.log(Number.MIN_VALUE);  // 5e-324
// 无穷大：Infinity, 如果超过了最大值就会返回该值
console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
// 无穷小：-Infinity, 如果超过了最小值就会返回该值
console.log(typeof Infinity); // number
console.log(typeof -Infinity); // number
// NaN是一个特殊的数字，表示Not A Number
var num = NaN;
console.log(typeof num);  // number

Boolean(布尔)

布尔值只有两个，主要用来做逻辑判断
true 表示真，false 表示假
使用typeof检查一个布尔值时，会返回boolean
布尔类型也代表1和0，实际运算中true=1,false=0

注意事项

任何非零数值都是true, 包括正负无穷大, 只有0和NaN是false
任何非空字符串都是true, 只有空字符串是false
任何对象都是true, 只有null和undefined是false

var bool = true;
console.log(typeof bool);  // boolean

Null(空对象)

空值类型, 值只有一个: null
null这个值专门用来表示一个为空的对象
使用typeof检查一个null值时，会返回Object

var a = null;
console.log(typeof a);  // object

Undefined(未定义)

未定义类型, 值只有一个: undefined
当声明一个变量，但是并不给变量赋值时，它的值就是undefined
使用typeof检查一个undefined时也会返回undefined
undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等(==)，会返回true
但是undefined和null的数据类型不相同，所以undefined === null会返回false

var b = undefined;
console.log(typeof b);  // undefined
console.log(b == null);  // true
console.log(b === null);  // false

2.5、数据类型转换

将一个数据类型转换为其他的数据类型, 比如: 将String类型转换为Number类型, 将Number类型转换为Boolean类型...

2.5.1、将其他的数据类型转换为String

方式一：数据.toString()
方式二：String(数据)
方式三：数据 + ‘’

// 方式一：调用被转换数据类型的toString()方法
// 该方法不会影响到原变量，它会将转换的结果返回
// null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错
var num = 12306;
var str= num .toString();
console.log(str); // 12306
console.log(typeof str); // string

var num1 = true;
var str1 = num1.toString();
console.log(str1 ); // true
console.log(typeof str1 ); // string

 var num2 = NaN;
 var str2 = num2.toString();
 console.log(str2); // NaN
 console.log(typeof str2); // String

// 方式二：调用String()函数，并将被转换的数据作为参数传递给函数
var a = null;
var b = undefined;
a = String(a);  
b = String(b);
console.log(typeof a);  // string       
console.log(typeof b);  // string

// 方式3：任何数据和 + 连接到一起都会转换为字符串, 其内部实现原理和String()函数一样
var num1 = 100;
var res1 = num1 + "";
console.log(res1); // 100
console.log(typeof res1); // string

var num2 = true;
var res2 = num2 + "";
console.log(res2); // true
console.log(typeof res2); // string

var num3 = undefined;
var res3 = num3 + "";
console.log(res3); // undefined
console.log(typeof res3); // string

var num4 = null;
var res4 = num4 + "";
console.log(res4); // null
console.log(typeof res4); // string

2.5.2、将其他的数据类型转换为Number

Number(数据)
parseInt(字符串数据)
parseFloat(字符串数据)

字符串 -> 数字

// 1.如果是纯数字的字符串，则直接将其转换为数字
// 2.如果字符串中有非数字的内容，则转换为NaN
// 3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
var str1 = "123";
var res1 = Number(str1);
console.log(res1); // 123
console.log(typeof  res1);  // number

var str2 = "David123";
var res2 = Number(str2);
console.log(res2);  // NaN

var str3 = "";
var res3 = Number(str3);
console.log(res3);  // 0

var str4 = "    ";
var res4 = Number(str4);
console.log(res4);  // 0

布尔 -> 数字

// true 转成 1, false 转成 0
var bool1 = true;
var n1 = Number(bool1);
console.log(n1); // 1

var bool2 = false;
var n2 = Number(bool2);
console.log(n2); // 0

null -> 数字

var str1 = null;
var n1 = Number(str1);
console.log(n1); // 0

undefined -> 数字

var str1 = undefined;
var n1 = Number(n1);
console.log(n1); // NaN

parseInt() 和 parseFloat()专门用来处理字符串 -> 数字

使用Number()函数中无论混合字符串是否存在有效整数都会返回NaN, 但parseInt()/parseFloat()可以提取字符串中的有效整数
parseInt()和parseFloat()的区别是前者只能提取整数,后者可以提取小数

var str1 = "300px";
var n1 = parseInt(str1);
console.log(n1); // 300

var str2 = "300px250";
var n2 = parseInt(str2);
console.log(n2); // 300
console.log(parseInt("abc123"));  //返回NaN，如果第一个字符不是数字或者符号就返回NaN
console.log(parseInt(""));        //空字符串返回NaN，Number("")返回0 

var str1 = "20.5px";
var n1 = parseFloat(str1);
console.log(n1); // 20.5

var str2 = "20.5.5.5px";
var n2 = parseFloat(n2);
console.log(n2); // 20.5

2.5.3、将其他的数据类型转换为Boolean

Boolean(数据)
null和undefined都会转换为false
Object转换为true

数字 -> 布尔

// 除了0和NaN，其余的都是true

字符串 -> 布尔

// 除了空串，其余的都是true

2.6、进制表示

// 16进制的数字，则需要以0x开头
num = 0x18;
num = 0xcf;
num = 0xAacf;
// 8进制的数字，则需要以0开头
num = 016;
// 2进制的数字，则需要以0b开头
num = 0b1010;

// 可以在parseInt()或parseFloat中传递第二个参数，来指定数字的进制
var str = "070";
str= parseInt(str,10);
            
console.log(typeof str);  // number
console.log(str);  // 70

写在最后

如果您觉得文章对您有帮助，不要吝惜您的“点赞”呀！