JS基础
# 今日目标1. js基础语法2. js函数（方法）3. js事件【重点】4. js内置对象
一. JavaScript概述
html : 搭建网页的结构
css :美化网页样式
js : 主要实现页面交互效果
作用：页面交互
JavaScript历史
- 起源：上世纪末1995年时，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态HTML，还想要有动态效果，比如：在前端处理表单验证。
- 动手：有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。（雷锋和雷峰塔）
- 竞争：看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
- 标准： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。
chrome, firefox , opera, Safari, IE
JavaScript特点
Script : 脚本语言
- js源码不需要编译，浏览器可以直接解释运行
- js是弱类型语言，js变量声明不需要指明类型(java强类型)
JavaScript组成
| 组成部分 | 作用 |
|---|---|
| ECMA Script | 构成了JS核心的语法基础(简称es) |
| BOM | Browser Object Model 浏览器对象模型，用来操作浏览器上的对象 |
| DOM | Document Object Model 文档对象模型，用来操作网页中的元素（标签） |
二 JavaScript入门
2.0 初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello js
<hr>
<input type="button" value="按钮" onclick="method01()">
</body>
<script>
function method01(){
var result = confirm("你满18周岁了吗?");
if(result){
location.href = "http://www.baidu.com"
}
}
</script>
</html>
2.1 HTML引入JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello <br>
</body>
<!--
TODO js需要引入到html中才能运行
1. 内部引入
1). 介绍: 在当前html中引入js
2). 语法:
I. 先编写一个script标签
II. 在script标签内写js代码
2. 外部引入
1). 介绍: 在当前html中引入外部的js文件
2). 语法:
I. 先编写一个js文件
II. 用script标签引入
注意:
1. 一个html有多个script标签是可以的,从上至下执行
2. script标签要么编写js代码,要么引入js文件,不可同时设置
3. 在html中,如果标签没有包含内容,可以写成单标签
(script标签例外,不能写成单标签)
-->
<script>
//在网页body中填充内容
document.write("hello js")
</script>
<script src="js/my.js"></script>
</html>
2.2 JS三种输出方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//第一种: 在网页上直接输出 (了解)
document.write("hello js")
//第二种: 控制台打印 (测试)
console.log("hello js2")
//第三种: 弹框 (结合实际业务, 看场景使用)
alert("要下雨了记得收衣服!")
</script>
</html>
2.3 JS变量声明
java是强类型语言，注重变量的定义，所以在java中定义变量类型的方式如下：
// 整型
int i = 1314;
// 浮点型
double d = 521.1314;
// 字符型
char c ='c';
// 字符串型
String str = "用心做教育";
//布尔型
boolean b = true;
// 常量
final Integer PI = 3.14;
js是弱类型语言，不注重变量的定义，所以在js中定义变量的类型方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
/*
* TODO: js是一种弱类型语言
* 1. 弱类型: 有类型,但是不强调 (声明变量时无需体现类型)
* 2. js的变量声明
* 1). es5 : 无论什么类型都用var (variable 变量)
* 2). es6 :
* I. 变量用 let
* II. 常量用const (constant)
* 3). 备注:
* I. var有变量作用域泄露
* II. 最好用es6的变量声明
* 对比: java(强类型)
* int a = 1;
* String b = "abc";
* */
var a = 1;
var b = "abc";
let c = 2;
c = 3;
const d = 4;
</script>
<script>
// var e;
{
var e = 100; // 看似e在这里定义,实际上被提升到全局,变量泄露了
let f = 200;
}
console.log(e); //获取得到
// console.log(f); //获取不到
</script>
</html>
Idea比较老的话,可能let关键字是不支持的,做以下设置即可
2.4 JS数据类型
js与java一样，数据类型也分为基本数据类型（原始数据类型）和引用数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
/*
* 回顾java的类型
* 1. 基本类型 : byte int short long float double char boolean
* 2. 引用类型 : String,数组, Object...
* TODO js的类型
* 1. 原始类型
* 1). number 数字
* 整数 + 小数
* 2). string 字符串
* 单引号,双引号
* 3). boolean 布尔
* true/false
* 4). null 空
*
* 5). undefined 未定义
* I. java中
* int a; // 定义
* a = 1; // 赋值
* II. js中
* let a; //只声明变量不赋值, 未定义
* let a = 1; //声明变量并赋值, 定义
* 2. 复杂类型
* 1). 对象
* (json里讲)
* 2). 函数
* (待会讲)
* 3. 运算符
* 变量类型 = typeof 变量
* */
let a = 1.1;
let type = typeof a; //获取a的变量类型
console.log(type); // number
let b = 'abc';
let type2 = typeof b;
console.log(type2); // string
let c = true;
let type3 = typeof c;
console.log(type3); // boolean
let d = null;
let type4 = typeof d;
console.log(type4); // object (null是打印不出来的,这表示对象是null)
let e; //只声明变量不赋值
let type5 = typeof e;
console.log(type5); // undefined
</script>
<script>
//js对象的定义
let jsObj = {
name : "zs",
age : 18,
married : true
}
console.log(jsObj.name); // zs
</script>
</html>
三 JavaScript基础语法【记住不同点】
3.1 JS运算符
js与java的运算符基本一样，什么算数运算符、赋值运算符、逻辑运算符等等，不需要死记硬背，写程序会用就行：
1. 算数运算符
+ - * / % ++ --
2. 赋值运算符
= += -= *= /= %=
举例 a+=1 -> a= a+1
3. 比较运算符
> < ==(===恒等于) !=(!==不恒等于)
4. 逻辑运算符
&& || !(非)
5. 三元（目）运算符
条件表达式？为真:为假
关注js与java区别的运算符
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-JS运算符</title>
</head>
<body>
<script>
/*
* TODO:
* 1. == 和 ===的区别
* 1). == : 只比较字面值
* 2). === : 不仅比较字面值,还比较类型
* 3). 在js中用的比较多的是==
*
* 2. 三元（目）运算符
条件表达式？为真:为假
* */
let a = 200; // number
let b = "200"; // string
console.log(a == b); // true
console.log(a === b); // false
let c = 1>0? "是" : "不是"
console.log(c); // 是
</script>
<script>
/*
3. 任何类型都可以执行算术运算符
1). 任何类型 + string = string (重要!!!)
2). 任何类型(除string) + number = number (知道)
I. boolean -> true=1,false=0
II. null = 0
III. undefined -> NaN (not a number不是一个数字)
4. 任何类型都可以当条件使用
1. string (知道)
空串为false,非空串为true
2. number
0为false, 非0为true
3. null
false
4. undefined
false
* */
console.log(c); //第二个script可以访问第一个script的内容
let d = 100;
let e;
console.log(d + e);
let f = ""
// if(f.length != 0){
if(f){
console.log("true");
}else{
console.log("false");
}
let g;
if(g){
console.log("true");
}else{
console.log("false");
}
</script>
</body>
</html>
3.2 JS流程控制
高级语言中的三种基本结构：顺序、分支、循环
① 条件判断
1. if判断
if (条件表达式) {
代码块;
} else if(条件表达式) {
代码块;
} else {
代码块;
}
2. switch判断
switch(条件表达式){
case 满足条件1 :
代码块
break;
case 满足条件2 :
代码块
break;
default:
默认代码块;
}
② 循环语句
1. 普通for循环
for(let i= 0; i<10; i++){
需要执行的代码;
}
2. 增强for循环
for(let element of array){
需要执行的代码;
}
3. 索引for循环
for(let index in array){
需要执行的代码;
}
4. while循环
while (条件表达式) {
需要执行的代码;
}
5. do..while循环
do{
需要执行的代码;
}while(条件表达式);
6. break和continue
break: 跳出整个循环
continue：跳出本次循环,继续下次循环
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-循环语句</title>
</head>
<body>
</body>
<script>
/*
* java的数组:
* String[] array = {"a","b","c"};
* js的数组:
* let array = ["a","b","c"];
* */
let array = ["a","b","c"];
//js增强for循环 (for of循环)
for(let element of array){
console.log(element); //a,b,c
}
for (let i = 0; i < array.length; i++) {
// console.log(i + "," + array[i]);
}
//js索引for循环(for in循环)
for(let index in array){
console.log(index); //0,1,2
console.log(array[index]); //a,b,c
}
</script>
<script>
/*
* 扩展 : js的对象可以遍历的
* 1. 属性名 : 索引
* 索引就是目录,通过索引可以定位元素
* 2. 属性值 : 元素
* */
let jsObj = {
name : "zs",
age : 18,
married :true
}
// console.log(jsObj.name); // zs
for (let index in jsObj){
console.log(index + "," + jsObj[index]); // name,zs
}
</script>
</html>
案例: 乘法表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 不包裹内容的表格边框折叠起来 */
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- <table border="1px" cellspacing="0px" cellpadding="5px">
<tr>
<td></td>
</tr>
</table>-->
</body>
<script>
document.write("<table border=\"1px\" cellspacing='0px' cellpadding='5px'>")
//循环的是行
for (let i = 1; i <= 9; i++) {
document.write("<tr>")
//循环的列
for (let j = 1; j <= i; j++) {
document.write("<td>")
let str = j + "X" + i + "=" + (i*j) // 1 X 1 = 1
document.write(str)
document.write("</td>")
}
document.write("</tr>")
}
document.write("</table>")
</script>
</html>
四 JS函数【方法】
功能：js函数用于执行特定功能的代码块，为了方便理解也可以称为js方法
4.1 普通函数【重点】
语法
function 函数名(参数列表){
函数体;
[return 返回值;] // 中括号意思表示内容可以省略....
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-普通函数</title>
</head>
<body>
</body>
<script>
/*
* TODO js函数 (就是方法)
* 1. java方法的定义
* public static void main(String[] args){
*
* }
* 修饰符 返回值 方法名(参数列表){
* //方法体
* }
* 2. js函数的定义
* function 函数名(参数列表){
* //函数体
* }
*
* 3. js函数的特点
* 1). 参数列表只需要写变量名即可,强制不需要声明关键字
* 2). 如果有返回值,直接return
* 3). 函数内有一个默认的变量arguments,
* 它是一个数组,接收了函数调用时,传入的所有参数 (了解)
* */
//函数定义
function method01(){
console.log("hello");
}
//函数调用
method01()
function method02(a,b){
console.log(a + b);
}
method02(1,2)
function method03(a,b){
return a + b;
}
let result = method03(1,3)
console.log(result);
function method04(){
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
return sum;
}
let result2 = method04(1,2,3,4,5,6,7,8)
console.log(result2);
</script>
</html>
4.2 匿名函数
通常与事件结合使用，咱们现在先来看一下语法。。。。
function (参数列表){
函数体;
[return 返回值;] // 中括号意思表示内容可以省略....
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-匿名函数</title>
</head>
<body>
</body>
<script>
/*
* js的函数分为两种
* 0. js的函数是变量的一种类型
* 1. 命名函数
* function 函数名(参数列表){
* 函数体
* }
* 2. 匿名函数
* let 变量 = function (参数列表){
* 函数体
* }
*
* */
function method01(a,b) {
console.log(a + b);
}
method01(1,2)
let gds = function (a,b) {
console.log(a + b);
}
gds(2,3)
</script>
<script>
/* let name = "zs";
let age = 18;
let speak = function () {
console.log("说话");
}*/
let p = {
name : "zs",
age : 18,
speak : function () {
console.log(this.name + "说话");
},
show(){
console.log(this.name + "在表演");
}
}
p.speak()
p.show()
</script>
</html>
五. JS事件【重点】
事件(event)：JS可以监听用户的行为,并调用函数来完成用户交互功能.
js : 事件驱动型语言
网页中一切可以被检测到的行为 -> 事件
事件是客观存在的,不需要人为定义 事件被触发之后,所要执行的行为可以自定义
5.1 常用事件
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件 (double: 时间间隔很短两次单击)
2. 焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：页面加载完成后立即发生。
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 改变事件
1. onchange 域的内容被改变。
7. 表单事件：
1. onsubmit 提交按钮被点击。
5.2 事件绑定
将事件与html标签进行绑定，实现交互功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-事件绑定</title>
</head>
<body>
<!--
1. input标签,如果type=button,就是一个按钮
2. 事件是客观存在的,不需要人为定义
按钮: 可以单击,也可以双击
TODO: 对按钮的事件进行注册 (事件注册)
1). 首先确定事件
单击 : click
2). 给事件注册一个函数
onclick="method01()"
3). 效果: 事件触发,函数就会运行
TODO: 语法
1. 普通函数绑定
1). 找到目标元素,在目标元素上填写属性
onclick = "method01()"
on事件名 = "函数调用"
2). 定义执行函数
2. 匿名函数绑定
1). 找到目标元素,给一个标识
id="btn"
2). js通过标识找到元素对象
var btn = document.getElementById("btn");
3). 元素对象.on事件名 = 匿名函数
btn.onclick = function (){
console.log("hello2");
}
普通函数绑定耦合比较严重,用的少,匿名函数绑定比较解耦,用的多
-->
<input type="button" value="普通函数" onclick="method01()"> <br> <br>
<input type="button" value="匿名函数" id="btn"> <br>
</body>
<script>
function method01(){
console.log("hello");
}
</script>
<script>
//dom : 通过id找到元素
var btn = document.getElementById("btn");
btn.onclick = function (){
console.log("hello2");
}
</script>
</html>
六 JS常用内置对象【知道】
内置对象: js提供好的对象, 开发者直接可以创建对象,并使用
6.1 String 对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10-字符串</title>
</head>
<body>
</body>
<script>
/*
1. 构造字符串可以使用
a. 双引号
b. 单引号
c. 反引号(重音符) 键盘左上角 esc下面 (es6模板字符串)
${变量} -> 变量引用
更容易实现字符串拼接
2. 字符串常用方法
substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符。 包头不包尾
substr(startIndex,count) 从startIndex索引开始,截取count长度的字符串
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
split() 把字符串分割为字符串数组。
trim() 去掉首尾空格
* */
let a = "abc"
let b = 'abc'
let c = `abc`
let money = 90;
let str = "这件衣服卖" + money + "元"
let str2 = `这件衣服卖${money}元`
console.log(str);
console.log(str2);
</script>
<script>
let str3 = "abcdef";
let s = str3.substr(2,3); // 从2索引开始,截取3个长度字符串
console.log(s);//cde
let s2 = str3.substring(2,3);//从2索引开始,截取到3索引 (包头不包尾)
console.log(s2); // c
let s3 = str3.toUpperCase();
console.log(s3); // ABCDEF
</script>
</html>
6.2 Array 对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>11-数组</title>
</head>
<body>
<script>
/*
* 数组创建
* 1. let array = new Array('a','b','c')
*
* 2. let array = ['a','b','c'] // 推荐, 中括号
*
* a. 数组中的元素可以不是同一种类型
* b. 数组可以动态扩容
* */
// let array = new Array('a','b','c')
let array2 = ['a','b','c',100]
console.log("长度:" + array2.length); //4
array2[5] = true
console.log("长度2:" + array2.length); // 6
for(let element of array2){
console.log(element); // a,b,c,100,undefined,true
}
</script>
</body>
</html>
6.3 Date 对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>12-日期</title>
</head>
<body>
<!--
日期 Date
1. 创建对象
let date = new Date(); 获取当前时间时间
2. 常用方法
toLocaleString() 转换为本地日期格式的字符串
getFullYear() 获取日期中的year
getMonth() 获取日期中的month
getDate() 获取日期中的 号
getTime() 获取时间毫秒值(时间原点: 1970年1月1号0时分秒)
-->
<script>
let date = new Date();
//Sun May 24 2020 14:38:34 GMT+0800 (中国标准时间:东八区)
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.getTime()); // 1970年~今毫秒值
</script>
</body>
</html>
6.4 Math 对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>13-数学</title>
</head>
<body>
<body>
<!--
数学运算
1. 四舍五入 round()
2. 向下取整 floor() 地板
3. 向上取整 ceil() 天花板
4. 产生随机数 random() ：返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1
-->
<script >
let n = 1234.567
//1. 四舍五入取整
var number = Math.round(n);
console.log(number);
//2. 向下取整
var number4 = Math.floor(n);
console.log(number4);
//3. 向上取整
var number3 = Math.ceil(n);
console.log(number3);
//4. 产生随机数
for(let i=0; i<10; i++){
var number2 = Math.random();
console.log(number2);
}
</script>
</body>
</html>
6.5 全局函数
我们不需要通过任何对象，可以直接调用的就称为全局函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>14-全局函数</title>
</head>
<body>
<!--
全局函数
我们不需要通过任何对象，可以直接调用的就称为全局函数(定义在浏览器中)
1. 字符串转为数字
1). parseInt
从左至右开始解析,解析到字符串为止,返回整数
2). parseFloat
从左至右开始解析,解析到字符串为止,返回小数
2. 对字符串编码和解码
0). url编码 (网络传输数据支持url编码)
https://www.baidu.com/s?wd=%E9%AB%98%E5%9C%86%E5%9C%86
编码的目的: 方便数据存储或传输 (看得懂 -> 看不懂)
高圆圆 -> %E9%AB%98%E5%9C%86%E5%9C%86
a -> 01100001
解码 : 方便人查看 (看不懂 -> 看得懂)
%E9%AB%98%E5%9C%86%E5%9C%86 -> 高圆圆
1). encodeURI : 编码
2). decodeURI : 解码
写的时候编码,读的解码
-->
<script >
let fontSize = "100.1px"
// let i = parseInt(fontSize)
let i = parseFloat(fontSize)
console.log(i * 2); // 200, 200.2
let name = "高圆圆"
let s = encodeURI(name); //编码
console.log(s);
var s1 = decodeURI(s); // %E9%AB%98%E5%9C%86%E5%9C%86
console.log(s1); // 高圆圆
</script>
</body>
</html>
补充
1. 浏览器的开发者模式
# 进入浏览器的开发者模式
1. google浏览器为例
1). 第一种: F12
2). 第二种: 右单击 -> 检查
若有收获，就点个赞吧
0 人点赞
