JavaScript的第一天

  一、JavaScript的介绍
1. JavaScript是什么？
JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端 Web 开发的
脚本语言，常用来给 HTML 网页添加动态功能，比如响应用户的各种操作。
JavaScript的编辑工具：
常见的JavaScript编辑工具有很多，例如记事本、Hbuilder、Dreamweaver和Visual Studio，还有Sublime Text、Notepad++等

万事万物都是对象
对象中的三大要素/三大特征:
属性: 用来描述一个对象的外观特征表现.

方法(主动行为): 对象自己本身所具备的能力.

事件(被动行为): 对象自己接受到一种指令需要完成的一种行为.

2. 解析执行与编译执行
编译执行：把代码编译成 CPU 认识的语言(文件)，然后整
体的执行。
解析执行：一行一行解析，解析一行执行一行。
弱类型脚本语言:
脚本语言是：弥补编译语言的不足而存在的，作为补充语言，不用编译。
弱类型语言：简单理解定义一个变量，可以有多种数据类型。（var temp）

二、JavaScript入门基础
1. JavaScript 嵌入页面的方式
(1)行间事件（主要用于事件）

(2)内联嵌入:通过script标签嵌入head中,

<script type="text/javascript">
//			实现load()函数
			function load(){
				alert('你好,这是页面加载事件的方法实现...');
			}
//			没有函数名字的加载事件
     		window.onload=function(){
				alert('没有名称的加载事件....通过window调用加载事件');
			}

		</script>

(3)外部引入:通过script标签引入外部js文件中JavaScript的文件.

<script src="js/index01.js" type="text/javascript" charset="utf-8"></script>

(4)消息提示框:

alert('你好,我是alert');

confirm('是否关闭窗口')  返回为true或false

prompt(值1,值2)  值1表示消息框的提示,值2表示消息框中的文本内容,

console将内容显示在控制台中.

(5)script程序嵌入body中和head中的区别是什么?

在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。

 

JavaScript应放在哪里

head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。

body 部分中的脚本: 当页面被加载时立即执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

body 和 head 部分可同时有脚本:你可在文件中放无数的脚本，因此你的文件中可以在body和head部分同时存在脚本。

 

 

2. JavaScript的变量
JavaScript 是一种弱类型语言，javascript 的变量类型由它的值来决定。定义变量需要用关键字 'var' 

变量的命名规则

①驼峰命名法:userName 小驼峰  UserNamePwd 大驼峰;
 ②变量的名称可以以 $,_,字母开头;
 ③变量名称中可以包含数字,但是不能以数字开头;
④变量的不能使用JavaScript中的关键字进行命名;
⑤变量可以使用中文命名,但是LOW;
 ⑥变量中区分大小写:userName和UserName(表示两个不同的变量);
⑦变量名称中不允许出现空格,长度不能超过255个字符.

var userName='admin';
var $userName='admin';
var _userName='admin';
var $000userName='admin';
//  var 000userName='admin';
//	var date=123; //不能使用关键字命名

3. JavaScript数据类型及转换
(1)数据类型
JavaScript数据类型有2大分类：一是“基本数据类型”，二是“特殊数据类型”。
其中，基本数据类型包括以下3种：

1) 数字型（Number型）
2) 字符串型（String型）
3) 布尔型（Boolean型）

a. 数字型（Number型）
数字（Number）是最基本的数据类型。在JavaScript中，和其他程序设计语言（如C和Java）的不同之处在于，它并不区别整型数值（int）和浮点型数据（float）。在JavaScript中，所有的数字都是由浮点型表示的。

				//number数字类型
				var num=10;
//				重要的方法: typeof  用来检测变量的数据类型
//				alert(typeof(num));  //检测结果为数字类型
//				alert(typeof num);  //第二种检测数据类型的方法
				var num1=2.345;
//				alert(typeof num1);
				alert(num1);

b. 字符串型
字符串是由Unicode字符、数字、标点符号等组成的序列，它是JavaScript用来表示文本的数据类型。程序中的字符串型数据是包含在单引号或双引号中的，由单引号定界的字符串中可以含有双引号，由双引号定界的字符串中也可以含有单引号.

//      字符串类型string
		var str1='admin';
//		alert(typeof str1); //检测结果  为string 字符串类型
		var str2='123';
		alert(typeof str2);   //检测结果  为string 字符串类型

c. 布尔型（Boolean型）
数值型和浮点型的数据值都有无穷多个，但是布尔型数据类型只有2个：真（true）和假（false）。0可以看作false，1可以看做true。

//   布尔类型boolean: 赋值只有两种结果true/false
	 var bool=true;
	 alert(typeof bool);// 检测结果为boolean布尔类型
     var bool=false;
	 alert(typeof bool);// 检测结果为boolean布尔类型

特殊数据类型有3种：

（1）空值（null型）

（2）未定义值（undefined型）

（3）object对象类型
a. 空值（null型）
整型、浮点型这些数据在定义的时候，系统都会分配一定的内存空间，JavaScript中的关键字null是一个特殊的值，它表示空值，系统没有给它分配内存空间，null不等同于空的字符串（""）或0，因为空的字符串（""）或0是存在的，但是null表示其不存在的。

b. 未定义值（undefined型）
如果一个变量虽然已经用var关键字声明了，但是并没有对这个变量进行赋值，而无法知道这个变量的数据类型，因此这个变量的数据类型是undefined，表示这是一个未定义数据类型的变量，此外，JavaScript中有一种特殊类型的数字常量NaN，即“非数
字”。当在程序中由于某种原因发生计算错误后，将产生一个没有意义的数字，此时JavaScript返回的数字值就是NaN

