公告
欢迎来到我的博客，这里记录生活与技术。
2418 字
12 分钟
JavaScript
JavaScript
1. 什么是JavaScript
-
简称：JS
-
它是运行在客户端浏览器中的脚本语言
JavaScript和Java
Java语言
-
厂商：Oralce Sun
-
面向对象的语言：强类型语言
-
程序启动时
-
编译
-
解析
-
运行
-
JavaScript语言
-
厂商：网景
-
解释型语言：弱类型语言
-
程序启动时
- 直接解析运行
javaScript语言结构
-
语法规则：ECMAScript
- 关键字、语句、结构体、…
-
BOM
- broswer object model：浏览器对象模型
-
DOM
- document object model：文档对象模型(常用)
-
事件
- js提供各类事件用于动态功能的实现
js使用方式
js片
-
如果js代码比较少、比较简洁，可以直接放到html页面中
-
需要在<head>标签中通过<script>标签进行设置
示例
<html>
<head> <title>标题</title> <script> //javascript代码 </script></head>
<body> <!-- 页面内容 --></body>
</html>js文件
-
如果js代码比较多、实现的业务功能比较复杂，直接创建一个js文件，建议不要放到html页面中
-
创建一个js文件，将javascript代码放入到此文件中
-
需要在<head>标签中通过<script>标签进行导入
示例
<html>
<head> <title>标题</title> <script src="js文件地址"></script></head>
<body> <!-- 页面内容 --></body>
</html>javascript数据类型
注意：JavaScript语言没有数据类型
五大原生类型
-
string：字符串
-
number：数字
-
boolean：逻辑
-
null：空
-
undefined：未定义
定义变量
由于js中没有数据类型的概念，所以，需要使用关键字var
格式
<script> var 变量名称=初始化数据值;</script>示例
<script> var name = "张三" var age = 20; var sex = '男' alert('姓名:' + name + ',年龄:' + age + ",性别:" + sex); console.log('姓名:' + name + ',年龄:' + age + ",性别:" + sex) console.log("name变量数据种类:" + typeof name + ",age:" + typeof age + ",sex:" + typeof sexx)</script>js注程控制
分支
-
if
-
switch
循环
-
for
-
while
- do…while
js运算符
判断
注意：与Java语言类似
== 和 ===
<script> var v1 = "10"; //string -> number var v2 = 10; //number if (v1 === v2) console.log("相等") else console.log("不相等")</script>==：只判断数据是否相等。忽略数据种类
===：先判断数据种类，再判断数据值
精度损失
示例
<script> var v1 = 123 console.log("v1数据值:" + v1 / 1000 * 1000);</script>-
注意区别：
-
Java：由于Java语言有精度损失，所以结果为：0
-
JS：由于JS没有数据类型的概念，所以不会产生精度损失，结果：123
-
字符串相加、相减
-
注意：两个字符串相加与Java语言是一样的。实现的是字符串拼接
-
注意：Java语言字符串不中允许相减，但是JS中是允许
-
示例
<script> var v1 = "123" var v2 = "23" console.log("结果:" + (v1 - v2));</script- 注意：如果运算的数据不是一个数字，结果为：NaN
布尔
-
JS中除了true/false之外，还可以使用0、非0值代码true和false
-
示例
<script> var v1 = true; var v2 = false; if (v1 == true) console.log("结果:相等"); if (v1 == 1) console.log("结果:相等") else console.log("结果:不相等") if (v2 == 0) console.log("结果:不相等(false)")</script>引入知识点
借助于DOM对象(document)与页面进行数据交互
示例
<script> var name = "张三" var age = 20; var sex = '男' var str = "<table border='1'>"; for (var i = 1; i <= 9; i++) { str += "<tr>"; for (var j = 1; j <= i; j++) { str += "<td>" + j + "*" + i + "=" + (i * j) + "</td>" } str += "</tr>"; } str += "</table>" document.write(str)</script>JavaScript中的数组
注意：与Java中对数组的定义与操作完全不一样
js操作数组的3种形式
第一种形式
<script> //对数组进行初始化 var arr = [10, 20, 30] for (var i = 0; i < arr.length; i++) { console.log('数组索引:' + i + "数组元素数据:" + arr[i]); }</script>第二种形式
<script> //通过new关键字创建数组 var arr_obj = new Array(3) arr_obj[0] = 100 arr_obj[1] = 200 arr_obj[2] = 300 for (var i = 0; i < arr_obj.length; i++) { console.log('数组索引:' + i + "数组元素数据:" + arr_obj[i]); }</script>第三种形式
//通过new关键字创建数组var arr_obj = new Array(1000,2000,3000)for(var i=0;i<arr_obj.length;i++){ console.log('数组索引:'+i+"数组元素数据:"+arr_obj[i]); }js数组操作方法
length：取数组长度
concat：数组拼接
join：将数组每一个元素按指定的字符进行连接，并返回一个字符串
push：向数组中压入一个新元素数据
pop：从数组头部弹出一个元素
reverse：反转数组元素中的数据
示例
<script> var arr1 = [10, 20, 30] var arr2 = new Array(100, 200, 300) arr1.push(1) arr1.push(2) arr1.push(3) arr2.pop() var arr3 = arr1.concat(arr2) console.log("数组长度:" + arr3.length); arr3.reverse() var str = arr3.join("_") console.log("拼接数组转字符串:" + str)</script>JavaScript中的函数
-
注意：与Java语言完全不一样
-
需要使用关键字：function 定义
-
与Java语言区别
-
数据类型
-
参数列表
-
虽然没有数据类型的概念，但是也可以使用return关键字
-
格式
//完整格式<script> function myMethod(v1, v2) { //函数体 return 返回值; }</script>//匿名格式<script> var abc=function(){ //函数体 return 返回值; }</script>//匿名格式<script> var abc=()=>{//函数体;return 返回值;}</script>示例
<script> function fun1(v1,v2){ return v1+v2; }
var myFun=function(v1,v2){ return v1*v2 }
var myFun2=(v1,v2)=>v1/v2
var value=fun1(10,20); value=myFun(10,20) value=myFun2(10,20) console.log("结果:"+value)</script>动态函数
格式
var 函数名称=new Function(参数列表,函数体)示例
<script> //定义函数参数列表 var parameter="name,age"; //定义函数体的内容 var body="console.log('name:'+name+',age:'+age)"; //使用JS提供的Function对象组件一个函数 var createFun = new Function(parameter,body);
createFun("张三",20);</script>js片位置问题
js片的位置决定了能否获取body体中的标签元素对象
获取不到：js片在body标签之前
获取到：js片在body标签之后
注意：如果js片必须放到body标签之前，同时还要获取body标签中的元素对象，需要使用JS提供的onload事件(页面加载完毕)
示例
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var value = document.getElementById("v1") console.log("编辑框对象:" + document.getElementById("v1")) console.log("编辑框中的数据是:" + value) } </script></head><body> 数据:<input id="v1" type="text" value="这是一个数据"/></body></html>JavaScript中函数重载问题
注意：JS中没有函数重载的概念，但是可以使用JS提供的arguments参数对象，间接实现函数重载
示例
<script> function fun(){ if(arguments.length==0){ console.log("无参fun方法") }else if(arguments.length==1){ console.log("一个参数的fun方法:"+arguments[0]) }else if(arguments.length==2){ console.log("两个个参数的fun方法:"+arguments[0]+","+arguments[1]); } } fun(100,200)</script>BOM对象
-
BOM：Browser object model 浏览器对象模型
-
简单说：此对象主要操作浏览器本身的功能(不包括页面)，例如：
- 刷新按钮
- 后退按钮
- 前进按钮
- 地址栏
- …
定时器
-
创建定时器
-
setIntervalue
- 每隔指定的时间，执行一次任务
-
setTimeout
- 在指定的时候后，执行一次任务
-
-
清除定时器
-
clearIntervalue
-
clearTimeout
-
示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> function methodInfo(){ var date = new Date() var span = document.getElementById("spanId") span.innerText=date.toLocaleString() }
var setInter='' function start1(){ setInter=setInterval("methodInfo()",1000) } function clear1() { clearInterval(setInter) }
var timeInter='' function start2() { timeInter=setTimeout("alert('定时开始执行')",3000) } function clear2() { clearTimeout(timeInter) } </script></head><body> <div align="center" style="width: 600px;height: 300px"> <span id="spanId"></span> <hr/> <button onclick="start1()">开始</button> <button onclick="clear1()">结束</button> <hr/> <button onclick="start2()">开始</button> <button onclick="clear2()">结束</button> </div></body></html>window对象
-
window对象是JavaScript顶层对象
-
在调用该对象方法时，可以直接写方法，不需要写window对象
信息弹框
alert：信息弹框
confirm：信息确认弹框
prompt：数据输入框
<html lang="en">
<head> <meta charset="UTF-8><title>Title</title><script>function BtnDelete(){if(confirm(" 是否真的执行删除功能吗？")) console.log("执行删除功能"); } function BtnDelete1(){ var num1=prompt("请输入第一个数"); var num2=prompt("请输入第二个数"); console.log("结果:"+(parseInt(num1)+parseInt(num2))) } </script></head>
<body> <button onclick="BtnDelete()">删除</button> <button onclick="BtnDelete1()">运算</button></body>
</html>open：打开一个新窗口
<html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title> <script> function createWindow() { open("demo9.html", "", "width=600,height=700") } </script></head>
<body> 姓名:<input type="text" id="inp_name" /><br /> 年龄:<input type="text" id="inp_age" /><br /> <button onclick="createWindow()">获取数据</button></body>
</html> <html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title> <script> function selectData() { var raidoObj = ''; //获取所有的单选按钮 var radio_select = document.getElementsByName("select"); //循环所有单选按钮 for (var i = 0; i < radio_select.length; i++) { //判断哪个单选按钮被选中了 if (radio_select[i].checked) //将选中的单选按钮,单独存储 raidoObj = radio_select[i]; } //parentNode:获单选按钮上一个标签对象 //nextElementSibling:单选按钮上一个标签对象的下一个标签 //innerHTML:取得标签中的数据 var name = raidoObj.parentNode.nextElementSibling.innerHTML var age = raidoObj.parentNode.nextElementSibling.nextElementSibling.innerHTML var win = opener //获取父窗口对象 //获取父窗口中姓名对应的编辑框对象,并将姓名数据设置到此对象 win.document.getElementById("inp_name").value = name; win.document.getElementById("inp_age").value = age; } </script></head>
<body> <table border="1" width="500"> <tr> <th>选择</th> <th>姓名</th> <th>年龄</th> </tr> <tr> <td><input type="radio" name="select" checked /> </td> <td>刘备</td> <td>20</td> </tr> <tr> <td><input type="radio" name="select" /> </td> <td>关羽</td> <td>19</td> </tr> <tr> <td><input type="radio" name="select" /> </td> <td>张飞</td> <td>18</td> </tr> </table> <button onclick="selectData()">获取选择的数据</button></body>
</html>资源地址
location
<html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title> <script> function btnClick() { var web_value = document.getElementById("inputId").value location.href = web_value } </script></head>
<body> 访问地址:<input type="text" id="inputId" /> <button onclick="btnClick()">访 问</button></body>
</html> JavaScript
https://mizuki.mysqil.com/posts/3javascript/ Web基础
Related articles
部分信息可能已经过时
