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="zh-CN">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<input type="button" value="按钮" onclick="method01()">
</body>
<script>
//js主要实现交互效果
function method01() {
var result = confirm("你满18岁了吗?")
if(result){
location.href = "http://www.baidu.com"
}
}
</script>
</html>
2.1 HTML引入JS
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<!--
html中引入js的两种方式
1. 内部引入
1). 在当前html中编写js代码
2). 步骤
在script标签内编写js
script标签推荐放在body标签之后
2. 外部引入
1). 在当前html中引入外部的js代码
2). 步骤
编写一个js文件
然后用script标签的src属性声明js文件位置
注意:
1. html中可以引入多个script标签,从上至下执行
2. script标签要么编写代码,要么引入js文件,不可两者同时
-->
<script>
// 在网页上输出
document.write("hello js")
</script>
<script src="js/my.js"></script>
</html>
2.2 JS三种输出方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//网页上输出
document.write("呵呵<br>")
document.write("呵呵")
//控制台输出
console.log("控制台输出")
// 弹框输出
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="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
/*
# js是弱类型语言: 在声明变量时,无需强调变量的类型
* 1. es5中,所有的js变量声明都用var
* (variable : 变量)
*
* 2. es6中,
* js变量用let (允许改变)
* js常量用const (恒定不变的 constant)
*
* 补充:
* 在2018.2 idea中,默认支持es5,es6的语法不识别,会报错
* 第一种解决方案: 不用管
* 第二种解决方案:
* setting -> language -> javascript -> es6
*
* 问题: es6为什么用let/const替代es5的var呢?
* var 有个问题: 变量提升
* */
var a = 100;
var b = "abc"
let c = 200
c = 300
const d = 400
</script>
<script>
{
var e = 100
}
console.log(e);
</script>
</html>
2.4 JS数据类型
js与java一样,数据类型也分为基本数据类型(原始数据类型)和引用数据类型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
/*
* java数据类型
* 1. 基本类型
* byte int short long float double boolean char
* 2. 引用类型
*
* js数据类型
* 1. 原始类型
* 1). number 数字
* 整数,小数
* 2). string 字符串
* 单引, 双引
* 3). boolean
*
* 4). null 空
*
* 5). undefined 未定义
* java中:
* int a; //变量定义(声明)
* a = 1; //变量赋值
* js中:
* let a; // 未定义(声明)
* let b = 2; //定义 (声明+赋值)
*
* 2. 非原始类型: 对象,函数...
*
* 验证:
* let 该变量的类型 = typeof 变量名
*
* */
let a
let type = typeof a
console.log(a + "-->" + type);
</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>
/*
算数运算符
1. ==(===恒等于)
== 常用, === 不常用
*/
let a = 100 // number
let b = "100" // string
console.log(a == b); // true : 只比较字面值,不比较类型
console.log(a === b);// false : 不仅比较字面值, 还比较类型
/*
算数运算符
2. 任何类型都可以执行算术运算符
1). 任何类型 + string = string
2). 任何类型(除了string) + number = number
I. boolean (true变成1,false变成0)
II. null -> 0
III. undefined -> NaN (not a number) 了解...
3. 任何类型都可以当条件使用
1). string (有用...)
非空串 -> true , 空串 -> false
2). number
非0 -> true , 0 -> false
3). null
-> false
4). undefined
-> false
*/
let c = 100
let d
console.log(c + d);
let e
if(e){
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>
// String[] array = {"a","b","c"}; //java的数组
let array = ["a","b","c"]; //js数组
//for of循环
for(let element of array){
console.log(element); // a,b,c
}
// for in循环 (索引循环)
for(let index in array){
// console.log(index); // 0,1,2
console.log(index + "," + array[index]);
}
</script>
<script>
//扩展: js对象
let p = {
name : "zs",
age : 18
}
// console.log(p.name);
// 索引:可以找到某指定内容的辅助工具
// name 是 "zs" 的索引
for(let index in p){
console.log(index + "," + p[index]);
}
</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>")
document.write(j + "X" + i + "=" + i * j);
document.write("</td>")
}
// document.write("<br>")
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>
/*
* java方法:
* public static void main(String[] args){
* }
*
* 修饰符 返回值类型 方法名(参数列表){
* 方法体
* }
*
* js 函数:
* function 函数名(参数列表){
* 函数体
* }
*
* 1. 参数列表的变量关键字let/var不允许添加
* 2. 有返回值直接return
* 3. js函数调用,实参跟形参可以不匹配
* 4. js函数体有一个隐式变量arguments(数组,包含调用时传入的所有参数)
* */
function method01() {
console.log("haha");
}
method01()
function method02(a,b) {
return a + b;
}
let result = method02(1,2)
console.log(result); // 3
let result2 = method02(1)
console.log(result2); // NaN
function method03() {
let sum = 0;
// arguments = [1,2,3,4,5]
for(let i=0;i<arguments.length; i++){
sum += arguments[i]
}
return sum;
}
let result3 = method03(1,2,3,4,5)
console.log(result3);//15
</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 : 事件驱动型语言
用户触发了某种事件,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>
<input type="button" value="普通函数" onclick="method01()"> <br>
<input type="button" value="匿名函数" id="btn"> <br>
</body>
<script>
/*
* 事件是客观存在的
*
* # 事件绑定 : 指的是事件被触发之后,要执行的js代码(函数)
*
* 1. 普通函数形式
* 1). 声明一个函数
* 2). 在标签内, on事件名 = "函数调用"
* 2. 匿名函数形式
* 1). 在js中找到指定元素
* 2). 给元素对象.on事件名 = 匿名函数
* */
function method01() {
console.log("haha");
}
</script>
<script>
// js通过id找到元素
var btn = document.getElementById("btn");
btn.onclick = function () {
console.log("xixi");
}
</script>
</html>
5.3 案例:轮播图
需求
一共5张图片,实现每过3秒切换一张图片的效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06-案例:轮播图</title>
<style>
div{
text-align: center;
}
</style>
</head>
<body>
<img src="../img/0.jpg" alt="" width="500px" id="myimg">
</body>
<script>
/*
* 轮播图: img标签每1秒切换一张图片,无限循环
* 了解: 网页中有元素被修改了,浏览器自动重新加载
* java:
* let i = 0;
* while(true){
* i++;
* Thread.sleep(1000);
* let img = document.getElementById("myimg")
* //i = 0 ~ 4
* img.src = "../img/"+i+".jpg"
* if(i == 4){
* i = -1
* }
* }
*
* js : 问题(js没有Thread)
* 计时器: 睡眠 + 无限循环
* 1). setInterval(函数名,时间)
* 2). 效果: 每隔指定的时间执行一次函数
* */
let i = 0;
function method01(){
// document.write("a")
i++;
let img = document.getElementById("myimg")
img.src = "../img/"+i+".jpg"
if(i == 4){
i = -1
}
}
setInterval(method01,1000)
</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) 提取字符串中两个指定的索引号之间的字符。 包头不包尾
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
split() 把字符串分割为字符串数组。
trim() 去掉首尾空格
* */
let money = 200
let str = "买衣服要花" + money + "元钱"
console.log(str);
let str2 = `买衣服要花${money}元钱`
console.log(str2);
</script>
<script>
let str3 = ` ab,cD `
var result = str3.substring(0,2);
console.log(result); // ab
console.log(str3.toUpperCase()); //ABCD
var array = str3.split(",");
for(let element of array){
console.log(element);
}
</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);
array2[5] = true
console.log("长度2:" + array2.length);
for(let element of array2){
console.log(element);
}
</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>
</body>
<script >
/*
* 全局函数
* 1. 类型转换
* 1). parseInt 解析整数
* 从左至右解析,遇到非数字就停止并返回已解析部分
* 2). parseFloat 解析小数
* 2. url编码
* */
let a = "100.12px"
// var n = parseInt(a);
var n = parseFloat(a);
console.log(n * 2);
</script>
<script>
/*
* word=%E9%AB%98%E5%9C%86%E5%9C%86
*1. 概念
* 1). uri : 统一资源标识符(Uniform Resource Identifier)
* 只要可以标识一个资源的符号(本地路径,网址)
*
* 2). url : 全球资源定位器(Uniform Resource Locator)
* 远程地址(网址)
*
* url是uri的子集
*
* 2. 根据url协议, 传递数据不能包含中文
* url编码 (encode)
* 高圆圆 -> %E9%AB%98%E5%9C%86%E5%9C%86
*
* url解码 (decode)
* %E9%AB%98%E5%9C%86%E5%9C%86 -> 高圆圆
* */
var result = encodeURI("高圆圆");
console.log(result);
console.log(decodeURI(result));
</script>
</html>
以直接调用的就称为全局函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>14-全局函数</title>
</head>
<body>
</body>
<script >
/*
* 全局函数
* 1. 类型转换
* 1). parseInt 解析整数
* 从左至右解析,遇到非数字就停止并返回已解析部分
* 2). parseFloat 解析小数
* 2. url编码
* */
let a = "100.12px"
// var n = parseInt(a);
var n = parseFloat(a);
console.log(n * 2);
</script>
<script>
/*
* word=%E9%AB%98%E5%9C%86%E5%9C%86
*1. 概念
* 1). uri : 统一资源标识符(Uniform Resource Identifier)
* 只要可以标识一个资源的符号(本地路径,网址)
*
* 2). url : 全球资源定位器(Uniform Resource Locator)
* 远程地址(网址)
*
* url是uri的子集
*
* 2. 根据url协议, 传递数据不能包含中文
* url编码 (encode)
* 高圆圆 -> %E9%AB%98%E5%9C%86%E5%9C%86
*
* url解码 (decode)
* %E9%AB%98%E5%9C%86%E5%9C%86 -> 高圆圆
* */
var result = encodeURI("高圆圆");
console.log(result);
console.log(decodeURI(result));
</script>
</html>