JavaScirpt

什么是JavaScript

它是一种基于事件和对象驱动的，具有安全性的脚本语言。

JS也是一门面向对象的编程语言，它是一种面向原型(prototype)的面向对象(原型链)。

历史：JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了…在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape**（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和**Java没什么关系。（语法上模拟了Java）

JavaScript这种语言目前也是发展的非常好，而且基于它产生了很多的框架和库。

Angular、React、Node、Vue、jQuery…JS插件等…

JavaScript脚本语言和Java这种非脚本静态语言的区别

• 编译器
  • 编译器：Java这类非脚本静态语言，它们是先进行编译，然后编译后的代码才可以在某些机器上运行。
    • 优点：当编译完后，如果下次再执行，无需编译直接执行。
    • 缺点：如果修改了源代码那么Java这种静态语言必须要重新编译。
  • 解释器：一般解释器作为编译器的都是一些脚本语言/动态语言，无需编译，写完就可以运行
    • 优点：无需编译，修改完直接可以展示最新。
    • 缺点：每次都需要进行编译（解释），速度慢。

JavaScript的组成：

• ECMAScript - 核心语法（标准）欧洲计算机制造商协会设立的标准。目前最常用版本5.1，最新版为6.
• BOM 浏览器对象模型
• DOM文档流对象模型

JavaScript基本语法
需要在body标签内加入script标签，在script标签内编写逻辑代码

<script type="text/javascript">
    <!--
    document.write("<h1>Hello World！</h1>");
	-->
</script>

JavaScript引入方式

• 行内引入
  借助于标签内置的事件属性，来实现。

  常用的事件属性有：onclick 点击事件 onmouseover 鼠标悬浮事件 onblur 失去焦点事件

<input type="button" value="点我清除缓存" onclick="alert('清除成功！');" />

• 内部引入
  在body上编写script标签(规范)，然后内部编写JS代码，有些时候行内和内部会结合使用。

<script type="text/javascript">
    document.write("<h1>Hello World！</h1>");
</script>

-外部引入

在</body>上编写<script src=""> 标签，来引入外部的JS文件。  (*.js文件)
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

JS中的变量

JavaScript的变量和Java的变量组成几乎一样

• 变量的数据类型
  • var (variable) 动态类型识别
• 变量名
  • 它由数字、字母、下划线、$等组成，但是数字不能开头
  • 见名知义
  • 采用小驼峰命名法
  • 也可以采用_连接命名法
• 变量值(单一类型的数据)

// 先声明再赋值
var num;
num = 10;
// 声明并赋值
var num = 10;

JS中的数据类型

• undefined：未定义 如果一个变量没有赋值过它的类型就是undefined
• null：表示一个空值 它可以和undefined做相等判断
• number：表示数值，整数或浮点数
• boolean：表示真和假 true、false
• string：表示字符串 (单引号或双引号引起来的内容)
• object：表示对象类型 (因为历史原因，以前的bug，所以当你测试null类型的数据时显示的是object)

JS中的常用运算符

• 算术运算符

+  -  *  /  %  ++  --

• 关系/比较运算符

>  <  >= <= == !=  ===  !==
=== 和 == 的区别  
== 只会比较内容而=== 不仅比较内容 还比较数据类型

var str1 = "12";
var num1 = 12;

alert(str1 === num1); // false
alert(str1 == num1); // true

• 赋值运算符

=  复合赋值：+=  -=  *=...

• 逻辑运算符

&&  ||   !

JS中的控制语句

选择结构
JavaScript内的选择结构和Java中的用法一样，分别有以下几种选择结构

• 基础if选择结构
• if-else选择结构
• 多重if结构
• 嵌套if选择结构
• switch选择结构

控制结构
JavaScript内的循环结构只有while循环和for循环两种，没有do-while循环

• while循环
• for循环
  控制循环的关键字也和Java一样
• break 结束循环
• continue 结束本次循环，进入下次循环

数组

// 1.
var arr = new Array(3);
arr[0] = "小明";
arr[1] = "小红";
arr[2] = "小绿";
// 2.
var arr = new Array("赵子龙","赵云","赵父龙");
// 3.
// JSON
var arr = ["周杰伦","林俊杰","罗志祥"];

JavaScript函数

基本系统函数使用

• 输出：alert(); 会弹出一个带有确定按钮的提示框。
• 输入：prompt(); 会弹出一个带有输入框的提示框。

// 如果输入了 则返回输入的内容 否则为null
// p1：提示的内容  p2:输入框中默认的文本内容
var pwd = prompt("请输入您的密码：");
alert("您输入的是："+pwd);

• parseInt() 转换为整数

var num1 = parseInt(prompt("请输入第一个整数："));
var num2 = parseInt(prompt("请输入第二个整数："));

• parseFloat() 转换为小数

var num1 = parseFloat(prompt("请输入第一个小数："));
var num2 = parseFloat(prompt("请输入第二个小数："));

需要注意的是，在进行计算时，由于prompt()返回的是字符串类型的数据，所以在使用加号时会进行自动拼接，从而不会出现相加结果，而是出现拼接的结果。
可以用在式子后加入 - 0来解决

var num1 = prompt("请输入第一个整数：") - 0; 
var num2 = prompt("请输入第二个整数：") - 0;

JavaScript内的方法分类

在JS中方法的声明是用function关键字来进行声明，在写完方法后，和Java一样需要进行调用

• 无反无参

function 方法名(){
	// 方法体
}
// 调用方法
方法名();

• 无反有参

function 方法名(参数列表){
	// 方法体
}
// 调用方法
方法名();

• 有反无参
  function 方法名(){
  // 方法体
  // 返回值
  return 返回值;
  }
  // 调用方法
  方法名();
• 有返有参

function 方法名(参数列表){
	// 方法体
	// 返回值
	return 返回值
}
// 调用方法
方法名();

函数中的变量作用域

// 成员变量
var i = 11;

function method1(){
    // 局部变量
    var i = 10;
    alert(i);
}

function method2(){
    alert(i);
}

method1();
//	method2(i);