Javascript
2021/5/1 20:25:20
本文主要是介绍Javascript,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
JavaScript
1.Javascript的介绍
javascipt是运行在浏览器端的脚本语言,由浏览器解释执行的,简称js它能够让网页和用户有交互功能,增加良好的用户体验效果。
前端三大块: 1.HTML (结构)2. CSS(样式) 3.Javascript(行为)
2.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>
3.变量的定义和使用
<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.条件判断比较运算符
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获取和设置标签内容
<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); //弹出4
11循环语句
循环语句就是让一部分代码重复执行,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,...])
这篇关于Javascript的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南
- 2024-09-26Springboot微服务资料入门教程