JavaScript基础
JavaScript基础语法
JS运算符
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//算数运算符
//在js中数值可以和字符串进行数学运算，底层实现了隐式转换
let a = 10;//number
let b = '4';//string
console.log(a + b);//104 字符串拼接
console.log(a - b);//6
console.log(a * b);//40
console.log(a / b);//2.5 保留小数位
//比较运算符
let c = '10';
console.log(a == c);//true 比较的是内容
console.log(a === c)//false 比较的是类型+内容
//！= 比较的是内容
//！== 比较的是类型+内容
</script>
</body>
</html>
JS流程控制语句
条件语句
条件表达式
1）布尔型
2）数值型：非0为真
3）字符串：非空串为真
4）变量：null 和 undefined 都为假
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//顺序、分支、循环
//条件表达式 1、布尔型 2、数值型：非0为真 3、字符串：非空串为真 4、变量：null和undefined都为假
let flag = true;
flag = 15;
flag = " ";
flag = null;
flag;
if (flag) {
console.log("满足条件");
} else {
console.log("不满足条件");
}
</script>
</body>
</html>
循环语句
1. 普通for循环
for(let i= 0; i<10; i++){
需要执行的代码;
}
2. 增强for循环
for(let obj of array){
需要执行的代码;
}
3. 索引for循环
for(let index in array){
需要执行的代码;
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr = ['剑圣', '提莫'];
//普通for循环
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//增强for
for (let ele of arr) {
console.log(ele);
}
//索引for
for (let index in arr){
console.log(index);//打印结果为 0 1 2
console.log(arr[index]);
}
</script>
</body>
</html>
JS函数【方法】
js函数是执行特定功能的代码块.也可以称为js方法
普通函数
语法： function 函数名（参数列表）{函数体； [return 返回值；]} //中括号表示内容可以省略
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>普通函数</title>
</head>
<body>
<script>
// 二个数求和
function sum(a, b) {
// console.log(a + b); 无返回值
return a + b;
}
// 三个数求和
// NaN：not a number 这不是一个数
// js是弱类型语言，不支持方法重载，重名的方法会覆盖
// js函数定义的参数个数，可以与实际调用的参数个数不同....
function sum(a, b, c) {
// js函数体内置 arguments [] 数组对象，获取实际调用者的参数值
console.log(arguments);
console.log(arguments[3]); // 可以获取第四个参数
return a + b + c;
}
// 确实不知道传递几个参数.... 可变参数本质就是一个数组...
function sum(... args){
console.log(args);
}
// 调用方法
let resut = sum(5,6,7,8);
// console.log(resut);
</script>
</body>
</html>
注意：NAN：not a number，js是弱类型语言，不支持方法重载，执行顺序自上而下，如果方法名一样，重名的方法会覆盖
匿名函数
通常与事件结合使用
语法： function 函数名（参数列表）{函数体； [return 返回值；]} //中括号表示内容可以省略
轮播图案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>01-轮播图</title>
</head>
<body>
<!--通过定时器触发一个方法-->
<style>
div {
text-align: center;
}
</style>
<div>
<img src="img/0.jpg" alt="" id="Img" width="100%">
</div>
<script>
//通过dom获取img标签的js对象
let img = document.getElementById("Img");
//获得img标签的src属性值
console.log(img.src);
//图片编号
let num = 1;
//定义一个方法
function change() {
img.src = './img/' + num + '.jpg'
if (num == 4) {
num = 0;
} else {
num++;
}
}
//每隔两秒，触发一下change方法
setInterval('change()', 2000);
</script>
</body>
</html>
JS事件
JS可以监听用户的行为,并调用函数来完成用户交互功能
常用事件
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
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 提交按钮被点击。
事件的绑定方式
1、HTML中添加onclick
2、JS中定义函数绑定事件
3、直接定义函数与内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<input type="button" value="普通函数" onclick="show()"> <br>
<input type="button" value="匿名函数" id="myBtn"> <br>
<script>
// 单击事件
// 普通函数 此种方案有耦合性....
function show() {
alert('我是普通函数触发的事件...')
}
// 匿名函数
// 通过dom技术获得按钮标签的js对象
/* let myBtn = document.getElementById('myBtn');
myBtn.οnclick=function () {
alert('我是匿名函数触发的事件...')
}*/
document.getElementById('myBtn').onclick=function () { // 链式编程...
alert('我是匿名函数触发的事件...');
}
</script>
</body>
</html>
页面交互案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>02-页面交互</title>
</head>
<style>
form{
text-align: center;
font-size: 15px;
}
body{
background: rosybrown;
}
</style>
<!--
常用事件
1. onload 页面加载完成
2. onfocus 获取焦点
3. onblur 失去焦点
4. onchange 表单控件的值改变时
5. onclick 鼠标单击
-->
<body>
<form action="#" method="post">
       姓名 <input type="text" id="user"><br>
       年龄 <input type="text" id="age"><br>
学历
<select name="education" id="edu" >
<option value="0">请选择</option>
<option value="1">本科</option>
<option value="2">专科</option>
</select><br>
   <input type="reset" value="确认提交" id="bt1">
 <input type="reset" value="取消提交" id="bt2">
</form>
<script>
//加载完成触发的事件
window.onload=function(){
//alert("页面加载完成");
console.log("页面加载完成");
}
//获取焦点
document.getElementById("user").onfocus=function(){
this.value="获得焦点"
}
document.getElementById("age").onfocus=function(){
this.value="获得焦点"
}
//失去焦点
document.getElementById("user").onblur=function(){
this.value="失去焦点"
}
document.getElementById("age").onblur=function(){
this.value="失去焦点"
}
//表单控件的值发生改变
document.getElementById("edu").onchange=function(){
alert(this,value);
}
//单击和双击事件
document.getElementById("bt1").onclick=function () {
alert("您已单击确认提交")
}
document.getElementById("bt2").ondblclick=function () {
alert("您已双击取消提交")
}
</script>
</body>
</html>
JS常用内置对象
字符串
1. 构造字符串对象可以使用
双引号,单引号,反引号
2. 字符串常用方法
substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符。 包头不包尾
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
split() 把字符串分割为字符串数组。
trim() 去掉首尾空格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字符串</title>
</head>
<body>
<script type="text/javascript">
// 构造字符串对象可以使用 双引号,单引号,反引号
// 双引号
let str1 = "我是字符串";
console.log(str1);
// 单引号
let str2 = '我是字符串';
console.log(str2);
// 反引号（重音符） 简化字符串的拼接
let str3 = `我是字符串`;
console.log(str3);
let num = 998;
let cishu = 3;
let str4 = '只要'+998+'，元';
let str5 = `只要 ${num}，元 , ${cishu}`;
console.log(str5);
// 字符串常用方法
// substring
let str = '我爱我的祖国';
console.log(str.substring(4, 6));
</script>
</body>
</html>
数组
数组
查询手册完成:
1. 创建数组
let array = [元素1，元素2，元素3]; -- 推荐
let array = new Array(元素1，元素2，元素3);
特点：数组元素的类型任意，数组的长度任意，当做java的list集合
2. 数组常用方法
concat() 连接两个或更多的数组，并返回结果。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
pop() 删除并返回数组的最后一个元素
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
与 字符串.split()切割为数组 方法相反
sort() 对数组的元素进行排序
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script>
//1. 创建数组
let arr1 = ['詹姆斯·高斯林','布兰登·艾奇','我们',true];
console.log(arr1);
let arr2 = new Array('贾克斯',5,new Date());
console.log(arr2);
//2. 数组合并
let concatArr = arr1.concat(arr2);
console.log(concatArr);
//3. 添加元素
concatArr.push('我是新元素');
console.log(concatArr);
//4. 删除元素
concatArr.pop();
console.log(concatArr);
//5. 数组元素拼接为字符串
console.log(concatArr.join('-'));
//6. 排序数组元素
let arr3 = [3,1,7,5];
console.log(arr3.sort()); // 升序
console.log(arr3.sort().reverse()); //降序
// 指定sort() 排序规则
console.log(arr3.sort(function(a,b){return a-b})); // 升序
console.log(arr3.sort(function(a,b){return b-a})); // 降序
</script>
</body>
</html>
日期
日期
let date = new Date();
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>日期</title>
</head>
<body>
<script>
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.getTime()); // 1970年~今毫秒值
</script>
</body>
</html>
数学运算
数学运算
查询手册完成
1. 四舍五入 round()
2. 向下取整 floor()
3. 向上取整 ceil()
4. 产生随机数 random() ：返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1 （含头不含尾）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数学</title>
</head>
<body>
<body>
<script >
let n = 1234.567;
//1. 四舍五入取整
console.log(Math.round(n));
//2. 向下取整
console.log(Math.floor(n));
//3. 向上取整
//4. 产生随机数
console.log(Math.random());
//5. 产生 [1,100]的随机整数
console.log(Math.floor(Math.random() * 100+1));
</script>
</body>
</html>
全局函数
不需要通过任何对象，就可以直接调用的就称为全局函数
全局函数
1. 字符串转为数字
parseInt() 解析一个字符串并返回一个整数。
parseFloat() 解析一个字符串并返回一个浮点数。
特点：从第一个字符开始转换，遇到非数值字符停止转换....
NaN not a number 这不是一个数 （这哥们六亲不认）
isNaN() 判断一个字符串 如果不是数值返回true 否则返回false
2. 对字符串编码和解码
encodeURI() 把字符串编码为 URI。
decodeURI() 解码某个编码的 URI 。
3. 把字符串当做js表达式来执行
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全局函数</title>
</head>
<body>
<script >
// 1. 字符串转为数字
let str = '1314.1234';
console.log(parseInt(str)); // 1314
console.log(parseFloat(str)); // 1314.1234
console.log(NaN == NaN ? '相等' : '不等');
console.log(isNaN(str));
// 2. 对字符串编码和解码
let name = "明天下午二点偷袭珍珠港";
let encodeStr = encodeURI(name);// 编码
console.log(encodeStr);
console.log(decodeURI(encodeStr));// 解码
// 3. 把字符串当做js表达式来执行
eval('alert(1)'); // 将字符串识别为js的一个脚本片段
</script>
</body>
</html>
