Web前端之JavaScript
- 1.JavaScript的定义
- 2.javascript的使用方式
- 3.变量和数据类型
- 4.函数定义和调用
- 5.全局变量与局部变量
- 6.条件语句
- 7.获取标签元素
- 8.操作标签元素属性
- 9.数组及操作
- 10.循环语句
- 11.字符串的拼接
- 12.定时器
1.JavaScript的定义
javascrip是运行在浏览器端的脚本语言，是由浏览器解释执行的，它能够让网页和用户交互功能，增加良好的用户体验
前端开发三大块：
- html 负责网页结构
- CSS 负责网页样式
- javascript: 负责网页行为 如网页与用户交互
2.javascript的使用方式
- 行内式（主要用于事件）
<input type='button' name='' onclick='alert('ok!');'>- 内嵌式
<script type='text/javascript'>
alert('ok!');
</script)- 外链式
<scrip type='text/javascript' src='js/index.js'></script><!-- 内嵌式 -->
<script>
alert('我是内嵌式的js代码')
</script>
<!-- 外链式 -->
<script src='js/main.js'>
</script>
</head>
<body>
<!-- javascript的使用 -->
<!--行内式-->
<input type="button" value='按钮' onclick="alert('点击了！')">
</body>3.变量和数据类型
- 定义变量
- javascript是一种弱类型语言，也就是说不需要指定变量的类型。javascript的变量类型是由他的值来决定，定义变量需要关键字’var’ ,一条javascript语句应该以‘ ；’结尾
- 定义变量的语法格式：
- var 变量名=值
- javascript注释
- . 单行注释： //
- 多行注释： /* */
- 数据类型(js中有六种数据类型 ，包括五种基本数据类型和一种复杂数据类型)
- number 数字类型
- string 字符串类型
- boolean 布尔数据类型
- undefined 变量声明未初始化，它的值就是undefined
- null 表示空对象。如果定义的变量将来准备保存对象，可以将变量初始化为null, 在页面上获取不到对象。返回值即就是null
- 复合类型：（和字典类似）
- object 后面的javascript对象属于复合类型
- 变量的命名规则：
- 区分大小写
- 第一个字符必须是字母。下划线 或美元符号 $
- 其他字符可以是字母，下划线，美元符号，数字
- 匈牙利命名风格
- 对象 oObject 如：oDiv
- 数组 a Array 如：altems
- 字符串:s String 如：sUserName
- 整数：i Integer 如：iltemCount
- 布尔值： b Boolean 如：blsComplete
- 浮点数：f Float 如：fPrice
- 函数：fn Function 如： fnHandler
<script>
/* 定义数字类型 */
var iNum = 1;
/* 定义字符串 */
var sName='na';
// 定义布尔类型
var bIsok=true;
// 未定义类型
var unData;
// 定义空类型
var oData=null;
// 定义javascript对象类型
var oPerson={
name:'eph',
age:10
}
alert(iNum);
alert(sName);
alert(unData);
alert(oData);
alert(oPerson.name)
// 查看数据类型使用typeof
alert(typeof(sName));
alert(typeof(unData));
// js之前版本设计时没有null类型数据，null归属于object类型，后来也没有修改
// 现在所知 null 属于null类型
alert(typeof(oData));
alert(typeof(oPerson));
</script>4.函数定义和调用
- 函数定义
函数是可以重复使用的代码块，使用关键字 function 定义函数 - 函数调用
函数调用就是函数名加小括号，如： 函数名（参数，参数，，） - 定义有参数有返回值的函数
定义函数时，函数如果有参数，参数放到小括号，函数如果有返回值，返回值通过return 关键字来返回
函数中return 关键字的作用：
- 返回函数中的值
- 执行完return函数执行结束
<script>
// 定义函数的关键字是function
function fnshow(){
alert('我是一个无参数无返回值的函数')
}
// 调用函数
fnshow();
// 定义有参数，有返回值的函数
function fnshow1(iNum1,iNum2){
var iResult=iNum1+iNum2;
alert('这是有参数有返回值的测试代码');
return iResult;
};
var iNum=fnshow1(1,2);
alert(iNum);
// return 关键的特点：1.可以为函数提供返回值 2.当执行return 语句后，函数执行结束，后面的语句不会执行
</script>5.全局变量与局部变量
变量作用域就是吧变量的使用范围： 变量分为 局部变量 全局变量
- 局部变量 在函数内使用的变量，只能在函数内部使用
- 全局变量 在函数外定义的变量，在函数内可以使用，可以共享全局变量
<script>
// 局部变量： 在函数内部定义的变量，只在函数内部使用
function fnShow(){
var iNum=1;
alert(iNum);
};
// 调用函数
fnShow()
// 全局变量 在函数外定义的叫做全局变量，可以在不同函数内使用，并且不同函数内可以共享全局变量
var iNum2=2;
function fnShow1(){
alert(iNum2);
iNum2++
}
function fnShow3(){
alert(iNum2);
}
fnShow1();
fnShow3();
// 在js中数字和字符类型可以直接相加
</script>6.条件语句
条件语句就是通过条件来控制车程序的走向
- 条件语句的语法：
- if 语句- 只有当条件为true时，使用该语句来执行代码
- if -else
- if-else if - else
- 比较运算符
- == 等于
- === 全等 （值和类型）
- ！= 不等于
- 》 大于
- 《 小于
- 》=大于或等于
- 《= 小于或等于
- 逻辑运算符
- && and
- || or
- ! not 表示对结果的取反
7.获取标签元素
- 获取标签元素
可以使用内置对象 document 上的getElementByld 方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将他赋值给一个变量 document.getElementByld(‘标签’)
如果将代码写在元素的上面就会出错，因为页面从上往下执行，javascript去页面上获取元素 标签的时候，元素还没加载
此时可以使用 window.onload (在页面元素加载完后会执行load事件)
<script>
// js 的内置对象 html 的文档对象
// 如果获取的对象是 null 表示标签没有获取成功
function fnLoad(){
var oP=document.getElementById('p1')
alert(oP)
}
// 页面加载完后会触发 onload事件
// window.onload=fnLoad;
// 使用匿名函数
window.onload=function(){
var oP=document.getElementById('p1')
alert(oP)
}8.操作标签元素属性
- 属性操作
- 首先获取页面标签元素，然后就可以对页面标签元素的属性记性操作，属性的操作包括：
- 属性的读取 将获取的标签给一个变量，用此变量名.属性名 获取此标签的属性
- 属性的设置
- 属性在js中的写法：
- html 的属性和js 里面的属性大多数写法一样，但class 属性写成 className
- style 属性里面的属性，有横杠的改成驼峰式，如 ：font-size–>style.fontSize
- innerHTML
. innerHTML 可以读取或者设置标签包裹的内容
//获取标签
var oDiv=document.getElementById('d');
// 获取标签内容
alert(oDiv.innerHTML);
// 设置标签内容
oDiv.innerHTML="<a href='https://www.baidu.com'>百度</a>";<style>
.btnS{
background:lawngreen;
}
</style>
<script>
window.onload=function(){
// 获取标签
var oBtn=document.getElementById('btn1');
// 获取标签属性
alert(oBtn.type);
alert(oBtn.value);
// 设置标签的属性
oBtn.name='username';
// 设置样式属性
// oBtn.style.background='red';
// 给标签添加已有的类样式 类样式中的样式会被原有的样式覆盖
// class--》className
oBtn.className="btnS";
}
</script>9.数组及操作
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的数据，好比python里面的列表
- 数组定义：
- 实例化对象方式创建数组 var aList=new Array(1,2,3);
- 字面方式创建，推荐使用 var aList=[2,3,‘ww’]
- 多维数组
多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组 - 数组的操作
- 获取数组的长度 var aList=[1,2,3] alert(aList.lenght
- 根据下标取值 var aList=[1,2,3] alert(aList[0])
- 从数组最后添加和删除数据
- 根据下标添加和删除元素
- start 必需，开始删除的索引
- num 可选 ，删除数组元素的个数
- elementN 可选 在start索引位置需要插入的新元素
- 此方法会删除匈start索引开始的num个元素，并将elementN参数插入到start索引位置
<script>
// 实例化对象定义数组
var aList=new Array(1,2,3);
// 字面量方式创建数组，相当于直接赋值一个数组，数组的表现形式是一对中括号
var aList1=[1,2,'www'];
console.log(aList1); //控制台输出
alert(aList1);
//多维数组
var aList2=[[1,2,3],[4,5,6]];
//根据下标取值
alert(aList2[1][2]);
//数组的相关操作
//数组的长度
alert('数组长度：'+aList1.length);
//在js中不支持负数下标
//根据下标修改数据
aList1[2]='http';
alert(aList1);
//追加数据
aList1.push('wpo');
alert(aList1);
//删除最后一个元素, 此处的pop不支持下标删除
var aZ=aList1.pop();
alert(aZ);
alert(aList1);
//插入数据 1:开始删除的索引 0:删除的元素个数 'hello':插入的元素
aList1.splice(1,0,'hello');
alert(aList1);
</script>10.循环语句
循环语句就是让一部分代码重复执行，javascript中常用的循环语句有：
for while do-while
<script>
var aList1=[1,2,'hello','www'];
//for 循环遍历数组
for(var index=0;index<aList1.length;index++){
//根据下标获取数据
var oV=aList1[index];
alert(oV);
}
//while 循环
var index=0;
while(index<aList1.length){
var oV1=aList1[index];
alert(oV1);
index++;
}
//do-while循环 不管条件是否成立，do中的都执行
var index=0;
do{
var oV1=aList1[index];
alert(oV1);
index++;
}while(index<aList1.length)
</script>11.字符串的拼接
字符串拼接直接使用：‘+’ 运算符
<script>
var sName='万物';
var iAge=10;
var sSex='男';
//数字与字符串拼接时，底层会自动将数字转换为字符串，这种操作叫隐式类型转换
alert(iAge+sName);
iAge+=sSex;
alert(iAge);
</script>12.定时器
定时器就是在一段特定的时间后执行某段程序代码
- 使用：
- js定时器有两种创建方式：
- setTimeout 以指定的时间间隔（以毫秒计）调用一次函数的定时器
- 第一个参数：表示定时器要执行的函数名
- 第二个参数：表示时间间隔，默认为0，单位是毫秒
- 第三个参数：param ,表示定时器执行函数的第一个参数，依次类推传入多个执行函数对应的参数
- setIntervall 以指定的时间间隔（一毫秒计）重复调用一个函数的定时器
<script>
function fnShow(a){
alert('传入的值为：'+a);
alert(tid);
//销毁定时器
clearTimeout(tid);
}
// 根据时间间隔调用一次函数的定时器
// 定时器要执行的函数
// 时间间隔
// 函数参数
//返回值表示创建的定时器返回的id,也就是创建的第几个定时器
var tid=setTimeout(fnShow,500,3)
function fnShow1(){
alert('hello word');
}
function fnStop(){
clearInterval(tid1);//销毁定时器
}
//执行时间间隔重复函数的定时器
var tid1=setInterval(fnShow1,5000);
</script>
</head>
<body>
<!-- 定时器：根据指定的时间间隔延时调用函数 -->
<input type="button" value='停止' onclick='fnStop();'>- 金身本无相，万相由心生
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
