JavaScript基础讲义
一. JavaScript简介
1.1 JS的作用
HTML是页面骨架
CSS是页面衣服
JS是页面灵魂
JS的作用:使得页面可以与用户进行交互
1.2 JS发展史
从ECMA Script1.0一直到ECMA Script6.0(目前使用)
注意:IDEA默认使用的是ECMA Script5.0 我们需要改成6.0(一会介绍)
1.3 JS的特点
a.JS不是编译型语言,是解释性语言(写完JS代码,不需要编译,直接交给浏览器,由浏览器就可以解释运行)
b.JS是弱类型语言,Java是强类型语言
JS定义变量时,统一使用关键字 let 变量名 = 值; 变量具体的类型,由赋的值决定
1.4 JS的组成
a.ECMA Script: JS的核心(基础)语法
b.BOM 浏览器对象模型(主要用于操作浏览器相关)
c.DOM 文档对象模型(主要用于操作当前页面相关)
二. JS的基本语法
2.1 JS的两种引入方式
如何在HTML中写JS脚本代码:
(内嵌式)a.在HTML的一个子标签<script type="text/javascript">中编写js脚本代码
(外联式)b.在其他编写xxx.js文件,在HTML的使用子标签<script src="js文件的路径">
2.2 JS的三种输出方式
Java中输出数据: System.out.println(输出内容);
JS中有三种输出方式:
输出到浏览器控制台: Console.log(输出内容);
输出html内容到页面: document.write(输出内容);
使用浏览器弹框输出: alert(输出内容)
小练习:
<!--a.内嵌式:使用标签<script>-->
<script type="text/javascript">
/*在此写js代码*/
console.log("我是控制台输出");
console.log("我是控制台输出");
console.log("我是控制台输出");
document.write("我是页面输出<br/>")
document.write("我是页面输出<br/>")
document.write("我是页面输出<br/>")
alert("我是弹窗输出..");
alert("我是弹窗输出..");
alert("我是弹窗输出..");
</script>
<!--b:外联式:使用标签<script>-->
<script src="../js/1.js"></script>
1.js文件的内容为:
console.log("我是控制台输出");
console.log("我是控制台输出");
console.log("我是控制台输出");
document.write("我是页面输出<br/>");
document.write("我是页面输出<br/>");
document.write("我是页面输出<br/>");
alert("我是弹窗输出..");
alert("我是弹窗输出..");
alert("我是弹窗输出..");
2.3 JS的变量声明
在定义变量之前,必须修改ECMA Script为6.0版本,建议修改js的模板(改成建议上截图那样)
注意:
a.ES6.0定义变量使用 let关键字(ES5.0使用var)
b.JS是弱类型语言(不是没有类型!!!!),
我们可以通过运算符typeof(变量名)或者 typeof 变量名,来获取该变量的类型
小练习:
<script type="text/javascript">
/*定义变量*/
let a1;
// alert(typeof a1); // undifined类型
a1 = 10;
// alert(typeof a1); // number类型
a1 = 3.14;
// alert(typeof a1); // number类型
a1 = "helloworld";
// alert(typeof a1); // string类型
a1 = 'helloworld';
// alert(typeof a1); // string类型
a1 = false;
// alert(typeof a1) // boolean类型
a1 = new Object(); // Object类型
a1.age = 10; // 对象.属性名 = 值
a1.name = "张三"; // 对象.属性名 = 值
a1.height = 171.3; // 对象.属性名 = 值
// alert(a1)
// alert(a1.age);
// alert(a1.name);
// alert(a1.height);
// alert(typeof a1);
a1 = {name:"张三",age:18}; // Object类型
// alert(typeof a1)
alert(a1.name);
alert(a1.age);
</script>
2.4 JS数据类型
JS的数据类型和Java不一样!!!
a.string 字符串类型(没有字符类型),字符串需要使用""或者''引起来
b.number 数字(包括整数和小数类型)
c.boolean 布尔类型 值只有 true和false 两个
d.object 对象类型
对象赋值时有两种格式:
let obj1 = new Object(); // Object对象
let obj2 = {age:18,name:"jack"}; //JSON对象
let obj3 = null; //空对象
e.undefined 未定义类型(只定义变量,但未赋值)
小练习:
<script type="text/javascript">
//定义变量
//1.字符串
let a = "HelloWorld";
console.log(a);
console.log(typeof a);
//2.数字
let b = 10;
let c = 3.14;
console.log(typeof b);
console.log(typeof c);
//3.布尔类型
let d = true;
console.log(typeof d);
//4.未定义类型
let e;
console.log(typeof e);
//5.object类型
let obj1 = new Object();
console.log(typeof obj1);
//给对象的属性赋值(不需要关系,属性是否存在)
obj1.aa = 10;
obj1.bb = "js";
//取出属性的值
console.log(obj1.aa)
console.log(obj1.bb);
let obj2 = {name:"zhangsan",age:18,height:171.3};
console.log(typeof obj2)
//json对象的属性取值
console.log(obj2.name)
console.log(obj2.age)
console.log(obj2.height)
console.log(obj2["name"]);
console.log(obj2["age"]);
console.log(obj2["height"]);
obj2 = null;
console.log(obj2)
</script>
2.5 JS的运算符
a.算术运算符(与Java基本一样)
需要注意的是: 整数 除以 整除 结果保留小数(如果有)
b.赋值运算符(与Java基本一样)
需要注意的是: 除等 结果保留小数(如果有)
c.比较运算符(与Java基本一样)
需要注意的是:
==: 在JS中称为"值等"(值相同即可,类型可以不同)
===: 在JS中称为"全等"(类型相同,值也相同)
d.逻辑运算符(与Java基本一样)
需要注意的是: 没有Java中异或!!(就算有,我们也不研究)
小练习:
<script type="text/javascript">
/*1.算术运算符*/
let a = 10 / 3; // 结果是3.33333...
// alert(a);
/*2.赋值运算符*/
let b = 10;
b /= 3;
// alert(b); // 结果是3.33333...
/*3.比较运算符*/
let a1 = 10;
let b1 = "10";
// alert(a1 == b1);
// alert(a1 === b1);
/*4.逻辑运算符*/
alert(10 > 3 && 10 > 9);
alert(10 > 3 || 10 > 9);
alert(!(10 > 9));
</script>
2.6 JS流程控制语句
-
条件语句
a.if条件语句(与Java基本一样) 格式: if(条件){ }else if(条件){ }....else{ } 需要注意的是: 在Java中条件最后计算出必须boolean类型(true或者false); 在JS中条件可以是任意类型(任意类型均可以转成boolean类型): a.number类型 0是false, 非0是true b.string类型 ""是false, 非空字符串是true c.object类型 null是false,非null是true d.undifined是false 结论:各种数据类型中的"没有",转成boolean为false b.switch条件语句(与Java一模一样) 格式: switch(变量名){ case 值1: 语句体1;break; case 值2: 语句体1;break; case 值3: 语句体1;break; .. default: 语句体n;break; } 小练习: <script type="text/javascript"> /*if条件语句*/ let score = -50; if (score >= 90) { console.log("优秀.."); }else if(score >= 60) { console.log("及格"); }else if(score >= 0) { console.log("不及格"); }else{ console.log("非法数据.."); } /*js中条件可以是任意类型*/ if (0){ console.log(true); }else { console.log(false); } if (" "){ console.log(true); }else { console.log(false); } let obj = new Object(); if (obj){ console.log(true); }else { console.log(false); } let a; if (a){ console.log(true); }else { console.log(false); } </script> -
循环语句
循环结构和Java中基本一样 while循环 和 Java一模一样 dowhile循环 和 Java一模一样 for循环和Java也是一模一样 forin循环(数组索引循环,或者json对象的键循环) 格式: for(let 变量名 in 数组/json对象){ 变量名是数组的索引或者json的属性名 } forof循环(数组的元素循环) 格式: for(let 变量名 of 数组){ 变量名是数组中的元素 } 小练习: <script type="text/javascript"> /*while循环*/ let i = 0; while(i < 5){ console.log(i); i++; } /*dowhile循环*/ console.log("--------"); let j = 0; do{ console.log(j); j++; }while(j < 5); /*for循环*/ console.log("--------"); for(let k = 0;k < 5;k++){ console.log(k); } console.log("----以上三种循环与Java一模一样----"); let arr = ["jack","rose","tom"]; /*forin 索引循环*/ for(let a in arr){ console.log(a); //数组的索引 console.log(arr[a]); //从数组中根据索引取出元素 } console.log("--------"); let obj = {name:"李四",age:18,height:171.3}; for(let key in obj){ console.log(key); //json对象中的键 console.log(obj[key]); //通过键从json对象中取出对应的值 } console.log("--------"); /*forof 元素循环*/ for(let b of arr){ console.log(b); //数组的元素 } </script>
三. 函数（function
4.1 声明函数和调用
什么是函数:就是Java中的方法(在Java中称为方法,在大部分的其他语言中都叫函数)
定义函数(声明函数): 使用关键字"function"
格式:
function 函数名(参数){
函数体;
return 返回值;
}
调用函数(调用方法):
格式:
let result = 函数名(实际参数);
小练习:
<script type="text/javascript">
/*1.定义函数*/
function fun1() {
console.log("函数体...");
}
function fun2(a) {
console.log("函数体..." + a);
}
function fun3() {
console.log("函数体...");
return "helloworld";
}
/*2.调用函数*/
fun1();
fun2(10);
let result = fun3();
console.log(result);
</script>
4.2 参数
a.在Java中允许方法的重载!!!
但是在JS中方法没有重载,只有覆盖,只要方法名一样,往后定义函数会覆盖以前定义的函数!!!!
b.调用方法时,参数个数随意
如果比形式参数少: 没有赋值的参数,值为undifined
如果比形式参数多: 多余参数的参数,无法直接访问!!
小练习:
<script type="text/javascript">
/*1.js中函数没有重载,只有覆盖*/
function fun1() {
console.log("第一次fun1....")
}
function fun1(a) {
console.log("第二次fun1...." + a)
}
/*调用一下*/
fun1(10); //调用有参数函数,a的值是10
fun1(); // 还是调用有参数的,a的值是undefine
fun1(10,20); //还是调用有参数的,a的值是10,第二个参数由于你没有接收,那么我们没法直接获取
</script>
4.3 调用
1.JS中函数调用是,参数可多可少
如果调用函数时,实际参数个数 > 形式参数个数,无法直接获取多余的值,但是可以获取
JS为每个函数,提高的一个数组:arguments,该数组中包含了所有调用函数时传递过来的参数
小练习:
<script type="text/javascript">
/*1.定义函数*/
function aaa(a,b) {
console.log(a);
console.log(b);
console.log(arguments);
}
/*2.调用函数 */
aaa(10,20,30,40); // 10 赋值给 a, 20 赋值给 b,30和40无法直接获取,但是可以在函数中通过参数数组arguments获取
</script>
2.JS也支持可变参数:
格式:
function(... aaa){
此时的aaa就是可变参数,相当于arguments
}
小练习:
<script type="text/javascript">
/*3.定义可变参数函数*/
function bbb(... arr) {
console.log(arr); //所有参数的数组
console.log(arguments); //所有参数的数组
}
/*4.调用可变参数函数*/
bbb(1,2,3,4,5);
</script>
4.4 案例轮播图
需求: 实现一个图片的轮播
a.思考: 如何实现图片的切换???
只要修改图片的src的路径即可
b.思路:
只要每过一秒钟,修改一次src的路径即可
c.知识点: 定时器
setInterval(函数名,毫秒值); 定时器,每间隔一定的毫秒值,执行一次执行的函数
<script type="text/javascript">
/*1.事先准备一个函数,给定时器调用*/
let number = 1;
function changePic() {
console.log("修改图片路径.." + number);
number++;
}
setInterval(changePic,1000); // 每过1秒钟,执行一次changePic这个函数
</script>
d.知识点: 获取页面上的某个标签对象
通过document对象(页面对象或者当前文档对象),调用querySelector("CSS的选择器")函数,可以获取某个标签对象
<script type="text/javascript">
/*通过document获取,来获取页面的某个标签对象*/
let imgObj = document.querySelector("img");
//获取img标签的src属性值
alert(imgObj.src);
//修改img标签的src属性值
imgObj.src = "../img/1.png";
</script>
e.案例实现:
<script type="text/javascript">
/*定义变量*/
let number = 1;
/*定义函数,修改图片*/
function changePic() {
//0.判断
if (number == 6) {
number = 1;
}
//1.获取img标签对象
let imgObj = document.querySelector("img");
//2.修改src
imgObj.src = "../img/"+number+".png";
//3.number++
number++;
}
/*设置定时器*/
setInterval(changePic,1000);
</script>
四. JS事件
4.1 JS事件的绑定方式(重点)
a.什么叫事件:
用户在HTML页面的操作称为事件(单击事件,双击事件,鼠标移入事件,鼠标移除事件等...)
b.事件和函数的绑定:
当某个事件发生后,要执行某个函数
c.JS事件绑定的两种方式:
a.正常绑定:
<input type="button" onclick="函数名()"/>
b.匿名函数绑定:
let 标签对象 = document.querySelector("选择器");
标签对象.onclick = function(){
}
<!--第一种绑定方式,正常绑定-->
<input type="button" value="点我你试试" onclick="dianji()"/>
<!--第二种绑定方法，匿名函数-->
<img src="../img/1.png" width="300px" height="300px">
<script type="text/javascript">
/*点击函数*/
function dianji() {
alert("按钮被点了....");
}
/*匿名函数*/
let imgObj = document.querySelector("img");
imgObj.onclick = function () {
alert("图片也被点了....");
}
</script>
4.2 两种绑定方式的区别
a.正常绑定,是可以在调用函数时传入参数
<!--第一种绑定方式,正常绑定-->
<input type="button" value="点我你试试" onclick="dianji(5)"/>
<script type="text/javascript">
/*点击函数*/
function dianji(a) {
alert("按钮被点了...."+a);
}
<script>
b.正常绑定时,可以传入一个参数:this,this代表当前标签对象
在正常绑定的函数中,也可以访问this,this代表window对象
匿名函数绑定,无法传入参数,但是可以在函数中访问this,this代表当前标签对象
<!--第一种绑定方式,正常绑定-->
<input type="button" value="点我你试试" onclick="dianji(this)"/>
<!--第二种绑定方法，匿名函数-->
<img src="../img/1.png" width="300px" height="300px">
<script type="text/javascript">
/*点击函数*/
function dianji(obj) {
alert("按钮被点了...."+obj); // obj就是参数this,代表当前按钮<input>对象
alert(this); //this 代表调用方法的那个对象,window对象
}
/*匿名函数*/
let imgObj = document.querySelector("img");
imgObj.onclick = function () {
alert(this); // this 代表调用方法的那个对象,由当前<img>对象
}
</script>
4.3 事件种类以及常用事件(难点)
1. onload 页面加载完成
<head>
<meta charset="UTF-8">
<title>13.JS常见7大事件</title>
<script type="text/javascript">
/*页面加载完毕事件*/
window.onload = function () {
/*通过代码获取img标签对象*/
let imgObj = document.querySelector("img");
console.log(imgObj);
}
</script>
</head>
<body>
<img src="../img/1.png" width="100%">
</body>
</html>
2. onfocus 获取焦点
3. onblur 失去焦点
4. onchange 下拉框控件的值改变时
5. onclick 鼠标单击
6. onmouseover 鼠标移入
7. onmouseout 鼠标移除
<head>
<meta charset="UTF-8">
<title>13.JS常见7大事件</title>
<script type="text/javascript">
/*1.页面加载完毕事件*/
window.onload = function () {
/*通过代码获取img标签对象*/
let imgObj = document.querySelector("img");
console.log(imgObj);
/*获取用户名input,绑定获取焦点事件*/
let usernameObj = document.querySelector("#input01");
/*2.绑定获取焦点事件*/
usernameObj.onfocus = function () {
console.log("用户名输入框,获取焦点了...")
}
/*3.绑定失去焦点事件*/
usernameObj.onblur = function () {
console.log("用户名输入框,失去焦点了!!!")
}
/*获取下拉框select标签,绑定值改变事件*/
let selectObj = document.querySelector("select");
/*4.绑定值改变事件*/
selectObj.onchange = function () {
console.log("下拉框的值改变了.."+selectObj.value+"..."+this.value);
}
/*获取img标签对象,绑定鼠标移入和移出事件*/
/*5.鼠标移入*/
imgObj.onmouseover = function () {
console.log("鼠标移入了..")
}
/*6.鼠标移出*/
imgObj.onmouseout = function () {
console.log("鼠标移出了!!")
}
};
</script>
</head>
<body>
<img src="../img/4.png" width="50%"><br/>
用户名:<input type="text" id="input01"/><br/>
密码:<input type="text" id="input02"/><br/>
学历:
<select name="xueli">
<option value="01">幼儿园</option>
<option value="02">初中</option>
<option value="03">大学</option>
<option value="04">博士</option>
</select>
</body>
五. js的常用内置对象
5.1 字符串
a.字符串的创建:
b.字符串的函数:
<script type="text/javascript">
/*1.字符串的创建*/
let str1 = "helloworld";
let str2 = 'helloworld';
let number = 999;
//拼接一个字符串 "hello" number "world"
let str3 = "hello" + number + "world";
let str4 = `hello${number}world`;
console.log(str3);
console.log(str4);
/*2.字符串的函数*/
/*字符串截取:substring,含头不含尾*/
let str = "helloworld";
console.log(str.substring(2,4));
/*字符串切割:split*/
str = "1234-5678-9011";
console.log(str.split("-"));
/*转大小写:toUpperCase和toLowerCase*/
str = "HeLloWoRlD";
console.log(str.toLowerCase())
console.log(str.toUpperCase())
/*去除首尾的空格:trim*/
str = " hello world ";
console.log("-->"+str.trim()+"<---");
/*取出某个字符:charAt*/
console.log(str.charAt(3));
/*判断是否以xx开头或者结尾*/
console.log(str.endsWith(" "));
console.log(str.startsWith(" "));
</script>
5.2 数组
JS数组的特点:
a.JS中数组长度是可变的,类似Java中集合
b.JS中数组的元素类型是任意的
c.JS的数组也有各种函数可以调用
<script type="text/javascript">
/*1.数组的创建*/
let arr1 = ["java","python","php","ios"];
console.log(arr1);
//JS数组长度是可变
arr1[4] = "tom";
console.log(arr1);
/*JS数组的元素类型是任意的*/
let arr2 = [10,3.14,"java",true];
console.log(arr2);
/*2.数组中的各种函数*/
let arr3 = [1,2,3];
let arr4 = [4,5,6];
/*合并数组:concat*/
let arr34 = arr3.concat(arr4);
console.log(arr34);
/*添加首尾 unshift push*/
arr34.unshift(99);
console.log(arr34);
arr34.push(999);
console.log(arr34);
/*删除首尾shift,pop*/
arr34.shift();
console.log(arr34);
arr34.pop();
console.log(arr34);
/*连接 join*/
let str = arr34.join("-");
console.log(str);
/*排序*/
let arr5 = [3,7,1,8,4,6,2,9,5];
console.log(arr5);
arr5.sort();
console.log(arr5);
// arr5.sort(function(a,b) {
// return b-a;
// });
//使用函数式编程（理解为java的lambda）
//arr5.sort((a,b) => b-a);
console.log(arr5);
</script>
5.3 日期
a.日期的创建
b.日期的函数
<script type="text/javascript">
/*1.创建日期*/
let now = new Date();
console.log(now);
/*2.日期函数*/
let year = now.getFullYear();
console.log(year);
let month = now.getMonth() +1;
month = new String(month).padStart(2,"0");
console.log(month);
let date = now.getDate();
console.log(date);
let hour = now.getHours();
console.log(hour);
let minute = now.getMinutes();
console.log(minute);
let second = now.getSeconds();
console.log(second);
let millisecond = now.getMilliseconds();
console.log(millisecond);
//输出格式: "年-月-日 时:分:秒 毫秒"
let dateString = `${year}年${month}月${date}日 ${hour}:${minute}:${second} ${millisecond}`;
console.log(dateString)
</script>
5.4 数学运算
<script type="text/javascript">
/*1.四舍五入*/
console.log(Math.round(3.501));
/*2.向上取整和向下取整*/
console.log(Math.ceil(3.1));
console.log(Math.floor(3.9));
/*3.随机数*/
console.log(Math.random());
/*练习:产生1(包括)-10(包括)的随机整数*/
console.log(Math.floor(Math.random() * 10 + 1));
</script>
5.5 全局函数
什么是全局函数:????
window对象的函数称为全局函数
全局函数调用时,可以不写对象名直接写函数名调用
全局函数:
[window.]alert(输出内容);
[window.]parseInt("字符串");
[window.]parseFloat("字符串");
<script type="text/javascript">
/*1.parseInt和parseFloat*/
let num1 = parseInt("31.5");
console.log(num1);
let num2 = parseFloat("31.5");
console.log(num2);
/*扩展*/
let num3 = parseInt("a3a1abc4");
console.log(num3);
let num4 = parseFloat("a3a1.5abc567");
console.log(num4);
/*2.isNaN,判断是否非数值*/
/*如果字符串第一位就无法解析成数值,那么返回值是NaN(not a number)*/
console.log(isNaN("1123"));
/*如果第一位不是数值,那么返回true*/
/*如果第一位是数值,还要保证后面所有的都是数值,才返回false*/
/*3.对字符串(地址)进行编码和解码*/
let urlEn = encodeURI("www.百度.com");
console.log(urlEn);
let urlDe = decodeURI(urlEn);
console.log(urlDe);
/*4.eval() 把字符串当前js代码运行*/
console.log(eval("1+2-3*4"));
eval("alert('123')");
</script>
总结
"1.掌握JavaScript的基础语法
变量定义
运算符
if/switch
for/while/dowhile
forin(索引循环)
forof(元素循环)
2.会使用JavaScript常见数据类型
string,number,boolean,Object,undifined
"3.掌握JavaScript函数的语法
function 函数名(参数名){
函数体;
return 返回值;
}
函数名(实际参数);
a.形参和实参 个数可以不一致
b.没有函数的重载,只有函数的覆盖(仅函数名相同,后出现的会覆盖前出现)
"4.掌握JS事件绑定方式******************
a.正常绑定:
<标签名 事件名="函数名()"/> -- 函数需要我们自己在<script>中定义
b.匿名函数绑定(代码绑定)
<script>
//1.获取页面上某个标签对象
let 标签对象 = document.querySelector("选择器");
//2.绑定函数
标签对象.事件名 = function(){
}
</script>
5.能够使用常用JS内置对象
字符串,数组,日期,数学,全局函数(window对象中的函数)
window.alert();
window.confirm();
window.prompt();
扫一扫
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
