一 JavaScript概述
1.1 JavaScript作用
| 技术 | 作用 |
|---|---|
| HTML | 用于页面的搭建 |
| CSS | 用于页面的美化 |
| javaScript | 用于与页面交互 |
1.2 JavaScript历史
- **起源：**话说在上世纪末1995年，Netscape（网景）公司推出Navigator浏览器。人家公司有追求，不单单能实现静态HTML，人家还想要有动态效果，还想着能去处理表单的验证，不要老是等到后台那边才知道表单输入合不合法，特别在那个年代，一次等待就上分钟，现在我们等上个十秒都想关掉它是不是，嘴边还吐槽着什么破网站。
- **动手：**有目标就去做，Netscape公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。
- **竞争：**看到Netscape公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
- 标准： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西
1.3 JavaScript的特点
js是基于对象（直接使用他提供好的内置对象），直接交给浏览器解析运行的脚本语言，弱类型语言var声明变量
| 特点 | Java | javaScript |
|---|---|---|
| 面向对象 | 完全面向对象的语言：继承、封装、多态 | 基于对象的语言，不完全符合面向对象的思想 |
| 运行方式 | 编译型，运行过程需要生成字节码文件 | 解释型语言，不会生成中间文件，解释一定行数，再执行。 |
| 跨平台 | 安装了JVM就可以运行在不同的操作系统中 | 只要有浏览器的地方就可以运行 |
| 大小写 | 区分大小写 | 区分大小写 |
| 数据类型 | 强类型语言，不同的数据类型有严格区分（java11版本消防js var） | 弱类型语言，不同类型的数据可以直接赋值给同一个变量。 |
1.4 JavaScript的语法组成
| 组成部分 | 作用 |
|---|---|
| ECMA Script | 构成了JS核心的语法基础 |
| BOM | Browser Object Model 浏览器对象模型，用来操作浏览器上的对象 |
| DOM | Document Object Model 文档对象模型，用来操作网页中的元素 |
二 JavaScript基础语法
2.1 html与js结合方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_html与js结合方式</title>
<!--type="text/javascript" 告诉浏览器解析此标签的类型为js，可以省略不写-->
<script type="text/javascript">
document.write('<h3>你好，传智播客</h3>');
</script>
<script src="../js/myjs.js">
document.write('<h3>我不会被加载</h3>');
</script>
</head>
<body>
<!--
html与js结合方式有二种
1)内部脚本
使用script标签，在标签体内编写js代码
2）外部引入
使用script标签，需要src属性引入外部js文件
注意：
1)script标签可以在页面的任意位置使用，推荐放在body下方【绝大多数script按照此规则】
2）script标签如果通过src属性引入了外部文件，那么在标签体内的js代码将不会加载
3）script标签可以在页面出现多次，依次被加载
-->
</body>
<script>
document.write('<h3>我是在body下方的输入的内容</h3>');
</script>
</html>
2.2 js变量的定义
java是强类型语言，注重变量的定义，所以在java中定义变量类型的方式如下
// 整型
int i = 1314;
// 浮点型
double d = 521.1314;
// 字符型
char c ='c';
// 字符串型
String str = "用心做教育";
//布尔型
boolean b = true;
js是弱类型语言，不注重变量的定义，所以在js中定义变量的类型方式如下
<script type="text/javascript">
// 整型
var i = 521;
// 浮点型
var d = 521.1314;
// 字符
// 在js中，没有字符型，只有字符串可以使用 单引号和双引号
var c = 'c';
// 字符串
var str = "用心做教育";
// 布尔型
// 在ecmascript 6 之前所有变量声明都是var，可以省略不写 （let const）
b = true;
</script>
2.3 js数据类型
js与java一样，数据类型也分为基本数据类型（原始数据类型）和引用数据类型
a）原始数据类型
number：数值类型（整型和浮点型）
string：字符串型（字符和字符串）
boolean：布尔型
null：空值 例如：var a = null; 引用数据类型的占位符
undefined：未定义 例如 var a;
b）引用数据类型
js与java一样，使用new关键字来创建对象【js基于对象，使用它内置的对象】
// 创建一个上帝对象
var obj = new Object();
// 创建一个日期对象
var date = new Date();
c）typeof操作符
作用：查询变量的 数据类型
格式：typeof(变量) | typeof 变量
<script type="text/javascript">
// 整型
var i = 521;
// 补充知识点，使用浏览器的控制台
//system.out.println() ===== console.log();
console.log("整型：" + typeof i);
// 浮点型
var d = 521.1314;
console.log("浮点型：" + typeof d);
// 字符
var c = 'ccc';
console.log("字符：" + typeof c);
// 字符串
var str = "用心做教育";
console.log("字符串：" + typeof str);
// 布尔型
b = true;
console.log("布尔型:" + typeof(b));
// 空值 是引用数据类型的占位符 ==== object
var n = null;
console.log("空值:" + typeof(n));
// 未定义
var u;
console.log("未定义:" + typeof(u));
// 引用数据类型
// 补充知识点，我们js变量可以重复定义
u = new Date();
// 补充知识点：代码结束以分号结尾，js可以省略不写，建议写上
console.log("引用数据类型:" + typeof(u));
</script>
2.4 js运算符
js与java的运算符一样，什么算数运算符、赋值运算符、逻辑运算符等等，不用把这些运算符都记住，写程序时自然会用就OK。
a）算术运算符 ：+ - * / % ++ --
b）赋值运算符：= += -= *= /=
c）比较运算符：> < == === != !==
d）逻辑运算符：&& || !
e）三目（三元）运算符：条件表达式？为真:为假
下面说几个与java不一样的js运算符：
<script type="text/javascript">
// 算术运算符
// 在js中，数值可以与字符串进行数学运算（底层转换了），+号还是字符串拼接
var a = 10.00; // 整型
var b = '3'; // 字符串
console.log(a + b); // 字符串拼接
console.log(a - b);
console.log(a * b);
console.log(a / b); // 包含小数位
// 比较运算符 == ===
var c = '10.00';
console.log(a == c); // true 判断的是数据的内容（底层转换了）
console.log(a === c); // false 恒等 判断类型和数据完全相同才会返回true
// ！= !==
console.log(a != c);// 判断内容不等 10 = 10
console.log(a !== c);// 先判断类型
</script>
2.5 流程控制语句
在高级语言中有三种结构组成：顺序、分支（选择）、循环
a）if判断
if(条件表达式){
// 执行代码
}else if(条件表达式){
// ...
}else{
// ...
}
<script type="text/javascript">
/*
* 条件表达式
* 数值类型： 非0为真
* 字符串类型 非空串为真
* 变量 null 或 undefined 都为假
* */
// var flag = true;
// var flag = -1;
// var flag = " ";
var flag;
// if判断
if (flag) {
document.write('<h3>为真</h3>');
} else {
document.write('<h3>为假</h3>');
}
</script>
b）循环
// for
for(var i = 0; i <lenght; i ++){
}
// while
while(条件表达式){
}
// do...while
do{
}while(条件表达式);
continue：跳出本次循环
break：跳出整个循环
<script type="text/javascript">
// for循环
for (var i = 0; i < 5; i++) {
// document.write(i);
// /n 空格
document.writeln(i + "<br/>")
}
// 补充一个知识点：var声明的都是全局变量
console.log(i);
// 补充知识点：es6 提供新的变量声明 let
for (let j = 0; j < 5; j++) {
// document.write(i);
// /n 空格
document.writeln(j + "<br/>")
}
// j is not defined
console.log(j);
</script>
2.6 案例：九九乘法表
需求
使用js控制表格输出九九乘法表
<style>
table{
margin: auto;
border-collapse: collapse;
}
td{
padding: 5px;
}
</style>
<script>
document.write("<table border='1'>");
document.write('<caption>九九乘法表</caption>');
for (var i = 1;i < 10;i++){
document.write("<tr>");
for (var j = 1;j <= i;j++){
document.write("<td>"+i+"*"+j+"="+i*j+"</td>")
}
document.write("</tr>")
}
document.write("</table>")
</script>
2.7 在浏览器中调试
2.8 函数使用
前端的主要业务逻辑都会放在函数中编写
a）普通函数
// 格式
function 函数名(参数列表){
// js代码
[return 返回值;]
}
<script type="text/javascript">
// 普通函数 二个数相加的和
function sum(a, b) {
return a + b;
}
// 在js中，没有方法重载的概念，重名的函数，后者会覆盖前者
// 三个数相加的和
/*
* dos 直接调用main给他传递参数
* main([] args){
* 获取当前方法参数列表
* }
* */
function sum(a, b, c) {
// 函数中提供了一个内置对象 arguments，获取参数列表 数组对象
console.log("参数列表对象:" + arguments);
console.log("a:" + arguments[0]);
console.log("b:" + arguments[1]);
console.log("c:" + arguments[2]);
return a + b + c;
}
// NaN not a number 这不是一个数
console.log(sum(5, 10, 15));
</script>
b）匿名函数
// 格式
var fun = function (参数列表){
[return 返回值;]
}
<script type="text/javascript">
// 匿名函数
var fun = function (name) {
// 补充知识点 bom对象 警告框
window.alert("你好：" + name);
}
fun("森森");
</script>
c）变量作用域
<script type="text/javascript">
/*
* 全局变量
* 特点：范围在整个页面
* 局部变量
* 特点：函数执行完毕，变量销毁
* 补充知识点：如果在函数内没有使用var声明变量，那么自动为全局变量
*
* */
var a = 5;
function fun() {
var b = 10;
console.log("我是方法内的局部变量B：" + b);
c = 15;
console.log("我是方法内的未声明变量C：" + c);
}
fun();
// b is not defined
// console.log("我是方法外的局部变量B：" + b);
console.log("我是方法外的未声明变量C：" + c);
</script>
2.9 案例：轮播图
需求
实现每过3秒中切换一张图片的效果，一共5张图片，当显示到最后1张的时候，再次显示第1张
技术分析
<script>
// 注意：在head中编写 js 浏览器的加载顺序 自上而下
/*
* 1)获取img标签 dom对象 元素
* 格式：document.getElementById("")
*
* 2）创建js定时器,执行函数
* 格式：
* window.setInterval('函数名()',间隔时间); 单位毫秒
* setInterval(函数名,间隔时间); 单位毫秒
* */
var img = document.getElementById("img");
var n = 1;
function change() {
img.src="img/"+ n++ +".jpg";
if (n == 5){
n = 0;
}
}
setInterval('change()',1000);
</script>
三 JavaScript事件
3.1 作用
js通过事件来监听用户行为，结合函数完成页面互动效果
3.2 常见事件
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onkeydown | 某个键盘的键被按下nnn |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onsubmit | 提交按钮被点击 |
zz3.3 事件注册方式
简单来说事件如何绑定函数
<body>
<input type="button" value="使用普通函数" onclick="show()"> <br>
<input type="button" value="使用匿名函数" id="myBtn">
</body>
<!--
我就以 单击举例 onclick 结合按钮
// 1）普通函数
// 2）匿名函数
-->
<script type="text/javascript">
function show() {
alert('我是普通函数触发的。。。');
}
// 匿名函数 可以是 html标签与js代码进行分离 ，解耦
// 获取按钮dom对象
document.getElementById('myBtn').onclick = function () {
alert("我是匿名函数触发的")
}
</script>
3.4 案例：简单交互
需求
完成html标签的事件注册，与用户产生交互
四 JavaScript内置对象
4.1 数组对象
<script type="text/javascript">
/*
* 数组对象
* 格式：
* 1） var arr = [元素1，元素2...]; 【推荐】
* 2） var arr = new Array();
* 3） var arr = new Array(长度);
* 4） var arr = new Array(元素1，元素2...);
*
*
* 注意：
* 在js中，数组的长度可以变化
* 在js中，数组元素的类型任意
* */
var arr1 = ['小仓', '波多'];
console.log(arr1);
var arr2 = new Array();
arr2 = ["酒井", "火舞"];
console.log(arr2);
var arr3 = new Array(2);
arr3 = ['小泽', "冲田", 1314];
console.log(arr3);
var arr4 = new Array('貂蝉', '西施', '杨玉环', '王昭君');
console.log(arr4);
/*
* 在js中，数组内置很多方法，你发挥很像java的list集合
* concat() 连接数组
* join(分隔符) 与split功能相反，使用分隔符把数组拼接成一个字符串
* reverse() 反转
* sort() 排序
* 字符串按照字母排序
* 数值需要指定排序类型 降序、升序
* sort(function(a,b){
* return a-b; 升序
* return b-a; 降序
* });
* */
console.log(arr1.concat(arr2));
console.log(arr3.join("-"));
console.log(arr4.reverse());
var arr5 = ['c', "d", "a"];
console.log(arr5.sort());
var arr6 = [9, 3, 1, 7, 11];
console.log(arr6.sort(function (a, b) { return b-a; }));
</script>
4.2 日期对象
<script type="text/javascript">
// 日期对象 获取当前系统时间
let date = new Date();
console.log(date);
// 内置方法
console.log(date.toLocaleString());// 显示系统本地时间
console.log(date.getFullYear());// 年份
console.log(date.getMonth() + 1);// 月份 0-11
console.log(date.getDate());// 获取当前日期
console.log(date.getDay());// 获取今天是周几 0（周日）-6
console.log(date.getTime()); // 获取1970-1-1 至今毫秒值
</script>
4.3 全局对象
不需要new关键字，可以直接使用，类似于java工具类
<script type="text/javascript">
/*
* 字符串转换数值类型
* parseInt(); 字符串转换成整型
* parseFload(); 字符串转换成浮点型
* 补充：从字符第一个开转换，当遇到数值型字符停止转换
* 应用场景 img '300px' '500px'
*
* NaN not a number 这不是一个数
*
* 在js中 isNaN(); 判断字符串如果为非数值类型返回 true 为数值类型 返回false
* 应用场景，在转换之前先判断字符
* */
var a = '5a21.a13a4';
var b = "a500px";
console.log(parseInt(b)); // 521
console.log(parseFloat(b)); // 521.1314
console.log(isNaN(b));
/*
* 编码与解码
* 浏览器发送数据给服务器 -- 中文 编码
* encodeURI(中文)
* 浏览器接收服务器数据 -- 中文 解码
* decodeURI(编码后的中文)
*
* */
var str = "班长暗恋隔壁班班花。。。";
console.log(str);
// 编码
let encodeStr = encodeURI(str);
console.log(encodeStr);
// 解码
console.log(decodeURI(encodeStr));
</script>
复习
- 能够说出五种原始的数据类型
- 能够使用JS中常用的运算符
- 能够使用JS中的流程控制语句
- 能够在JS中定义命名函数和匿名函数
- 能够使用JS中常用的事件
- 能够掌握事件的注册方式
- 能够使用数组及其常用的方法
扫一扫
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
