JavaScript概述

  1. 简称js
  2. 一种脚本语言，脚本语言的特点
    java语言是一种脚本语言
    JavaScript的目标程序是以普通文本的形式保存，用记事本可以直接打开的
  3. JavaScript和JScript的关系
  4. JavaScript主要用来操作HTML中的节点，产生动态效果
  5. JavaScript和Java的区别
    JavaScript运行在浏览器中，浏览器中有JS代码的内核
    Java运行在JVM中，JavaScript和JAVA没有任何关系
    Java语言是SUN公司开发的，JavaScript这个名字是SUN公司给起的名
    JavaScript是一门编程语言，专门用来操作HTML页面中的节点，让王爷产生动态效果的，JavaScript中也有变量，数据类型等

JavaScript 包括三块：ECMAScript、DOM、BOM

  1. ECMAScript是ECMA制定的262标准，JavaScript和Jscript都遵守这个标准，ECMAScript是JavaScript核心语法
  2. DOM编程时通过JavaScript对HTML中的dom节点进行操作，DOM时有规范的，DOM规范时W3C制定的。
  3. BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器由不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。（Brower Object Model，浏览器对象类型）

JavaScript 嵌入JS三种方式以及JS的注释

3.1 行间事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中嵌入JS代码的第一种方式：行间事件</title>
	</head>
	<body>
		<!--
			1、需求：用户点击以下这个按钮，弹出一个对话框，对话框上显示：hello world
			2、JavaScript是一种事件驱动型的编程语言，通常都是在发生某个事件的时候，去执行
			某段代码。其中事件包括很多，例如：鼠标单击事件click，另外还有其它事件，例如：
			mouseover是鼠标经过事件等。并且在JavaScript当中任何一个事件都有对应的事件句柄。
			例如：click对应的事件句柄是onclick，mouseover对应的事件句柄是onmouseover。
			3、所有的事件句柄都是以标签的属性形式存在。例如以下input button就有一个onclick这样属性。
			只要有用户点击了以下的这个按钮对象，此时按钮对象上发生了鼠标单击事件，那么注册在
			onclick事件句柄当中的JS代码会被执行！onclick后面代码实际上是浏览器负责执行的。
			4、onclick="后面的代码"并不是在浏览器打开的时候执行，浏览器打开的时候，只是将这个代码
			注册给onclick事件句柄了。等待该按钮的click事件发生，只要发生，后面代码会被事件监听器
			调用。
			5、怎么使用JS代码弹窗？
				在JS当中有一个内置的BOM对象，可以直接拿来使用，全部小写：window
				其中window对象有一个方法/函数叫做alert，这个函数专门用来弹出对话框！
			
			6、window.alert('hello world!'); 弹窗的JS代码。
				通过这个代码可以知道：JS中的字符串可以使用单引号括起来，也可以使用双引号。
				JS中的一条语句可以“;”结尾，也可以不以“;”结尾。
		-->
		<input type="button" value="hello1" onclick="window.alert('hello world!');"/>
		<input type="button" value="hello2" onclick='window.alert("hello world!")
													 window.alert("hello kitty")
													 window.alert("你好,中国!")'/>

		<!-- window. 可以省略 -->
		<input type="button" value="hello3" onclick="alert('hello world!');"/>
	</body>
</html>

出了点问题：在用sublime text编辑时，好像格式有要求，他会有引号不匹配，但换成HBuilder又行了，不懂怎么回事。

3.2 脚本块方式

<!-- 脚本块的位置随意，没有限制！ -->
<script type="text/javascript">
	alert("page begin")
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中嵌入JS代码的第二种方式：脚本块的方式</title>
	</head>
	<body>
		
		<!-- 这个按钮会先被加载到浏览器内存。 -->
		<input type="button" value="按钮1" />
		
		<!-- 脚本块 -->
		<!-- 一个页面中脚本块可以出现多个！ -->
		<script type="text/javascript">
			/* 在这里直接编写JS代码，这些JS代码在页面打开的时候自上而下的顺序依次逐行执行！ */
			//alert("hello world"); // 单行注释
			alert("hello zhangsan");
			alert("hello lisi");
			
			/*
				多行注释
			*/
		</script>
		
		<!-- 最后加载这个按钮2 -->
		<input type="button" value="按钮2" />
		
	</body>
</html>

<script type="text/javascript">
	alert("page end!")
</script>

3.3 引入外部独立的JS文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中嵌入JS的第三种方式：引入外部独立的JS文件</title>
		
		<!-- 引入外部独立的CSS文件。这个标签link中属性是href -->
		<link rel="stylesheet" type="text/css" href=""/>
	</head>
	<body>
		
		<!-- 引入外部独立的js文件 -->
		<!-- script标签引入js文件的时候，是src属性，不是href。 -->
		<script type="text/javascript" src="js/1.js"></script>
		
		<!-- 引入第二次，这个操作没有意义，测试结果：只要引入一次JS文件，JS文件中的代码就会全部执行一遍 -->
		<script type="text/javascript" src="js/1.js"></script>
		
		<script type="text/javascript" src="js/1.js">
			//alert("hello world!~~~~~"); // 这里的代码不会执行！
		</script>
		
		<!-- 单独的脚本块 -->
		<script type="text/javascript">
			alert("hello world!%%%%%%%%");
		</script>
		
	</body>
</html>

文件代码

/* 这是一堆JS代码，这些JS代码在HTML引入的时候，遵循自上而下的顺序依次逐行执行的！ */
alert("hello world")
alert("hello kitty")

