目   录

课时1:JS基础_JS简介

1、PPT课件

2、编程语言排行榜

3、JS使用案例

任务1:JS基础_JS简介-下载资料

课时2:JS基础_JS的HelloWorld

输出语句(1)控制浏览器弹出警告框

输出语句(2)让计算机在页面中输出内容

输出语句(3)向控制台输出内容

课时3:JS基础_js编写位置

1、写在标签属性中

1.1、οnclick="alert('点击事件。');"

1.2、超链接的href属性

2、写在js标签中

3、写在外部文件中

课时4:JS基础_基本语法

1、单行注释、多行注释

2、JS严格区分大小写;js语句以分号结尾;js会自动忽略空格

课时5:JS基础_字面量和变量

课时6:JS基础_标识符

课时7:JS基础_字符串

1、六种基本数据类型

2、转义字符

课时8:JS基础_Number

课时9:JS基础_布尔值

课时10:JS基础_Null和Undefined

附:修改网页播放器速率


课时1:JS基础_JS简介

1、PPT课件

JavaScript 脚本语言。

IE(explore)

DOM:文档对象模型,操作网页。

BOM:浏览器对象模型,操作浏览器。

解释型语言:不用编译,直接运行。

javascript第八版pdf javascript教程.pdf下载_编程语言

javascript第八版pdf javascript教程.pdf下载_html5_02

javascript第八版pdf javascript教程.pdf下载_javascript第三版pdf下载_03

2、编程语言排行榜

javascript第八版pdf javascript教程.pdf下载_js_04


3、JS使用案例

javascript第八版pdf javascript教程.pdf下载_js_05

javascript第八版pdf javascript教程.pdf下载_javascript第三版pdf下载_06

javascript第八版pdf javascript教程.pdf下载_html5_07

任务1:JS基础_JS简介-下载资料

javascript第八版pdf javascript教程.pdf下载_html5_08

PPT:PDF转换器!!!

链接:https://pan.baidu.com/s/15e8Ebq1P3D1ZsfSOsj4rSw 提取码:abtf

课时2:JS基础_JS的HelloWorld

输出语句(1)控制浏览器弹出警告框

javascript第八版pdf javascript教程.pdf下载_js_09


javascript第八版pdf javascript教程.pdf下载_html5_10

输出语句(2)让计算机在页面中输出内容

document:文档。一个网页就是一个文档。

document.write("");   ==》向文档中写东西。向body中输出(写)内容。

javascript第八版pdf javascript教程.pdf下载_html5_11

输出语句(3)向控制台输出内容

JS代码,从上到下,一行行地执行!


console.log(""); 

课时3:JS基础_js编写位置

1、写在标签属性中

js代码,虽然可以写在标签的属性中,但是它们属于结构与行为耦合,不方便维护,不推荐使用。

1.1、οnclick="alert('点击事件。');"

javascript第八版pdf javascript教程.pdf下载_编程语言_12


javascript第八版pdf javascript教程.pdf下载_html5_13

1.2、超链接的href属性

<a href="javascript:alert('啦啦啦~');">跳转</a>

javascript第八版pdf javascript教程.pdf下载_javascript_14

javascript第八版pdf javascript教程.pdf下载_javascript_15

2、写在js标签中


javascript第八版pdf javascript教程.pdf下载_编程语言_16

javascript第八版pdf javascript教程.pdf下载_html5_17

3、写在外部文件中

javascript第八版pdf javascript教程.pdf下载_javascript_18

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--
			可以将js代码编写到外部js文件中,然后通过script标签引入
			写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制
			推荐使用的方式
		-->
		<!--
			script标签一旦用于引入外部文件了,就不能在编写代码了,即使编写了浏览器也会忽略
			如果需要则可以再创建一个新的script标签用于编写内部代码
		-->
		<script type="text/javascript" src="js/script.js"></script>
		<script type="text/javascript">
			alert("我是内部的JS代码");
		</script>
		
		<!--
			可以将js代码编写到script标签	
		<script type="text/javascript">
			
			alert("我是script标签中的代码!!");
			
		</script>
		-->
	</head>
	<body>
		
		<!--
			可以将js代码编写到标签的onclick属性中
			当我们点击按钮时,js代码才会执行
			
			虽然可以写在标签的属性中,但是它们属于结构与行为耦合,不方便维护,不推荐使用。
		-->
		<button onclick="alert('讨厌,你点我干嘛~~');">点我一下</button>
		
		<!--
			可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码。
		-->
		<a href="javascript:alert('让你点你就点!!');">你也点我一下</a>
		<a href="javascript:;">你也点我一下</a>
		
	</body>
</html>

课时4:JS基础_基本语法

1、单行注释、多行注释

javascript第八版pdf javascript教程.pdf下载_html5_19

2、JS严格区分大小写;js语句以分号结尾;js会自动忽略空格

javascript第八版pdf javascript教程.pdf下载_javascript_20

alert ,必须 是 小写 !!! 

javascript第八版pdf javascript教程.pdf下载_html5_21

课时5:JS基础_字面量和变量

javascript第八版pdf javascript教程.pdf下载_javascript第三版pdf下载_22

javascript第八版pdf javascript教程.pdf下载_javascript_23

课时6:JS基础_标识符

javascript第八版pdf javascript教程.pdf下载_javascript_24

