JavaScript课程——Day01（javaScript简介、体验、数据类型、数据类型的强制转换）

1、网页由三部分组成：

　　1.1、HTML：超文本标记语言，专门编写网页内容的语言。（结构）

　　1.2、CSS：层叠样式表。（样式）

　　1.3、javaScript：网页交互的解释性脚本语言，专门编写客户端交互行为。（交互）

 

2、什么是javaScript

　　javaScript是一种具有面向对象能力的、解释型的程序性语言。

• 开发公司：Netscape（网景）
• 作者：布兰登·艾奇（Brendan Eich）
• 时间：1995年
• 作用：实现网页交互、网页特效、前后端数据交互

3、javaScript的特点

　　3.1、解释性：计算机可以识别语言，读取一行，执行一行。

　　3.2、基于对象：内部提供了一些对象（工具），这些对象的方法或者属性可以实现js的基本功能。

　　3.3、事件驱动：javaScript可以直接对用户或者客户做出响应，无需经过web服务器，它对用户的响应，以事件驱动的方式进行。

　　3.4、安全性：javaScript是一种安全性语言，它不允许访问本地磁盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实时信息浏览或动态交互。

　　3.5、跨平台：javeScript依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javaScript的浏览器就可正常执行。

 

4、ECMAScript和javaScript的关系

　　4.1、ECMAScript：该语言的核心、基本语法、语句、变量、关键字等。

　　4.2、DOM：Document Object Model（文档对象模型）。

　　4.3、BOM：Browser Object Model（浏览器对象模型）。

 

5.javaScript的引入、变量及声明、字符串拼接、JS调试

　　5.1、引入javaScript

　　　　5.1.1、行内

<!-- 1、行内 行间，不建议使用，结构行为不分离，不方例复用 -->
<!-- onclick=""  点击 -->
<!-- alert('内容')  弹出框，弹出括号中的内容，如果不点确定，会一直卡住不向下执行 -->
<div style="width:100px;height:100px;background:red;" onclick="alert('我是平头哥')">我是来学前端的</div>

　　　　5.1.2、内嵌

<!-- 2、内嵌，写在script标签之间 -->
<script>
    alert('我是小彭，我来学前端');
</script>

　　　　5.1.3、外链（新建后缀为.js的文件）

<!-- 3、外链，方便复用 -->
<script src="js/a.js"></script>

　　　　注意：

　　　　1、数字和变量，不加引号，其他均加引号

　　　　2、js中一般用单引号，单双引号要正确嵌套

　　　　3、一个script标签只能一个用处，用了外链，就不能用作内嵌，可分别新建不同标签

　　　　4、script标签可以放在页面的任何地方，推荐写在head或者body标签结束的前面

　　　　5、每段js的后面加分号

　　　　6、区分大小写

 

　　　　注释：

　　　　//　　单行注释　　快捷键：Ctrl+/

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

 

　　5.2、变量

　　　　变量是存储数据的容器，我们通过变量名获取数据，修改数据。

 

　　　　命名规则：

　　　　1.只能由数字、英文字母、$、下划线组成

　　　　2.不能以数字开头

　　　　3.不能包含关键字、保留字

 

　　　　命名建议：

　　　　1.见名知意，命名要有语义化

　　　　2.驼峰命名，第一个单词后的单词首字母大写，如：fontSize、firstName、borderTopColor

 

　　5.3、变量及声明

　　　　5.3.1、声明并赋值

// 1、声明并赋值
// var 声明。将小花赋给name
var name = '小花';
alert(name);

　　　　5.3.2、先声明，再赋值

// 2、先声明，再赋值
var age; // 声明
age = 10; // 赋值
console.log(age);

　　　　5.3.3、一次声明多个

// 3、一次声明多个
var a = 10,
    b = 20,
    c = 30;
console.log(a, b, c);
// alert(a, b, c);

　　

　　5.4、字符串拼接

　　　　5.4.1、删除要替换的内容

　　　　5.4.2、写两引号，外面是什么引号就写什么引号

　　　　5.4.3、在引号之间，写两加号

　　　　5.4.4、在加号之间，放入变量

var name = '小李子';
var age = 8;
var sex = '男';
var from = '太空';
var job = '前端开发';