null与undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值。

案例：

特殊的数据类型
	//(1)undefined未定义类型:声明变量未初始化
		  var unde;  
//		   alert(typeof unde);//检测结果为undefined 未定义类型
//	    (2)null空类型
		var str=null;
//		alert(typeof str);
				
//     (3)object对象类型
		  var str1=new String(); //实例化,创建对象
//		  alert(typeof str1);  //检测结果为对象类型object

(2)数据类型转换
所谓的类型转换，就是将一种数据类型转换为另外一种数据类型，

a. 数值型转换为字符串型

在JavaScript中，将数值型数据（整型或浮点型）转换为字符串，都是使用toString()方法

案例：

            var num=10;
			var num1=String(num); //第一种转换的方式
//			alert(typeof num1); //检测结果为string字符串类型
			
		 	var num2=num.toString();// 第二种方式 常用
//			alert(typeof num2);  //检测结果为string类型

b. 字符串型转换为数值型
在JavaScript中，将字符串型数据转换为数值型数据有parseInt()和parseFloat()这2种方法。其中，parseInt()可以将字符串转换为整型数据；parseFloat()可以将字符串转换为浮点型数据

语法：
parseInt() //将字符串型转换为整型
parseFloat() //将字符串型转换为浮点型

案例：

            var str1='123';
//			alert(typeof Number(str1)); //检测结果为number类型
			var str2='123.45';
//			alert(typeof Number(str2)); //检测结果为number类型
			var str3=Number(str2);
//			alert(str3); //输出结果为123.45

			var str4='abc123';
//			alert(typeof Number(str4)); //检测结果为number
//			alert(Number(str4));//检测结果为NaN 表示非数字   表明转换失败
			
			var str5='123abc';
//			alert(typeof Number(str5));//检测结果为number
//			alert(Number(str5)); //转换失败 NaN  必须要求是纯数字才可以转换

			var str6='abc123';
			var num_01=parseInt(str6);
//			alert(typeof num_01); //检测结果为number
//			alert(num_01);// 转换失败  NaN值
			
//			重点: 在转换的过程中遇到非数字的类型 就不会再转换, 然后输出转换完成数字
			var str7='123abc';
			var num_02=parseInt(str7);
//			alert(num_02);  //输出结果为123,省略abc

			var str8='12ab33cc';
			var num_03=parseInt(str8);
//			alert(num_03);  //测试结果为12 ,同样是遇到非数字的类型就停止转换,输出转换完成结果
			
			
			var str9='123.34';
			var num_04=parseInt(str9); //转换为整数型,导致数据的流失
//			alert(num_04);
			
//			转换为数字类型保留为浮点数,确保数据的完整性
			var num_05=parseFloat(str9);
//			alert(num_05);

4. JavaScript中的运算符和表达式
JavaScript的运算符按运算符类型可以分为以下5种：
(1) 算术运算符：加、减、乘、除  取余
(2) 比较运算符：> ,< ,>= ,<= , != , ==
(3) 赋值运算符；= ,+= , -= ,/= ,*= ,%=
(4) 逻辑运算符；&&(与), ||(或) , !(非)
(5) 条件运算符；(三目/三元运算符)  格式:条件?值1:值2

案例:

 (1)算数运算符

			var a=2,b=3;
//           输出到浏览器的文档流中
			document.write(a+b);  // 测试结果为5
//			+号的作用有两种:(1)求和运算;(2)连接字符串
			document.write('<br />');  //设置页面换行
//			document.write('\r\n');  没有效果
			
			var a1=2,b1='3';
//			document.write(a1+b1);
//			alert(a1+'\r\n'+b1);  //换行的转义字符使用
			document.write('<hr />');
			var a2=23,b2=12;
//			document.write(a2-b2);
//			document.write(a2*b2);
//			document.write(a2/b2);
//			document.write(a2%b2);

(2)比较运算符

			var num1=32,num2=10;
			document.write('<hr />'+(num1>num2)); //添加括号,设置优先级
			
//			document.write(num1!=num2);

(3)赋值运算符 

			var num_01=5,num_02=4;
//			num_01+=num_02;  
//          num_01=num_01+num_02;
//			alert(num_01+=num_02);
//			alert(num_01-=num_02);
			num_01/=num_02;
//			alert(num_01);
//			alert(num_01*=num_02);
			alert(num_01%=num_02);

5)逻辑运算符: && || ! 

			
			var $num01=3,$num02=4;
//			逻辑运算符 与&& 表示的是前者条件满足同时后者条件也要满足,
//			只要任何一边的条件不成立,返回都为fasle
//			alert(($num01>5 && $num02<5)?true:false);
			
//			逻辑运算符 或|| 表示的是只要满足一边的条件都为true(真),
//			如果两边都为假,结果为假, 两边都为真,结果为真
//			alert(($num01<4 || $num02>8)?true:false);
			
//			逻辑运算符 非! 表示改变原来正确的条件
			alert(!($num01<4)?true:false);		

(4)条件运算符/三目运算或是三元运算符

			var num01=3,num02=4;
//			alert(num01>num02?'0':'1');
//			alert(num01<num02?'成立':'不成立');
//			alert(num01>num02?true:false);

(5)write()和writeln()之间的区别?

document.write() //将内容写入文档，当前编辑位置为写入的内容的后一个字符。
document.writeln() //将内容写入文档，并添加一个换行符，当前编辑位置为写入的内容的后一行的起始位置