/*
* 标识符
*     - 在JS中所有的可以由我们自主命名的都可以称为是标识符
*     - 例如:变量名、函数名、属性名都属于标识符
*     - 命名一个标识符时需要遵守如下的规则:
*         1.标识符中可以含有字母、数字、_、$
*         2.标识符不能以数字开头
*         3.标识符不能是ES中的关键字或保留字
*         4.标识符一般都采用驼峰命名法
*             - 首字母小写,每个单词的开头字母大写,其余字母小写
*             helloWorld xxxYyyZzz

*     - JS底层保存标识符时,实际上是采用的Unicode编码,
*         所以理论上讲,所有的utf-8中含有的内容都可以作为标识符
*/ 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			 var a = 1;
			/*
				var if = 123;
				console.log(if);
			*/
						
			//千万不要这么用
			var 锄禾日当午 = 789;
			console.log(锄禾日当午);
		</script>
	</head>
	<body>
	</body>
</html>

课时7:JS基础_字符串

1、六种基本数据类型

/*
* 数据类型指的就是字面量的类型
*  在JS中一共有六种数据类型
*         1、String 字符串
*         2、Number 数值
*         3、Boolean 布尔值
*         4、Null 空值
*         5、Undefined 未定义
*         6、Object 对象
* 其中String Number Boolean Null Undefined属于基本数据类型
* 而Object属于引用数据类型
*/

/*
* String字符串
*     - 在JS中字符串需要使用引号引起来
*     - 使用双引号或单引号都可以,但是不要混着用
*     - 引号不能嵌套,双引号不能放双引号,单引号不能放单引号
*/

2、转义字符

javascript第八版pdf javascript教程.pdf下载_javascript_25

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			var str = 'hello';
			
			str = '我说:"今天天气真不错!"';
			

			str = "我说:\"今天\t天气真不错!\"";
			 
			str = "\\\\\\";
			console.log("1111")
			//输出字面量 字符串str
			//alert("str");
			 
			//输出变量str
			alert(str); 
			
			var str2 = "hello";
			
			str2 = "你好";
			
			str2 = 3;

			//alert("hello,你好");
			
			//console.log("我就是不出来~~~");
			document.write("<");
		</script>
	</head>
	<body>
	</body>
</html>

课时8:JS基础_Number

/*
 * 在JS中所有的数值都是Number类型,
 *     包括整数和浮点数(小数)
 * 
 * JS中可以表示的数字的最大值
 *     Number.MAX_VALUE
 *         1.7976931348623157e+308
 * 
 *     Number.MIN_VALUE 大于0的最小值
 *         5e-324
 * 
 *  如果使用Number表示的数字超过了最大值,则会返回一个
 *         Infinity 表示正无穷
 *         -Infinity 表示负无穷
 *         使用typeof检查Infinity也会返回number
 *  NaN 是一个特殊的数字,表示Not A Number
 *         使用typeof检查一个NaN也会返回number
 */

/*
    可以使用一个运算符 typeof
        来检查一个变量的类型
    语法:typeof 变量    
    检查字符串时,会返回string
    检查数值时,会返回number
 * */
 

/*
 * 在JS中整数的运算基本可以保证精确
 */

/*
 * 如果使用JS进行浮点运算,可能得到一个不精确的结果
 *     所以千万不要使用JS进行对精确度要求比较高的运算    
 */
//运算最终要转为二进制运算,二进制无法表示1/10

javascript第八版pdf javascript教程.pdf下载_javascript_26

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 在JS中所有的数值都是Number类型,
			 * 	包括整数和浮点数(小数)
			 * 
			 * JS中可以表示的数字的最大值
			 * 	Number.MAX_VALUE
			 * 		1.7976931348623157e+308
			 * 
			 * 	Number.MIN_VALUE 大于0的最小值
			 * 		5e-324
			 * 
			 *  如果使用Number表示的数字超过了最大值,则会返回一个
			 * 		Infinity 表示正无穷
			 * 		-Infinity 表示负无穷
			 * 		使用typeof检查Infinity也会返回number
			 *  NaN 是一个特殊的数字,表示Not A Number
			 * 		使用typeof检查一个NaN也会返回number
			 */

			/* 	可以使用一个运算符 typeof 来检查一个变量的类型
			 	语法:typeof 变量	
			 	检查字符串时,会返回string
			 	检查数值时,会返回number   */
			var a = 123; //数字123
			var b = "123"; //字符串123
			console.log(typeof b);

			a = -Number.MAX_VALUE * Number.MAX_VALUE;
			console.log(a);
			a = Infinity; //字面量
			console.log(a);
			console.log(typeof a);

			a = "abc" * "bcd";
			console.log(a)
			console.log("* : " + typeof a);
			a = NaN;
			console.log(typeof a);

			a = Number.MIN_VALUE;
			console.log("Number.MIN_VALUE : " + a);
			/*
			 * 在JS中整数的运算基本可以保证精确
			 */
			var c = 1865789 + 7654321;
			/*
			 * 如果使用JS进行浮点运算,可能得到一个不精确的结果
			 * 	所以千万不要使用JS进行对精确度要求比较高的运算	
			 */
			var c = 0.1 + 0.2;
			//运算最终要转为二进制运算,二进制无法表示1/10
			console.log("0.1 + 0.2  : " + c);
		</script>
	</head>
	<body>
	</body>
</html>

课时9:JS基础_布尔值

javascript第八版pdf javascript教程.pdf下载_javascript第三版pdf下载_27

课时10:JS基础_Null和Undefined

javascript第八版pdf javascript教程.pdf下载_javascript第三版pdf下载_28

附:修改网页播放器速率

JS的简单小应用——修改播放器速率


document.querySelector('video').playbackRate=3
//此方法适用于h5播放器,且当前页面只有一个播放窗口

按 “ F12 ” !!!

 

javascript第八版pdf javascript教程.pdf下载_javascript_29