Javascript基础知识（一）

web前端可以从三个层面来描述：

• 1 . 结构层 HTML 从语义的角度，描述页面结构。
• 2 . 样式层 CSS 从审美的角度，美化页面。
• 3 . 行为层 JavaScript 从交互的角度，提升用户体验。

JavaScript运行在客户的电脑里面，而不是服务器上，所以我们称为“前台语言”。JavaScript就是一个简单的制作页面效果的语言，不能操作数据库。它服务于页面的交互效果、美化、绚丽。

今天开始学习一些Javascript的基础知识。

1.Javascript的历史背景介绍

布兰登•艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。
同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。
Javascript和ECMAScript的关系
JavaScript是由公司开发而成的，公司开发而成的一定是有一些问题，不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association。ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。
Javascript发展历程
2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。
2004年JavaScript命运开始改变。人们逐渐开始提升用户体验，谷歌公司带头使用Ajax异步交互技术（搜索框智能感应）。（Ajax技术就是JavaScript的一个应用）。
2007年，用户就多了上网的途径——移动设备上网。JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，人们越来越重视JavaScript了。
2010年，人们更加了解HTML5技术了，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。
2011年，Node.js诞生，使JavaScript能够开发服务器程序了。

2. JS 语法格式

Js 的书写位置非常的自由。

• 行内式

<button onclick="alert('哈哈哈')">点击我</button>

• 内嵌式

<script type=”text/javascript”>  </script>  任何一个地方

• 外链式

<script type=”text/javascript” src=”hh.js”></script>

跟链入css一样，写在head里面。

1.书写在body里面任何一个地方。

<script type="text/javascript">
	内容
</script>

3.JS语句

###1.alert语句

alert就是英语里面的“警报”的意思。用途就是弹出“警告框”：

<script type="text/javascript">
	alert("警报：密码含有大写字母！");
</script>

代码截图：

效果：

JavaScript对换行、缩进、空格不敏感，但最后一定要加分号，否则压缩代码后，就会出问题。

###2.控制台输出语句——console

例：

<script type="text/javascript">
	console.log("警报：密码含有大写字母！");
</script>

在网页上右键，点击检查，找到console。

###3. document.write() 文档打印输出

document.write() 直接在文档中显示。

4.直接量——数字和字符串

“直接量”也称为“字面量”，就是看见什么，它就是什么。简单的直接量有2种：数字、字符串。
数值的直接量的表达非常简单，它不需要任何的符号：

alert(666);  //666是数字，所以不需要加引号。

字符串就是人说的话，比如单词、句子，一定要加上引号。

5.变量

计算机的程序中，用字母来表示数字、字符串等其他东西的，称为“变量”。跟小学数学代数差不多。

<script>
	var a = 100;//把数字100赋值给a，用var来定义一个变量。
	console.log(a);//在控制台输出a
</script>

效果：

var就是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”。

###1. 变量名有命名规范：
只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。
下列的单词，叫做保留字，就是说不允许当做变量名：
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

• 输出变量，一定不要加引号

2.变量的类型

变量里面能够存储数字、字符串。变量会自动的根据存储的东西类型不同，来决定自己的类型。

-数值型
如果一个变量中，存放了数字，那么这个变量就是数值型的。

var a = 100;			//定义了一个变量a，并且赋值100
console.log(typeof a);	//输出a变量的类型

typeof表示“某某的类型”
###3.字符串型

1	var a = "abcde";
2	var b = "回家吃饭";
3	var c = "123123";
4	var d = "哈哈哈哈哈";
5	var e = "";     //空字符串

4.布尔值

布尔类型的值，就两个，true、false，用的时候千万不要加上引号。

var a = true;
var b = false;

###5.连字符和加号
“+”号有两种含义：
1） 连字符
2） 加

console.log("我" + "爱" + "你");	//连字符，把三个独立的汉字，连接在一起了
console.log("我+爱+你");			//原样输出
console.log(1+2+3);				//输出6

如果加号两边都是数值，此时是加。否则，就是连字符。

5.变量值的传递

语句：
1 a = b;
将等号右边的值，赋给左边的变量；等号右边的变量，值不变。
把b的值赋给a，b不变。

	var a = 1;		//定义a，并且赋值1
	var b = 2;		//定义b，并且赋值2
	a = b;			//就是将b的值给a，b的值不变。所以a就是2了，b是2不变。
	console.log(a);	   //2
	console.log(b);	//2

###6.变量的分类
根据变量的作用范围 可以分为全局变量和局部变量
全局变量：
1. 在最外层声明的变量。
2. 在函数体内部，但是没有声明var 的变量也是全局变量
局部变量：
在函数体内部声明的变量。

6.运算符和表达式

运算符有很多分类：数学运算符、逻辑运算符、自增运算符等等。

###1.数学运算符：

运算顺序跟数学中学的一样，只是没有中括号和大括号，全部都是小括号。
语法：

Math.pow(a,b);

####1.乘方：

var a = Math.pow(3,4);
console.log(a);

可以嵌套：

var a = Math.pow(3,Math.pow(2,2));
console.log(a);

####2.开根号：

	var a = Math.sqrt(81);
	console.log(a);

3.关系运算符

>	大于号
<	小于号
>= 	大于或等于
<=  小于或等于
== 	等于
=== 全等于
!=	不等于
!== 不全等于

注意：在JS中=符号只有一个意思！表示赋值！！如果想判断两个东西，是否相等，需要使用符号==。和=的区别是：一个判断值是否相等,一个是判断值及类型是否完全相等。

console.log("5" == 5);		//true
console.log("5" === 5);	//false

关系运算符的意思和数学上学得一样。它们得到的结果都是布尔值，要么是true，要么是false。
示例：

<script type="text/javascript">
	//得到用户的成绩
	var chengji = parseInt(prompt("请输入成绩"));
	//输出结果：
	alert(chengji >= 60);
</script>

4.逻辑运算符

逻辑运算符有三个：

&& 与（且）
||	或
!   非

只有true、false才能参与逻辑运算，得到的答案，仍然是布尔值。

// &&表示“且”的意思，都真才真
console.log(true && true);		//true
console.log(true && false);		//false
console.log(false && true);		//false
console.log(false && false);	    //false

//或，都假才假
console.log(true || true);			//true
console.log(true || false);			//true
console.log(false || true);			//true
console.log(false || false);		//false

• 连比要分开写

应该拆开，中间用一个&&连接。

console.log(1< 2 && 2 < 4);//true

7.变量格式转换

###1.用户输入 prompt

<script type="text/javascript">
		var a = prompt("请输入点什么");
		console.log(a);
</script>

prompt就是专门用来弹出能够让用户输入的对话框：

alert(“哈哈哈”); //直接使用，不需要变量
var a = prompt(“请输入一个数字”); // 必须用一个变量，来接收用户输入的值

###2.字符串→数字 parseInt parseFloat

parseInt是一个非常多功能的东西，可以将字符串转为数字，也可以将数字取整，也可以转换进制。

console.log(parseInt("365天做10000个娃娃"));

只保留开头的数字：365

console.log(parseInt(5.8));

浮数取整：5
parseInt(值, 进制);
parseInt(110,2)
把110 这个2进制转换为 10进制

parseFloat将它的字符串参数解析成为浮点数并返回。
Number函数把对象的值转换为数字。
###3.Null undefined

Null 空的 没有值 。
Undefined 未定义的 应该有值，但是没有给。