// console.log('我是xx，我今年xx岁，我是xx孩子，我来自于xx，我的职业是xx');
console.log('我是' + name + '，我今年' + age + '岁，我是' + sex + '孩子，我来自于' + from + '，我的职业是' + job);

　　5.5、js调试

　　　　5.5.1、输出调试

// 弹出 不推荐
var name = '老李';
alert(name);

// 控制台打印 推荐
console.log(name);

// 页面输出  不推荐
document.write('<h1>你是' + name + '</h1>');

　　　　5.5.2、断点调试

// 断点调试
//F12 sources

var a = 10;
var b = 20;
var c = a + b;
console.log(c);

6、数据类型

　　基本数据类型（简单数据类型）：Number（数字）、String（字符串）、Boolean（布尔）、Null（空）、Undefined（未定义）

　　引用数据类型（复杂数据类型）：Object（对象）

 

　　数据类型的判断

　　1、格式：typeof（参数）或者typeof 参数

　　2、作用：返回相对应的字符串，表示参数的数据类型

数据类型	说明	typeof的返回值
Number	正数、小数、负数0，无穷大，NaN、小数的舍入误差	'number'
String	单双引号引起的0个或多个字符，长度，下标，通过下标获取对应的字符	'string'
Boolean	true真 / false 假	'boolean'
Null	“空值”，代表一个空对象指针，使用 typeof 运算得到“object”，所以你可以认为它是一个特殊的对象值。	'object'
undefined	未定义，声明了未赋值，值为undefined	'undefined'
object	对象	'object'

　　6.1、Number

// 正数 小数 负数都是数字
var a = 10;
var b = 0;
var c = -12.2;
console.log(a, typeof (a)); // 10 'number'
console.log(b, typeof (b)); // 0 'number'
console.log(c); // -12.2
console.log(typeof c); // 'number'

// 八进制基数范围 0~7，以 0 开头并且没有超过 8 的值，则为八进制
// 十六进制基数范围 0-9，A~F，0x 开头，则为十六进制
var d = 070;
console.log(d); // 56

var e = 0x10;
console.log(e); // 16

// 特殊数值
var f = 9 / 0;
console.log(f); // Infinity  无限大
console.log(typeof f); // 'number'

// 小数的舍入误差
var g = 0.1 + 0.2;
console.log(g); // 0.30000000000000004
console.log(0.07 * 100); // 7.000000000000001

// NaN
var h = '小王' - 5;
console.log(h); // NaN    not a number 不是一个数字，（你想得到一个数字，但是没有办法给你一个数字，就给你一个NaN）
console.log(typeof h); // 'number'
console.log(h + 5); // NaN    任何涉及NaN的数学运算，结果都是NaN
console.log(h == h); // false   NaN和谁都不相等，包括它自己

// NaN的特点
// 1、不是一个数字，但是数值类型
// 2、任何涉及NaN的数学运算，结果都是NaN
// 3、NaN和谁都不相等，包括它自己

　　

　　6.2、String

// 字符串：单双引号引起来的就是字符串
// 建议都用单引号
var str1 = '我就是我，不一样的烟火';
var str2 = "小王";
var str3 = '   ';

console.log(str1, typeof str1); // 'string'

// 字符串长度    字符串.length
console.log(str1.length); // 11
console.log(str2.length); // 2
console.log(str3.length); // 3

// 下标：对字符串中的每个字符一个编号，编号从0开始
// 可以通过下标，获取对应下标的字符
// 字符串.charAt(下标)
// 字符串[下标]
console.log(str1.charAt(9)); // 烟
console.log(str1[9]); // 烟

 

　　6.3、Boolean

　　true真/false假

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

var b2 = false;
console.log(b2);

// ------------------------------------
// 布尔一般用在事件判断里面
// if (布尔值) { }
var age = 7;
if (age >= 7) {
    console.log('上小学');
} else {
    console.log('上幼儿园');
}

 

　　6.4、Null和Undefined

// null  空，代表“空值”，代表一个空对象指针，使用 typeof 运算得到“object”，所以你可以认为它是一个特殊的对象值。
var a = null;
console.log(a); // null
console.log(typeof a); // 'object'

// undefined  未定义，声明了未赋值，值为undefined
var b;
console.log(b); // undefined
console.log(typeof b); // 'undefined'

　　Null和Undefined的区别：

