JavaScipt基础

一、JavaScipt介绍

1.1JavaScript编程语言

1.2发展历史

1.3JavaScript和HTML、CSS

1.4JavaScript的组成

1.4.1ECMAScript-JavaScript的核心

1.4.2BOM-浏览器对象的模型

1.4.3BOM-文档对象模型

1.5JS学习状况

二、入门

2.1如何写一段JS代码并运行

2.1.1写在行内

2.1.2写在script标枪中

2.1.3写在外部js文件中，在页面引入

2.2变量

2.2.1什么是变量

2.2.2 如何使用变量

2.2.3变量的命名规则和规范

2.2.4案例

2.2.5代码调试（输出变量）

2.3数据类型

2.3.1简单数据类型

2.3.2复杂数据类型

2.4注释

一、JavaScipt介绍

1.1JavaScript编程语言

JavaScript，简称JS，是一种客户端脚本语言，主要用来向HTML网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）

JS主要运行于客户端（浏览器），也可以运行在服务端（操作系统）

JavaScript 和 Java 是两种不同的编程语言：JavaScript主要用于客户端，Java用于服务端。

JavaScript现在的意义(应用场景)

JavaScript 发展到现在几乎无所不能。

网页特效 *
服务端开发(Node.js) *
命令行工具(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

1.2发展历史

1994年Netscape公司推出免费版本浏览器 Netscape Navigator(网景浏览器1.0) 1995年微软公司发布 Internet Explorer 1.0。 1995年网景公司为适应市场变化，需要开发一门专门在浏览器运行的脚本语言，这个任务交给了布兰登，为了应付公司安排的任务，他只用10天时间就提交了工作，并将这门语言命名为 LiveScript; 后来为了蹭sun公司java的热度,与sun公司合作，将其临时改名为“JavaScript”; 1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript，首先内置于IE 3.0 1997年7月，ECMA组织发布ECMAScript 1.0版；此后，明争暗斗不断，1998年6月，ECMAScript 2.0版发布，1999年12月，ECMAScript 3.0版发布； 2007年10月，ECMAScript 4.0版草案发布，2008年7月中止ECMAScript 4.0的开发，并发布3.1版本；会后不久，ECMAScript 3.1就改名为ECMAScript 5。 2011年6月，ECMAscript 5.1版发布，现在使用最为广泛的版本版发布，现在使用最为广泛的版本； 2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”；随后，ECMA组织决定，每年发布一个升级版本，以年号来代替版本号，如：ECMAScript 2016、ECMAScript 2017；

另外： 1996年，样式表标准CSS第一版发布； 1997年，DOM模式第一版正式应用，目前的通用版本是DOM3，下一代版本DOM 4正在拟定中。 1999年，IE5部署了XMLHttpRequest接口，允许JavaScript发出HTTP请求； 2001年，提出了JSON格式，用于取代XML格式。 2002年，Mozilla项目发布第一版Firefox。 2003年，苹果公司发布了Safari浏览器的第一版。 2006年，jQuery函数库诞生 2007年，Webkit引擎在iPhone手机中得到部署； 2008年，为Chrome浏览器而开发的V8编译器(解析引擎)诞生； 2009年，基于V8解析引擎的Node.js项目诞生,迎来前后端JS的霸权时代； 2009年，Google发布Chrome OS 2009年，Google发布Angular框架； 2013年，Mozilla基金会发布手机操作系统Firefox OS，该操作系统的整个用户界面都使用JavaScript； 2013年5月，Facebook发布UI框架库React； 2014年，尤雨溪发布开源前端开发库Vue.js； 2015年3月，Facebook公司发布了 React Native项目；

1.3JavaScript和HTML、CSS

HTML：提供网页的结构，提供网页中的内容

CSS: 用来样式排版、美化网页

JavaScript: 可以用来控制网页内容，给网页增加动态的效果

1.4JavaScript的组成

ECMA 欧洲计算机制造联合会； ECMAScript 是一套标准，定义了一种语言的标准，规定了基本语法、数据类型、关键字、具体API的设计规范等，解析引擎设计的参考标准，但与具体实现无关；

1.4.1ECMAScript-JavaScript的核心

ECMAScript是一套语法标准，描述了JavaScript语言的基本语法和数据类型，是JavaScript的核心。 ES5 ES6

1.4.2BOM-浏览器对象的模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.4.3BOM-文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

1.5JS学习状况

我们在学习JS时，需要学习的内容分为两部分，语言结构及宿主环境提供的API；

语言结构部分主要时语言规则及内置对象；

而宿主环境的API，根据宿主环境不同而不同，以浏览器为例(js还可以运行在服务器/操作系统)，最常见的三个类型：浏览器控制类、DOM操作类、网络控制类；

总结：

JavaScript编程语言简称 JS，是一种嵌入式的脚本语言，应用范围及其广泛，由布兰登-艾奇开发，在20+年的发展中历经沧桑，学习 JS 分为语言规则及宿主环境两部分；

二、入门

2.1如何写一段JS代码并运行

2.1.1写在行内

01.html:
<input type="button" value="按钮" οnclick="alert('Hello World')" />

2.1.2写在script标枪中

02.html:
<head>
<script>
alert('Hello World!');
</script>
</head>

2.1.3写在外部js文件中，在页面引入

03.html:
<script src="main.js"></script>

main.js:

alert('Hello World!');

注意点： 引用外部js文件的 script 标签中不可以再写JavaScript代码，即使写了也不会执行，没有作用

2.2变量

2.2.1什么是变量

1.什么是变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

2.为什么使用变量

使用变量可以方便的获取或者修改内存中的数据

2.2.2 如何使用变量

var声明变量

var age;

变量的赋值

var age;
age = 18;

同时声明多个变量

var age, name, sex;
age = 10;
name = 'zs';

同时声明多个变量并赋值

var age = 10, name = 'zs';

2.2.3变量的命名规则和规范

规则 - 必须遵守的，不遵守会报错

由字母、数字、下划线、$符号组成，且不能以数字开头

区分大小写

不能是关键字和保留字，例如：for、while。

规范 - 建议遵守的，不遵守不会报错

变量名必须有意义

遵守驼峰命名法。(首字母小写，后面单词的首字母需要大写。例如：userName、userPassword)

下面哪些变量名不合法

1
age18
18age
name
$
$name
_sex
&sex
theworld
theWorld

name变量名，本身不是保留字/关键字，建议少用。 name在有的浏览器中，是自动声明过的。

2.2.4案例

交换两个变量的值

var a = '1';
var b = '2';
// 借助第三个变量
var c = a;
a=b;
b=c;
console.log(a,b);

不使用临时变量，交换两个数值变量的值

//第二种方式
var num1 = 10;
var num2 = 20;
//计算的方式:累加,然后相减
num1 = num1 + num2;//num1的结果是30
num2 = num1 - num2;//num2的结果是10
num1 = num1 - num2;//num1的结果是20
console.log(num1);
console.log(num2);

2.2.5代码调试（输出变量）

alert 弹框 :浏览器页面弹框

var num1 = 10;
alert(num1);

console.log() 浏览器console控制台

var num1 = 10;
var num2 = 20;
console.log(num1);
console.log(num1, num2);

document.write() 浏览器页面中

var num1 = 10;
document.write(num1);

2.3数据类型

2.3.1简单数据类型

Number、String、Boolean、Undefined、Null

获取变量的类型

typeof

var age = 18;
console.log(typeof age); // 'number'

Number类型

数值字面量：数值的固定值的表示法（数值直接量）

1024 60.5

浮点数（小数）

浮点数的精度问题

浮点数
    var n = 5e-324;   // 科学计数法 5乘以10的-324次方
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
   var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
   console.log(0.07 * 100);
   不要判断两个浮点数是否相等

数值范围

Number.MIN_VALUE，// 这个值为： 5e-324 5乘以10的-324次方
最大值：Number.MAX_VALUE，// 这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

String类型

'abc' "abc" 单双引号引起来的一连串字符

字符串字面量（直接量）

程序猿，程序媛, "黑马程序猿"

思考：如何打印以下字符串。我是一个 "正直" 的人我很喜欢 "黑马 '程序猿' "

注：转义后单双引号只能就近和转义后的单双引号进行配对

转义符

注： \b 退格符 \f又叫走纸或进纸或 换页符

var s = '我很喜欢 \"黑马 \'程序猿\' \"';
console.log(s);

字符串长度

length属性用来获取字符串的长度

var str = '黑马程序猿 Hello World';
console.log(str.length);

字符串拼接

字符串拼接使用 + 连接

console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);

两边只要有一个是字符串，那么+就是字符串拼接功能

两边如果都是数字，那么就是算术功能。

Boolean类型

Boolean字面量： true和false，区分大小写

计算机内部存储：true为1，false为0

Undefined和Null

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined

null表示一个空，变量的值如果想为null，必须手动设置

注: 关于undefined和null是一个面试中很容易被问到的问题

2.3.2复杂数据类型

Object 对象：保存很多数据的一种数据类型后面详解；

题外话

如何使用谷歌浏览器，快速的查看数据类型？

字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的

console.log('ss',2,null,undefined,true);

2.4注释

被注释的内容是不执行的，不管什么内容都不会运行；

单行注释

用来描述下面一个或多行代码的作用

// 这是一个变量
var name = 'hm';

多行注释

用来注释多条代码

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

总结：

JS代码的书写，变量的声明方式，数据类型，注释；