关于各种注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于各种注释</title>
		
		<style type="text/css">
			/* CSS的注释 */
		</style>
		
	</head>
	<body>
		<!-- 这是HTML的注释 -->
		<script type="text/javascript">
			/* 这是javascript注释，多行 */
			// 这是javascript注释,单行
		</script>
	</body>
</html>

标识符和关键字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标识符和关键字</title>
	</head>
	<body>
		<script type="text/javascript">
			
			/* 标识符命名规则和命名规范按照java那一套来就行！ */
			/*
				以下这段代码是JS的for循环，找出其中的关键字和标识符？
					关键字：var、for
					标识符：i、alert
				
				标识符命名规则：
					标识符只能由数字、字母、下划线、美元符号组成，不能含有其它特殊符号
					标识符不能以数字开始
					标识符严格区分大小写
					关键字不能做标识符
					标识符理论上没有长度限制
				
				标识符命名规范？
					.....
			*/
			for(var i = 0; i < 10; i++){
				alert("i = " + i)
			}
			
		</script>
	</body>
</html>


变量


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的变量</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				回顾Java中的变量？
					怎么声明？
						int i;
						double d;
						String s;
					怎么赋值？
						i = 100;
						d = 3.14;
						s = "abc";
					一行上能声明多个变量吗？
						int a, b, c = 300;
						a b c都是int类型。
						a和b没有赋值。
						c赋值300
					
					重点：Java语言是一种强类型语言，有编译阶段，属于编译型语言。
						Java语言在编译阶段确定变量的数据类型，也就是说程序还没有
						运行呢，变量的数据类型就已经确定了，并且该变量的数据类型
						在这一生中，永远不可变。
							int x = 1200;【x = true; java的编译器会报错。不让这样做。语法不对！】
							double d = x; 
							这行代码表示x的变量中保存的值1200给d变量
							x变量还是int类型，d变量是double类型。一生不变。
					
				JS的变量？
					怎么声明？
						var 变量名;
						var i;
					怎么赋值？
						变量名 = 值;
						i = 100;
					一行上能声明多个变量吗？
						var a, b, c = 300;
						声明3个变量，a b c，并且c赋值300，其中a和b变量没有赋值，系统默认赋值undefined
						undefined 在JS中一个具体的值，这个值就是 undefined
					
					重点：JS语言是一种弱类型语言，没有编译阶段，直接浏览器打开解释执行，
					在JS中声明变量时不需要指定变量的数据类型，程序在运行过程当中，赋什么
					类型的值，变量就是什么数据类型，并且变量的数据类型是可变的。
						var i;
						i = 100; 到这里i是整数型
						i = false; 到这里i就是布尔类型了
						i = true;
						i = 3.14;
						i = new Object();
			*/
		   var i;
		   alert(i) // 变量只声明没有赋值,系统默认赋值undefined, 在JS当中undefined是一个具体存在的值.
		   
		   var x = "undefined";
		   alert(x) // "undefined"这个不是undefined,它是一个字符串.
		   
		   // 声明时,同时赋值
		   var k = 100;
		   alert(k + 1) // 101
		   
		   k = false;
		   alert(k);
		   
		   k = "abc";
		   alert(k)
		   
		   // 一行上可以声明多个变量
		   //var是一个关键字,就是用来声明变量的,variables单词的前3个字母.
		   var a, b, c = 100;
		   alert(a) // undefined
		   alert(b) // undefined
		   alert(c) // 100
		   
		</script>
	</body>
</html>

函数


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数初步</title>
	</head>
	<body>
		<script type="text/javascript">
			
			//alert(122222);
			
			/*
				回顾Java中的方法：
					[修饰符列表] 返回值类型 方法名(形式参数列表){
						方法体;
					}
					例如：
						public static int sum(int a,int b){
							return a + b;
						}
						
				JavaScript当中的函数：
					函数定义的语法格式是什么？
						function 函数名(形式参数列表){
							函数体;
						}
						例如：
							function sum(a, b){
								return a + b;
							}
						
							函数名：sum
							形式参数列表是：a和b  (a和b都是变量名！)
							
					JS中的函数返回值类型是不需要指定的，因为可以返回任何类型的数据。没有限制。
				
				关于JS的的调试？
					首选方案是：alert()，在程序的某个位置先使用alert弹出某个变量的值，看看是否是你需要的。
					通过alert可以调试JS代码。
					
					另外一种方案是：采用浏览器自带的调试插件，F12
						F12这个插件中比较重要的面板：
							控制台
							查看器
							网络
							掌握以上三个面板！！！！！！！！！！！！
			*/
		   /* function sum(a, b){
			   
		   } */
		   
		   // 函数必须调用才会执行.
		   function sum(x, y){
			   alert(x + "," + y);
			   //alert("sum函数执行了！");
		   }
		   
		   //这一切都是因为js是一门弱类型语言!
		   sum("abc", false);
		   
		   // 调用sum函数
		   sum();
		   
		   // 调用sum函数
		   sum(1);
		   
		   // 调用sum函数
		   sum(1,2);
		   
		   // 调用sum函数
		   sum(1,2,3);
		   
		   /* JS的函数还有另一种声明方式？*/
		   /* function mysum(a, b){
			   
		   } */
		   
		   //效果相同
		   mysum = function(a, b){
			   return a + b; //返回计算结果!
		   }
		   
		   // 调用函数
		   var result = mysum(10, 20);
		   alert(result)
		   
		   //定义一个函数
		   function sayHello(username){
			   alert("欢迎" + username + "光临！")
		   }
		   
		</script>
		
		<!-- 在事件句柄当中调用sayHello函数 -->
		<input type="button" value="hello" onclick="sayHello('李四')" />
	</body>
</html>