一、JavaScript基础
1 JavaScript概述
1.1 JavaScript的作用
- HTML：用于页面的搭建
- CSS：用于页面的美化
- JavaScript：用户与页面的交互
1.2 JavaScript的特点
- js是一个弱类型的脚本语言，浏览器可以直接运行
| 特点 | JAVA | JavaScript |
|---|---|---|
| 面向对象 | 完全面向对象语言：继承，多态、封装 | 基于对象的语言，不完全符合面向对象的思想 |
| 运行方式 | 编译型，运行过程需要生成字节码文件 | 解释型语言，不会生成中间文件，解释一定行数，在执行 |
| 跨平台 | 安装了JVM就可以运行在不同的操作系统中 | 只要有浏览器的地方就可以运行 |
| 大小写 | 区分大小写 | 区分大小写 |
| 数据类型 | 强类型语言，不同的数据类型有严格区分 | 弱类型元，不同类型的数据可以复制给同一个变量 |
1.3 JavaScript的语法组成
| 组成部分 | 作用 |
|---|---|
| ECMA Script | 构成了JS核心的语法基础 |
| BOM | Browser OBject MOdel 浏览器对象模型，用来操作浏览器的对象 |
| DOM | Docunment Object Model 文档对象模型，用来操作网页中的元素 |
二、JavaScript基础语法
2.1 html与js结合方式
<!--
HTML与js结合方式
1）内部脚本
格式：使用<script>标签，在标签内编写接收代码
2）外部脚本
格式：使用<script>，在标签内src属性引入外部的js代码
注意：
1）script标签可以在页面的任意位置，推荐放在body下方
head存放css样式的，body下方存放js脚本
2）script标签可以出现多次，依次被加载
3）script标签如果使用了src属性，那么标签体内的代码不会加载到浏览器中
-->
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_html与js结合方式</title>
<!--
默认 type="text/javascript"声明此标签的类型
-->
<script type="text/javascript">
// 默认， 文档输出流 --body标签内部
document.write("<h3>你好，小娜！<h3> ");
</script>
<script src="../js/myjs.js">
document.write('<h3>我不会加载到浏览器中</h3>')
</script>
</head>
<body>
</body>
</html>
2.2 js变量的定义
- java是强类型语言，注重变量的定义，所以在java中定义变量类型的方式如下
// 整型
int i = 1314;
// 浮点型
double d = 521.1314;
// 字符型
char c ='c';
// 字符串型
String str = "用心做教育";
//布尔型
boolean b = true;
- js是弱类型语言，不注重变量的定义，所以在js中定义变量的方式如下
<script>
// 整型
var i = 12345;
// 浮点型
var d = 123.123;
// 字符型
// 注意：在js中，没有字符型只有字符串，可以使用单引号或双引号
var c = 'c';
// 字符串型
var str = "用心做教育";
// 布尔型
// 在ES6版本之前所有的变量声明都为var，可以省略不写；（let、const 常量）
b = true;
</script>
2.3 js数据类型
js与java一样，数据类型也分为基本数据类型和引用数据类型
a)基本数据类型
number：数值型（整型和浮点型）
string：字符串型（字符和字符串）
boolean：布尔型
null：空值 例如：var a = null;
undefined：未定义 例如： var b;
b)引用数据类型
js与java一样，使用new关键字来创建对象
// 创建上帝对象
var obj = new Object();
// 创建日期对象
var date = new Date();
c) typeo操作符
- 作用：判断变量的数据类型
- 格式： typeof 变量或者typeof（变量）
<script !src="">
//1)整型
var i=123456;
/*
补充知识点：System.out.println() ===== console.log()
js是弱类型语言，结尾可以不加分号，建议大家写上
*/
//console.log("整型："+typeof i);
console.log("整型："+typeof i);
//2）浮点型
var d=123.123;
console.log("浮点型：" + typeof d);
//3）字符型
var c='ccccccccc';
console.log("字符型：" + typeof c);
//4)字符串型
var cha="因为用心，所以动听";
console.log("字符串：" + typeof cha);
//5)布尔型
b=true;
console.log("布尔型：" + typeof b);
//6)空值，引用数据类型的占位符
var n=null;
console.log("空值：" + typeof n);
//7)未定义 undefined
var u;
console.log("未定义：" + typeof u);
//8)引用数据类型 ps：js变量可以重复定义使用
u=new Date();
console.log("引用数据类型：" + typeof u);
</script>
2.4 js运算符
js与java的运算符一样，只不过仍有不同的地方
<script>
//算数运算符。在js中，住址可以和字符进行数学运算，（底层进行了转换）但是字符串加号还是拼接
var a=10;
var b='3';
console.log(a + b);//字符串拼接
console.log(a / b);//保留小数
//比较运算符
var c='10';
console.log(a == c);//返回结果为true。比较的是数据内容
console.log(a === c);//返回结果false。比较的是类型和内容
//！= ！==
console.log(a != c);//false
console.log(a !== c);//true
</script>
2.5 流程控制语句
- 循环结构
- 顺序结构
- 分支结构
与java中一样
2.6 案例 ：九九乘法表
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07_九九乘法表</title>
<style type="text/css">
table {
margin: auto;
/*变成细边框*/
border-collapse: collapse;
}
td {
padding: 5px;
}
</style>
</head>
<body>
</body>
<script>
document.write('<table border="1">')
document.write('<caption>九九乘法表</caption>')
for (let i = 1; i < 10; i++) {
document.write('<tr>')
for (let j = 1; j <= i; j++) {
document.write('<td>')
document.write(j + "x" + i + "=" + (j * i));
document.write('</td>')
}
document.write('</tr>')
}
document.write('</table>')
</script>
</html>
2.7 在浏览器中调试（非常重要）
使用浏览器提供的调试工具，（F12），快速的定位问题，解决问题，debug调试
如图：
2.8 函数（方法）使用
is脚本的代码主要在函数中实现
a) 普通函数
//格式
function 函数名(参数列表){
//js代码
[return 返回值；]
}
代码
<script>
// 普通函数
// 在js中，不支持方法重载，重名方法会被覆盖
// 再来三个数相加
function sum(a, b, c) {
return a + b + c;
}
// 二个数相加
function sum(a, b) {
// 在所有的函数中内置arguments 类似于java args 用来接收参数列表
console.log(arguments);
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
return a + b;
}
// 调用sum方法
// NaN not a number 这不是一个数
console.log(sum(5, 10, 15));
</script>
b）匿名函数
- 格式
var fun = function(参数列表){
//js代码
}
代码
<script>
// 匿名函数
var fun = function (name) {
document.write('<h3>' + name + '喜欢看快乐大本营</h3>');
}
// 调用函数
fun("吉吉姐姐");
</script>
c) 变量作用域
- 两种
/*
* js变量作用域二种
* 全局变量
* 特点：作用域在整个页面
* 局部变量
* 特点：函数执行完毕后，销毁
* 特殊：在函数内如果未用var来声明变量，此变量为全局变量
*
* */
代码
<script>
var a = 5;
function show() {
var b = 10;
console.log("我是在方法内的局部变量b：" + b);
// 为全局变量
c = 15;
console.log("我是在方法内未声明的变量c：" + c);
}
show();
console.log("我是在方法外未声明的变量c：" + c);
// b is not defined
// console.log("我是在方法外的局部变量b：" + b);
</script>
<script>
console.log("我是全局变量a：" + a);
</script>
2.9 案例：轮播图
- 需求
实现每过3秒中切换一张图片的效果，一共5张图片，当显示到最后1张的时候，再次显示第1张
- 知识点
/*
* 1)获取img标签的dom对象
* 格式：document.getElementById(" ");
*
* 2)获取定时器对象，指定间隔时间，触发函数
* 格式：
* window.setInterval("函数名()",时间间隔);单位毫秒
* window.setInterval(函数名，间隔时间)；单位毫秒
*
* */
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>12_轮播图</title>
<style type="text/css">
.container {
/*居中*/
margin: auto;
border: 1px solid black;
width: 850px;
}
img {
width: 850px;
}
</style>
</head>
<body>
<div class="container">
<img id="myImg" src="../img/0.jpg" alt="">
</div>
</body>
<script>
/*
步骤分析：
1）获取img标签的dom对象
2）编写函数修改对象的src属性
3）获取定时器间隔3秒触发函数
*/
//1）获取img标签的dom对象
let myImg = document.getElementById("myImg");
//计数器
var num = 1;
//编写函数修改对象的src属性
function changeImg() {
myImg.src = "../img/" + num + ".jpg";
num++;
if (num === 5) {
num = 0;
}
}
//3)获取定时器间隔3秒触发函数
window.setInterval("changeImg()", 3000);
</script>
</html>
三、JavaScript事件
3.1 作用
js通过事件来监听一切行为，结合函数完成页面的交互效果。
3.2 常见事件
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onkeydown | 某个键盘的键被按下 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmouseout | 某个鼠标按键被按下 |
| onmouseout | 鼠标从某个元素移开 |
| onmouseover | 鼠标被移到某个元素之上 |
| onmouseup | 鼠标被移到某个元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onsubmit | 提交按钮被点击 |
3.3 简单交互
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_简单交互</title>
<script>
//页面加载事件
window.onload=function () {
window.alert("页面加载完毕...")
//单击事件
document.getElementById("myBtn").onclick=function () {
window.alert("被点击了！")
}
//双击事件
document.getElementById("myImg").onclick=function () {
this.src="../img/3.jpg";
}
//获取焦点
document.getElementById("myText").onfocus=function () {
this.value="";
}
//失去焦点
document.getElementById("myText").onblur=function () {
this.value="请输入用户名...";
}
//改变事件
document.getElementById("mySel").onchange=function () {
alert(this.value)
}
//表单校验
document.getElementById("myForm").onsubmit=function () {
window.alert("我校验了！")
return false;
}
}
</script>
</head>
<body>
<input id="myBtn" type="button" value="点我啊！"><br/><br>
<img id="myImg" src="../img/1.jpg" width="350ox" alt=""><br/><br/>
<input id="myText" type="text" value="请输入用户名...">
<hr/>
省份：
<select id="mySel">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gd">广东</option>
<option value="hn">湖南</option>
</select><br>
<!--如果该表单需要根据触发函数的返回值决定是否可以提交，那么必须在触发方法之前加上return-->
<form id="myForm" action="#">
用户名：<input type="text" name="userName"/>
<input type="submit" value="提交"/>
</form>
<br/>
</body>
</html>
四、 JavaScript内置对象
4.1 数组对象
- 知识点
/*
* 数组对象创建方式 4 种：
* 1）var arr=[元素1，元素2....]；（掌握）
* 2) var arr=new Array();
* 3)var arr = new Array(长度);
* 4）var arr =new Array(元素1，元素2...);
*
* 注意：
* 在js中，数组的元素类型任意
* 在js中，数组元素的长度任意
*
* 你会发现他就像java的list集合
*
* */
代码
<script>
/*
内置的方法：
1） concat() 连接数组
2）join（"连接符"） 与 split功能相反，将数组拼接成字符串
3）reverse() 数组反转
4）sort() 排序
字符串
数值
sort(function(a,b){
return a-b; 升序
return b-a; 降序
})
*/
var arr1 = new Array("小名", "小花", "小溪");
var arr2 = ["c", "b", "a"];
console.log(arr2.sort());
var arr6 = [1, 11, 9, 3, 7];
console.log(arr6.sort(
function (a, b) {
return a - b;
}
));
</script>
4.2 日期对象
代码：
<script>
//日期对象
let date=new Date();
console.log(date);//获取当前系统时间
console.log(date.toLocaleDateString());//返回本地时间
console.log(date.getFullYear());//年
console.log(date.getMonth()+1);//获取月 0--11
console.log(date.getDate());//日
console.log(date.getTime());//获取从1970年到现在的毫秒值
</script>
4.3 全局对象
代码：
<script>
/*
* 字符串转换成数值类型
* 1）parseInt();整型
* 2）parseFloat(); 浮点型
* 当我们修改图片的大小 600px
*
* 补充：从第一个字符开始转换，当遇到非数值字符 停止转换
*
* NaN not a number 这不是一个数
* // 判断 如果字符串是数值返回false ，如果字符串不是数值返回true
* isNaN();
*
* */
var a = "123.123";
var b = '123';
var a1 = "a1a23.a1a23";
console.log(parseInt(a));
console.log(parseFloat(a));
console.log(isNaN(a1));//a现在不是数值的话返回true
console.log(isNaN(b));//b现在是一个数值返回false
/*
* 编码 解码
* URL:统一资源定位符 url地址路径
* URI：统一资源标识符
* 当浏览器发送数据给服务器， 中文==编码
* encodURI()
*
* 浏览器接收服务器数据 中文 == 解码
* decodeURI();
*
* */
str="我们预测明天会下雨！"
//编码
let en =encodeURI(str);
console.log(en);
//解码
console.log(decodeURI(en));
</script>
5601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
