JavaScript Part 1

一、什么是JavaScript？

JavaScript 是面向 Web 的编程语言，获得了所有网页浏览器的支持，是目前使用最广泛的脚本编程语言之一，也是网页设计和 Web 应用必须掌握的基本工具。

二、JavaScript的组成

1、ECMAScript：是Javascript的核心，主要规定JavaScript的基本语法。所有的浏览器厂商都会遵循这个语法(标准)。以后说的ES也指代JS。

2、DOM：文档对象模型(Document Object Model)，是W3c组织提供的编程接口。用户可以通过DOM的接口去操作页面中的元素

3、BOM：浏览器对象模型(Browser Object Model),独立于内容,可以和浏览器进行交互的对象结构通过BOM可以直接对浏览器窗口进行操作

三、JS的使用

1.嵌入式

所谓的嵌入式就是写在html文件中，JS部分的代码包含在<script></script>标签里。

    <script>
        JavaScript代码部分;
    </script>

2.外链式

外链式是指JavaScript代码保存到一个单独的文件中,通常使用”js”作为文件的扩展名，让然后使用<script>标签的src属性引入文件。

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

3.行内式

行内式是将JavaScript代码作为Html标签的属性值使用。

<button onclick="alert('这是一个警示框');">点击</button>

这个代码实现的功能是点击一个按钮随即弹出一个警示框，警告框里的内容是“这是一个警示框”。

四、JS的输入与输出

1.常用输入语句prompt（‘’）;

    <script>
        prompt('输入一个数字：')
    </script>

2.常用输出语句

• alert（警告框里的内容）--------弹出一个警告框

    <script>
        alert('这是一个警告框')
    </script>

• console.log（内容）---------在控制台输出内容

    <script>
        console.log('这是在控制台显示的内容')
    </script>

• document.write（内容）---------输出在页面上

    <script>
        document.write('这是显示在页面上的内容')
    </script>

五、JS的语法规范

1、基本的语法规则：

   (1)严格区分大小写
   
   (2)对空格、换行、缩进不敏感,一条语句可以多行写
   
   (3)一条语句结束后可以是用分号,也可以不用分号
   
2、注释符号

   (1)单行注释符：以 '//'开始,到所在行结束.快捷键：ctrl+/
   
   (2)多行注释符：以'/*'开始,以'*/'结束，中间可以包含多行.
   快捷键：shift+alt+a

六、JS的变量

1.如何声明变量

变量是用来存储数据的容器，在使用前必须要进行声明，否则将没有意义。

我们用var关键字声明变量。

<script>
	var x;
	x = 5;
</script>

2.变量命名

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）
• 变量通常使用驼峰命名法--------即首字母小写后面的单词首字母大写。（eg：myName、newArr）

3.变量的数据类型

1.String字符串
2.Number数值
3.Boolean布尔值 false / true
4.Null空值
5.Undefined未定义
6.Object对象

------其中String Number Boolean Null Underfined 属于基本数字类型
-----而Object属于引用数据类型

①String字符串

字符串是存储字符（比如 “Bill Gates”）的变量。

字符串可以是引号中的任意文本。可以使用单引号或双引号：

    <script>
        var a = '12';//此时a是一个字符串而不是数字型
                //可嵌套 外单内双 外双内单
        var str = ' 我是美女!';
        var str = 'my name is hyh';

        //字符串的拼接
        var cc = '沙漠' + '骆驼';
        console.log(cc);
    </script>

关于字符串类型的变量我们需要知道：

a、转义字符：以'\'开头，后跟一个字符,代表某个特殊含义
		
		          \n：表示换行
				  
				  \t：Tab符号
				  
				  \b：退格符
				  
				  \x：十六进制数  \x61
				  
				  \\：表示一个反斜杠
				  
b、字符串的长度：字符串变量默认有length属性，代表字符串的长度(有效字符的个数)
		
c、访问字符串中的某个字符：字符串变量名[index],index的取值从0开始到字符串的长度减1
		
d、字符串的拼接：通过'+'实现.不同类型的数据和字符串拼接时,会将其他类型的数据先转换成字符串.

②Number数值

数字型常用的数制

	   a、二进制：由0和1组成的数字序列
	   
	   b、八进制：由0开头,0~7组成的数字序列,逢8进1
	   
	   c、十六进制：是0x开头,由0~9数字和a~f字母组成
	   
	   d、十进制

数字可以带小数点，也可以不带：

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

③Boolean布尔值

布尔（逻辑）只能有两个值：true 或 false。
布尔常用在条件测试中。

var x=true;
var y=false;

④Undefined 和 Null未定义值和空值

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

cars=null;
person=null;

4.数据类型的检测

用typeof关键字检测变量的数据类型

<script>
    var a = 11;
    var b = '11';
    console.log(typeof a);
    console.log(typeof b);
</script>

5.数据类型的转换

（1）转换为字符串

a、通过连接符'+'
	   
b、通过toString()方法
	   
c、通过String()类进行转换

以数字型转换为字符串型为例：

<script>
        //Number转换为String
        //1  变量名.toString()
        var num = 10;
        var str = num.toString();
        console.log(num);
        console.log(str);
        console.log(typeof str);
        //2  String(变量名)  强制转换
        console.log(String(num));
        //3 ****** 利用拼接字符串（空字符串）实现转换  隐式转换
        console.log(num + '');
</script>

（2）转换为数字型

a、通过parseInt()将字符转换成整数
	   
b、通过parseFloat()将字符串转换为浮点型数据(小数)
	   
c、通过Number()将字符串转为数字型
	   
d、通过算术运算符进行隐式转换

    <script>
        var age = '18';
        console.log(typeof age);
        //age = parseInt(age);
        //age = parseFloat(age);
        //age = Number(age);
        age = age * 1;
        console.log(typeof age);
    </script>

七、JS的运算符

1.算数运算符

y=5为例：

运算符	描述	例子	x运算结果	y运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取余	x=y%2	1	5
++	自增	x=y++	5	6
		x=++y	6	6
- -	自减	x=y- -	5	4
		x=- -y	4	4

2.赋值运算符

x=10 y=5为例：

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
- =	x- =y	x=x- y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

3.比较运算符

x=5 为例：

运算符	描述	比较	返回值
==	等于	x==8	false
===	绝对等于	x===‘5’	false
！=	不等于	x!=4	true
！==	不绝对等于	x!==5	false
>	大于	x>1	true
<	小于	x<1	false
>=	大于等于	x>=5	true
<=	小于等于	x<=8	true

4.逻辑运算符

x=6 y=3 为例

运算符	描述	例子
&&	与	(x < 10 && y > 1) 为 true
ll	或	(x==5
!	非	!(x==y) 为 true

注意
&&运算的短路现象：当’表达式1’为false时，不运算’表达式2’
||运算的短路现象：当’表达式1’为true时，不运算’表达式2’

优先级顺序：！> && > ||

5.条件运算符

条件运算符(? : )：是一个三目运算符(参加运算的对象有三个)

条件表达式： 表达式1?表达式2：表达式3

先运算’表达式1’，
-------若结果为true则选择’表达式2’进行运算，并把’表达式2’的值作为整个条件表达式的值；
-------若’表达式1’的结果为false，则选择’表达式3’进行运算，并把’表达式3’的值作为整个条件表达式的值