• Undefined：未初始化，访问一个空变量返回的值，声明变量但是未赋值
• Null：空，访问一个空对象返回的值，声明变量赋值但是值为空

7、数据类型的强制转换

　　7.1、转换为number类型

　　　　7.1.1、Number(参数)

　　　　作用：将任何类型转换为数字，不影响原参数

　　　　转换规则：

　　　　1、如果字符串全是数字，则正常转成数字，如果有一个不是数字，则转不成功，不成功则是NaN

　　　　2、如果是数字，则简单的返回

　　　　3、true转为1，false转为0

　　　　4、null转为0

　　　　5、undefined转为NaN

var str1 = '11';
var n = Number(str1); // 转换为数字
console.log(n); // 11
console.log(typeof n); // number
console.log(str1);

console.log(Number('11万')); // NaN
console.log(Number('')); // 0
console.log(Number('  ')); // 0
console.log(Number('0000.345')); // 0.345

console.log(Number(10));

console.log(Number(true)); // 1
console.log(Number(false)); // 0

console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

　　　　7.1.2、parseInt()和parseFloat()

　　　　parseInt(参数)：将参数转换为整数

　　　　parseFloat(参数)：将参数转换为小数

 

　　　　转换规则：从左向右一位一位的看，如果是数字，则提出来，如果不是数字，则到此为止，后面的都不要了

 

　　　　区别：

　　　　parseFloat认识一个小数点，而parseInt不认识小数点

　　　　parseInt有第二个参数，即以多少进制转换，而parseFloat它没有第二个参数

console.log(parseInt('12.34万')); // 12
console.log(parseInt('12ab34')); // 12
console.log(parseInt('a12ab34')); // NaN

// 可以添加第二个参数，进制
console.log(parseInt('070', 10)); // 70


console.log(parseFloat('12.34万')); // 12.34
console.log(parseFloat('12.3.4万')); // 12.34
console.log(parseFloat('0000.12.3.4万')); // 0.12

　　7.2、转换为字符串类型

　　String(参数); 可以将任何数据类型转换为字符串

　　参数.toString(); 同String，但是不能转换null和undefined

// String(参数); 可以将任何数据类型转换为字符串
// 参数.toString();

// String(参数);
console.log(String(10)); // '10'
console.log(String(NaN)); // 'NaN'
console.log(String(1 / 0)); // 'Infinity'

console.log(String('小王')); // '小王'

console.log(String(true)); // 'true'
console.log(String(false)); // 'false'

console.log(String(null)); // 'null'
console.log(String(undefined)); // 'undefined'

// -----------------------------------
// 参数.toString();
// 同String，但是不能转换null和undefined

var n = null;
// console.log(n.toString()); // 报错

var m;
// console.log(m.toString()); // 报错

 

　　7.3、转换为布尔类型

　　Boolean(参数);

　　作用：可以将任何数据类型转换成布尔值

 

　　规则：

　　　　1、数字里面的0和NaN转换成布尔为false，其它转换为布尔为true

　　　　2、字符串里，空字符串为假，其它均为真

　　　　3、布尔值简单的返回

　　　　4、null和undefined均转换为false

console.log(Boolean(10)); // true
console.log(Boolean(-10)); // true
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false

console.log(Boolean('NaN')); // true
console.log(Boolean('')); // false
console.log(Boolean('   ')); // true

console.log(Boolean(true)); // true
console.log(Boolean(false)); // false

console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

　　js世界的假值：共6个

• 假：0、NaN、空字符串、false、null、undefined
• 真：其它的值都为真，包括一切对象

 

　　7.4、toFixed

　　数字.toFixed(小数位数)

var n = 3.1415926;
console.log(n.toFixed(2));
console.log((10).toFixed(3));

 

　　7.5、isNaN

• isNaN(参数); 是不是不是一个数字？
• 不是数字返回true，是数字返回false
• isNaN自己不判断，找它的好朋友Number()，如果Number()能正确返回数字，则返回false，如果Number()转不成功，则返回true

console.log(isNaN('10')); // false
console.log(isNaN('10px')); // true
console.log(isNaN('')); // false
console.log(isNaN('   ')); // false

console.log(isNaN(NaN)); // true
console.log(isNaN(0)); // false

console.log(isNaN(true)); // false
console.log(isNaN(false)); // false

console.log(isNaN(null)); // false
console.log(isNaN(undefined)); // true