目 录
课时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:浏览器对象模型,操作浏览器。
解释型语言:不用编译,直接运行。
2、编程语言排行榜
3、JS使用案例
任务1:JS基础_JS简介-下载资料
PPT:PDF转换器!!!
链接:https://pan.baidu.com/s/15e8Ebq1P3D1ZsfSOsj4rSw 提取码:abtf
课时2:JS基础_JS的HelloWorld
输出语句(1)控制浏览器弹出警告框
输出语句(2)让计算机在页面中输出内容
document:文档。一个网页就是一个文档。
document.write(""); ==》向文档中写东西。向body中输出(写)内容。
输出语句(3)向控制台输出内容
JS代码,从上到下,一行行地执行!
console.log("");
课时3:JS基础_js编写位置
1、写在标签属性中
js代码,虽然可以写在标签的属性中,但是它们属于结构与行为耦合,不方便维护,不推荐使用。
1.1、οnclick="alert('点击事件。');"
1.2、超链接的href属性
<a href="javascript:alert('啦啦啦~');">跳转</a>
2、写在js标签中
3、写在外部文件中
<!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、单行注释、多行注释
2、JS严格区分大小写;js语句以分号结尾;js会自动忽略空格
alert ,必须 是 小写 !!!
课时5:JS基础_字面量和变量
课时6:JS基础_标识符
/*
* 标识符
* - 在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、转义字符
<!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
<!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基础_布尔值
课时10:JS基础_Null和Undefined
附:修改网页播放器速率
JS的简单小应用——修改播放器速率
document.querySelector('video').playbackRate=3
//此方法适用于h5播放器,且当前页面只有一个播放窗口
按 “ F12 ” !!!