JavaScript学习笔记

JavaScript概述

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）

脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行,现在也可以基于 Node.js 技术进行服务器端编程

JavaScript的作用：

• 表单动态校验（密码强度检测）（JS产生最初的目的）

• 网页特效

• 服务端开发(Node.js)

• 桌面程序(Electron)

• App(Cordova)

• 控制硬件-物联网(Ruff)

• 游戏开发(cocos2d-js)

浏览器执行JS代码

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

JS的组成：

1. ECMAScript：
   ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

2. DOM——文档对象模型
   文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

3. BOM——浏览器对象模型
   浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

注：由于JS代码和Java基础极为相似，所以下面主要介绍两者不一样的地方

JS代码的位置

1. 行内式：

<input type="button" value="点我试试" onclick="alert('Hello World')" />

2. 内嵌式：

<script>
    alert('Hello  World~!');
</script>

script标签一般放在head标签中

3. 外部JS文件：

<script src="my.js"></script>

我们使用较多的是内嵌式和外部JS文件，行内式虽然方便，但只适合小部分JS代码，当JS代码较多时，不方便阅读。外部JS文件适合JS文件大的情况

JS原始数据类型：

• 数字型 Number，包含整数型和浮点型，默认值0
• 布尔 Boolean，布尔类型，true和false，对应于1和0，默认值为false
• 字符串 String，字符串类型，需要带单引号或双引号，默认值“”（空串）
• 未定义undefined，声明了变量却未赋值，此时这个变量就是undefined，例如var a;默认值为undefined
• 对象占位符 Null，var a=null，此时a值为空值。默认值null

JS是一门弱类型语言，定义变量时 采用 var 关键字来定义

var num=100 //注意：后面的分号，可写可不写，语法不报错，我们写Java习惯了，那建议还是写上。
var a=3.24
//定义字符串，单引号，双引号都可以使用
var s="abc"
var str='hehe'
//定义了一个变量，没有赋值，就是 undefined
var v;

JavaScript的输出语句：

//将内容输入到网页上
//输出数据到html页面上
	document.write(num);
	//输出HTML标签
	document.write("<h1>你好JS</h1>")
	//拼接变量
	document.write("<h1 style='color:blue;'>你好世界"+num+"</h1>")
//换行
	document.write("<br>")
//将内容以弹出窗口的方式显示
alert('3');
//将内容输出到控制台：
console.log(12);
//查看方式：
//1.右击空白处，点击“查看元素”（按“F12”）
//2.点击“控制台”

1.字符串嵌套
可以单引号嵌套双引号，也可以双引号嵌套单引号

var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''

2.字符串拼接
多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
注：字符串类型与未定义类型相加还是字符串，只是在原来字符串后面加undefined；字符串和空值相加也是字符串后面加undefined

			var c;
			console.log(c);//undefined
			console.log('100'+c);//100undefined
			console.log(typeof('100'+c));//String
			var d=null;
			console.log(d);//null
			console.log('100'+c);//100undefined
			console.log(typeof('100'+d));//String

3.数字类型相加
数字和布尔型相加，true为1，false变为0

console.log(true + 1);  // 2
console.log(false + 1); // 1

4.null和undefined

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

typeof可以检测变量类型

布尔型转换

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

简单地说，代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined

数字型转换
字符串转成数字，根据字面上去转，如果字面是个有效数字，就转换成数字，如果转换不过来就转换成 NaN，空串转换数字转成 0
注：NaN参与数学运算结果也NaN
undefined 参与数学运算结果都NaN
NaN 参与比较运算，结果都是false 除了 !=
alert(NaN != NaN) //true
布尔类型转换数字，true 转成1 false 转换成0

JS中数据类型的自动转换：当运算符想要的数据类型和你给的数据类型不一致，运算符就会尝试去转换这个数据。

比较运算符
>、<、>=、<=、= =、= = =、!=:
这里主要说一下= =和===
==：主要比较字面值，不管类型
===：先判断其类型，类型不一致返回false，类型一致时判断值，值不相等返回false，其他情况返回true

console.log('100'==100);//true
console.log('100'===100);//false

函数

类似于Java中的方法，封装一段功能逻辑，以实现重复调用

JS中定义函数的语法
方式1:

var fun = new Function("参数列表","方法体"); 
var fun = new Function("a,b","alert(a+b)");

方式2：（形参不需要写数据类型）

function add(a,b){
			var sum=a+b;
			return sum; //如果想返回数据，使用return返回即可
		}
		//调用
		var r=add(20,30);
		console.log(r);

方式3：

var show=function(a,b){
			var sum=a+b;
			return sum; 
		}
//调用
		var vv=show(36,69);
		alert(vv);

匿名函数，匿名函数可以作为参数传递

function(a,b){
			var sum=a+b;
			return sum; 
		}

关于函数的注意事项：

1. 函数的形参，不需要写数据类型。
2. 调用函数时，可以传参，也可以不传参，传多，传少都可以。传多了，就按照顺序取，取够为止。传少了，没有接收到值的形参值为undefined。
3. 函数有一个length属性，可以获取形参的个数
4. 函数有一个内置对象，arguments 是一个伪数组，他可以接收所有的实参。

void运算符

java基础中，void是指返回值为空，JS中void的用法有一点不同，具体用法看下面几个例子：

<!-- 只想让 a可以点，但是不要跳页面 -->
<a href="#">一个链接</a>
<!-- 只想让 a可以点，但是不要跳页面 -->
<a href="javascript:void(0)">一个链接www.163.com</a>
<!-- 只想让 a可以点，但是不要跳页面 -->
<a href="javascript:;;">一个链接www.163.com</a>
<!-- 不跳转页面，还会调用我传入的函数，把他当成一个按钮来用，来触发一个函数 -->
<a href="javascript:void(show())">一个按钮</a>

局部变量和全局变量

全局变量，定义再script标签里面的变量，全局变量属于window对象。浏览打开全局变量存在，关闭窗口，全局变量消失 局部变量，属于函数。如果局部变量前面省略var 他就变为了全局变量。