JavaScript
1.Javascript的介绍
javascipt是运行在浏览器端的脚本语言，由浏览器解释执行的，简称js它能够让网页和用户有交互功能，增加良好的用户体验效果。
前端三大块： 1.HTML （结构）2. CSS（样式） 3.Javascript(行为)
2.JavaScript的使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内嵌式 -->
<script>
alert('我是内嵌式的js代码！')
</script>
<script src="js/main.js"></script>
</head>
<body>
<!-- 行内式 -->
<input type="button" value="按钮" onclick="alert('你点我了')">
</body>
</html>3.变量的定义和使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//定义数字类型的变量
var iNum1 = 1;
var fNum1 =2.5;
//定义字符串
var sStr = '里斯';
//定义boolean类型
var bIsok = true;
// 定义undefind类型
var unData;
// 定义空对象
var oData = null;
// 定义JavaScript对象
var oPerson = {
name: '里门',
age: 29
}
alert(iNum1);
alert(fNum1);
alert(bIsok);
alert(oPerson)
alert(oPerson.name)
alert(oPerson.age)
// 查看数据类型使用typeof
alert(typeof(iNum1));
alert(typeof(bIsok));
alert(typeof(unData));
alert(typeof(oData));
// 由于js历史原因，设计之前没有null类型，null值归属于object类型，后续语言迭代后也没有进行修改
console.log(oPerson.name);
// 同时定义多个变量
var iNum2 =3, sStr =4;
console.log(iNum2)
</script>
</head>
<body>
</body>
</html>4.函数的定义和调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 定义函数的关键字function
function fnShow(){
alert('我是一个有返回值的参数');
};
// 调用函数
fnShow()
function fnSum(iNum1,iNum2){
var iResult = iNum1 + iNum2;
return iResult
alert('测试代码');
}
var iNum = fnSum(1,2)
alert(iNum)
// return关键字的特点： 可以为函数提供返回值，return后的代码不再执行
</script>
</head>
<body>
</body>
</html>5.全局变量和局部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fnShow()
{
// 局部变量
var iNum = 1;
alert(iNum)
}
// 调用函数
fnShow()
// 在函数外定义的变量可以在不同的函数内使用，并且不同函数可以共享全局变量
var iNum1 = 1;
function fnModify()
{
alert(iNum1);
iNum1 = 5;
// ++ 等价于 += 1
iNum1++
alert(iNum1)
}
fnModify()
// js可以数字类型与字符串直接进行相加，把数字自动
alert("函数外访问的全局变量 ：" + iNum1);
</script>
</head>
<body>
</body>
</html>6.条件判断比较运算符
<!-- 条件语句语法
if 语句 -只有当指定条件为True时，使用该语句来执行其他代码
if ... else 语句 -当条件为true时执行代码，当条件为false时执行其他代码
if ... else if ...else 语句 -使用该语句来判断多条件，执行条件成立的语句
-->
7.获取标签元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script>
// document js的内置对象，html的文档对象、
// 如果获取的对象是null，表示标签没有获取成功
var oDiv = document.getElementById('div1');
alert(oDiv);
</script> -->
<!-- <script>
function fnLoad(){
var oDiv = document.getElementById('div1');
alert(oDiv);
}
window.onload=fnLoad;
</script> -->
<script>
window.onload=function(){
var oDiv = document.getElementById('div1');
alert(oDiv);
}
</script>
</head>
<body>
<div id="div1">这是一个div标签</div>
</body>
</html>
<!-- <script>
var oDiv = document.getElementById('div1');
alert(oDiv);
</script> -->8.标签属性的获取和设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btnstyle{
background: yellow;
/* font-size: 30px; */
}
</style>
<script>
window.onload=function(){
// 根据id获取标签对像
var oBtn = document.getElementById("btn1");
// 获取标签的属性
alert(oBtn.value);
alert(oBtn.type);
// 设置标签属性
oBtn.name = "hemingkang";
// 设置样式的属性
// oBtn.style.background="red";
// 相当于设置class ，以后通过类选择器给标签添加样式
// 注意点： class 这里变成className
oBtn.className="btnstyle";
oBtn.style.fontSize ="30px";
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1">
</body>
</html>9获取和设置标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
// 根据标签的id获取标签对象
var oDiv = document.getElementById("div1")
// 获取标签内容
alert(oDiv.innerHTML);
// 设置标签内容
oDiv.innerHTML = "<a href='http://www.baidu.com'>百度</a>"
}
</script>
</head>
<body>
<div id="div1">
我是caicai，我菜，需要不断的学习
</div>
</body>
</html>10数组的定义和数组的操作
// 数组里面的数据可以是不同类型的数据
<!-- 数组的定义 -->
// 实例化对象的创建
var aList = new Array(1,2,3);
// 字面量方式创建
var aList2 = [1,2,3,['a','b','c']];
// 多维数组
// 多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组
var aList = [[1,2,3],['a','b','c']];
数组的操作
获取数组的长度
var aList = [1,2,3,4];
alert(aList.length); //弹出411循环语句
循环语句就是让一部分代码重复执行，javascript中常用的循环语句有：
for
while
do-while （不管条件是否成立，至少执行一次）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// // for 循环
var array = [1, 4, 5];
// for(var index=0; index < array.length; index++){
// result = array[index];
// alert(result)
// }
// var index = 0;
// // while 循环
// while(index < array.length){
// var oValue = array[index];
// alert(oValue)
// index++;
// }
var index = 5;
do{
alert('ok');
// 这里需要完成取值操作,不管条件是否成立，至少执行一次
var oValue = array[index];
alert(oValue)
index++;
}while(index < array)
</script>
</head>
<body>
</body>
</html>12字符串拼接
字符串拼接使用：“+”运算符
字符串可以和数字直接进行合并
数字和字符串拼接会自动进行类型转换（隐式类型转换），把数字类型转换成字符串类型进行拼接
13定时器
13.1定时器在一段特定的时间后执行某段代码
13.2定时器的使用
js定时器有两种创建方式：
- seTimeout(func[,delay,param1,param2,...]);以指定的时间间隔（以毫秒计）调用一次定时器
- setInterval(func[,delay,param1,param2,...]):yellow_heart:以指定的时间间隔（以毫秒计）重复调用一个定时器
参数说明：
第一个参数func,表示定时器要执行的函数名
第二个参数delay,表示时间间隔,默认是0,单位是毫秒
第三个参数param1,表示定时器执行函数的第一个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--定时器1：根据指定的时间间隔延时调用指定的函数-->
<script>
// function fnShow(name,age){
// alert("ok" + name + age);
// alert(tid)
// // 销毁定时器
// clearTimeout(tid);
// }
// // 根据时间间隔调用一次函数的定时器
// var tid = setTimeout(fnShow,1000,"hemingkang", 20)
// 根据时间间隔重复函数的定时器
function showIfo(name, age){
alert("ok" + name + age);
// 根据时间间隔重复函数的定时器
}
function fnStop(){
alert(tid)
clearInterval(tid);
}
var tid = setInterval(showIfo, 3000, "hekang", 20);
</script>
</head>
<body>
<input type="button" value="停止" onclick="fnStop();">
</body>
</html>
