JavaScript是运行在浏览器的脚本语言，是由浏览器解释执行的，简称js，它能够让网页与用户有交互功能，增加良好的用户体验。
前端开发三大块：
1.HTML： 负责网页结构
2.CSS：负责网页样式
3.JavaScript：负责网页行为，比如网页与用户的交互效果
JavaScript使用方式：
1. 行内式（主要是用于事件）
<input type="button" name="" onclick="alert('好的')">
2.内嵌式
<script type="text/javascript">
alert('科比')
</script>
3.外链式
/// 引入js文件
<script type="text/javascript" scr='js/index.js'></script>
/// 调用js文件的方法
<script>fnShow();</script>
定义变量
Javascript是一种
弱类型语言，也就是说不需要指定变量的类型，Javascript的变量类型是由它的值来决定，定义变量需要用关键字var, 一条Javascript语句应该以“；”结尾
定义变量的语法格式：
var 变量名 = 值
var iNum = 123;
var str = 'abc';
/// 同时定义多个变量可以用","隔开，公用一个var关键字
var iNum = 45,str = 'qwe',scount = '68';
数据类型
js中有六种数据类型，包括五种基本数据类型和一种复杂数据类型(object)
5种基本数据类型：
1.number 数字类型
2.string 字符串类型
3.boolean 布尔类型 true 或 false
4.undefined 类型,变量声明未初始化，它的值是undefined
5.null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
函数
# 函数的定义：可以重复使用的代码块，使用关键字function定义函数
# 函数调用：函数名加小括号
<script>
/// 函数定义
function fnAlert(num1) {
alert(num1);
}
/// 函数调用
fnAlert(2);
</script>
# 定义全局变量，可以在不同的函数内使用
<script>
/// 定义全局变量
var a = 12;
/// 函数定义
function fnAlert() {
a++;
}
/// 函数调用
fnAlert();
</script>
获取标签对象
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器css</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script>
/// js内置的对象，html的文档对象
/// 如果获取的对象是null，表示标签没有获取成功,那是因为html是从上往下执行的，所以要把代码写在onload函数里面
/// 页面标签和数据都加载完成以后会触发onload事件
window.onload = function(){
var op = document.getElementById('p1');
var oA = document.getElementById('link1');
var sLinks = oA.href;
alert(sLinks)
alert(op);
}
</script>
</head>
<body>
<p id="p1">我是段落标签</p>
/// # ：表示当前页面的url(路径)
<a href="#" id="link1" class="sty01">这是一个链接</a>
</body>
</html>
属性操作
首先获取的页面标签元素，然后就可以对页面标签元素的数据进行操作，属性的操作包括：
`属性的读取`
`属性的设置`
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器css</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script>
window.onload = function(){
/// 获取标签对象
var oInput = document.getElementById('input1');
var oA = document.getElementById('link01');
/// 读取属性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
/// 操作class属性，需要写成'className
oA.className = 'sty02';
oA.style.color = 'red';
oA.style.fontSize = sValue;
alert(sValue)
}
</script>
</head>
<body>
<input type="text" name="setSize" id="input1" value="20px">
<a href="#" id="link01" class="sty01">这是一个连接</a>
</body>
</html>
获取标签内容 innerHTML
<script>
window.onload = function(){
var op = document.getElementById('p1');
/// 获取标签内容
alert(op.innerHTML);
/// 设置标签内容
op.innerHTML = "<a href='https://www.baidu.com'>百度</a>";
}
</script>
<p id="p1">hahahah ，我是p标签内容</p>
数组
/// 实例化对象方式创建
var alist = new Array(1,2,3);
///字面量方式创建，推荐使用
var blist = [1,2,3,4,'abc']
/// 多维数组: 指数组的成员也是数组，把这样的数组也叫做多维数组
var list = [[1,2,3],['a','b','c']]
/// 数组的操作
var list = [1,2,3,4]
/// 数组的长度
list.length
/// 取值
list[1]
/// 从数组最后添加数据
/// 结果：[1,2,3,4,5]
list.push(5)
/// 从数组最后删除数据
/// 结果：1,2,3,4
list.pop()
/// 根据指定的下标插入或删除元素
list.splice(start,num,element1,,...elementN)
start: 必须，开始删除的索引
num: 可选，删除数组的元素的个数
element: 可选，在start索引位置要插入的新元素
此方法会删除从start索引开始的num个元素，并将elementN参数插入到start索引位置
实例：
var colors = ['red','greed','blue']
/// 删除第一项
colors.slice(0,1)
/// 结果：greed,blue
console.log(colors)
/// 从第一个索引位置插入两项数据
colors.splice(1,0,'yellow','orange')
/// 结果：green，yellow,orange,greed,blue
/// 删除一项，插入两项数据
colors.splice(1,1,'red','purple')
/// 结果：green,red,purple,orange,greed,blue
定时器
js定时器有两种创建方式：
1.setTimeout(func[,delay,param1,param2...]) 以指定的时间间隔(以毫秒计)调用一个函数的定时器
2.setInterval(func[,delay,param1,param2...]) 以指定的时间间隔(以毫秒计)重复调用一个函数的定时器
<script>
function showAlert(name,age){
alert(name + age);
/// 销毁定时器
clearTimeout(tid)
}
/// 根据时间间隔调用一次函数的定时器
/// 第一个参数：定时器要执行的函数
/// 第二个参数：时间间隔
/// 第三个参数：参数，有多个参数用逗号进行分割
/// 返回值表示创建定时器返回的id，通俗理解就是创建的第几个定时器
var tid = setTimeout(showAlert, 2000,'liven',20);
</script>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器css</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script>
function showAlert(name,age){
alert(name + age);
}
function fnStop(){
clearInterval(tid)
}
/// 根据时间间隔重复执行函数的定时器
var tid = setInterval(showAlert,5000,'live',20);
</script>
</head>
<body>
<input type="button" value="停止" onclick="fnStop();">
</body>
</html>
网友评论