标签：解释 等价 好的 str 修改 良好的 OLE ali NPU
javascipt是运行在浏览器端的脚本语言，由浏览器解释执行的，简称js它能够让网页和用户有交互功能，增加良好的用户体验效果。
前端三大块： 1.HTML （结构）2. CSS（样式） 3.Javascript(行为)
<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>
<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>
<!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>
<!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>
<!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> -->
<!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>
<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>
// 数组里面的数据可以是不同类型的数据
<!-- 数组的定义 -->
// 实例化对象的创建
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); //弹出4
循环语句就是让一部分代码重复执行，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>
字符串拼接使用：“+”运算符
字符串可以和数字直接进行合并
数字和字符串拼接会自动进行类型转换（隐式类型转换），把数字类型转换成字符串类型进行拼接
js定时器有两种创建方式：
参数说明：
第一个参数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>
标签：解释 等价 好的 str 修改 良好的 OLE ali NPU
原文地址：https://www.cnblogs.com/hekang520/p/14724646.html
