JavaScript的基本使用
一、JavaScript的简单介绍
JavaScript是一种属于网络的脚本语言(简称JS),已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
JavaScript代码常存在于HTML文档中,被script标签所包裹。为了方便多个HTML使用同一份JavaScript代码,也可以将JavaScript代码写在js文件中,需要在HTML文档中使用,导入即可。
1 <script> 2 //JavaScript代码 3 alert(123); 4 </scpript> 5 6 <script type="text/javascript"> 7 //JavaScript代码 8 alert(123); 9 </scpript>
代码存在于HTML文档中
注:script标签可放在HTML文档的head标签内,但建议将其放置在body标签内部的最下方(这样写浏览器会先加载网页的内容,再加载其动态效果)。
二、JavaScript的基本数据类型
JavaScript的基本数据类型有数字(在JS中,数字不区分整型和浮点类型)、数组,字符串,布尔(只用两个值,true和false)。
在JavaScript中申明一个变量:
PI = 3.14 // 声明一个全局变量,赋值3.14, 数字类型var a = 6; // 声明一个局部变量a,为其赋值6,是数字类型 var b = [1,2,3,4] // 数组 var c = "hell world" // 字符串 var d = true // 布尔类型 var e = {'k1':v1, 'k2':v2, 'k3':v3} //字典 c = null // 清空变量c
字符串类型的常用方法:
"string".length 返回字符串长度" string ".trim() 移除字符串的空白 " string ".trimLeft() 移除字符串左侧的空白 " string ".trimRight) 移除字符串右侧的空白 "string".charAt(n) 返回字符串中的第n个字符 "string".concat(string2, string3, ...) 拼接 "string".indexOf(substring,start) 子序列起始位置 "string".lastIndexOf(substring,start) 子序列终止位置 "string".substring(from, to) 根据索引获取子序列 "string".slice(start, end) 切片 "string".toLowerCase() 将字符串转为大写 "string".toUpperCase() 将字符串抓为小写 "string".split(delimiter, limit) 以特定字符分割字符串// 与正则表达式搭配使用 "string".search(regexp) 从头开始匹配,返回匹配成功的第一个位置(g无效) "string".match(regexp) 全局搜索,如果正则中有g表示找到"string".replace(regexp, replacement) 替换,正则中有g则替换所有,否则只替换第一个匹配项,$数字:匹配的第n个组内容;$&:当前匹配的内容;$`:位于匹配子串左侧的文本;$':位于匹配子串右侧的文本$$:直接量$符号
数组类型的常用方法:
obj.length 数组的大小obj.push(ele) 尾部追加元素 obj.pop() 从尾部弹出元素 obj.unshift(ele) 头部插入元素 obj.shift() 头部移除元素// 可用此句完成对数组的插入,删除,替换操作 obj.splice(start, deleteCount, value, ...) 从start位置开始,删除deleteCount个元素,插入value,...obj.slice( ) 切片 obj.reverse( ) 反转 obj.join(sep) 将数组元素连接起来以构建一个字符串 obj.concat(val,..) 连接数组 obj.sort( ) 对数组元素进行排序
四、JavaScript的选择和循环语句
与其他编程语言类型,JS也有三种程序执行流程,即顺序,选择,和循环。
1 if (判断条件){ 2 // js代码 3 }else if(判断条件){ 4 // js代码 5 }else{ 6 // js代码 7 } 8 9 // 常用判断符号与逻辑符号 10 && 逻辑与 11 || 逻辑或 12 > < 大于 小于 13 == != 判断值 14 === !== 判断值和类型
选择语句_1
1 // x代指变量,case为x不动的取值情况,defult当上面的case都不满足执行defult,相当于else 2 switch(x){ 3 case '1': 4 var i = 1; 5 break; 6 case '2': 7 var i = 2; 8 break; 9 case '3': 10 var i = 3; 11 break; 12 defult: 13 i = 0; 14 }
选择语句_2
1 1. 循环时循环的是索引 2 a = [11,22,33]; 3 for (var item in a){ 4 console.log(a[item]); // 在浏览器的console中打印a[item]的值,item是索引 5 } 6 7 8 a = {'k1':'v1', 'k2':'v2', 'k3':'v3'}; 9 for (var item in a){ 10 console.log(a[item]); 11 } 12 13 2. 常规for循环 14 for (var i=0; i<10; i++){ 15 //js代码 16 }
for循环
1 var len = 10; 2 var i = 0; 3 while(i < len){ 4 console.log(i); // 代指js代码 5 i++; 6 }
while循环
五、JavaScript的函数申明
与其他编程语言类型,JS也有函数,在JS中申明一个函数特别简单。
// 常规函数 function funcname(a, b, c) {var a = 0; // JS代码块 }
// 匿名函数,匿名函数只有某一块代码使用,在声明时已经确定由谁来执行它 setIntervar(function(){console.log(123); // js代码块 }, 5000)
// 自执行函数,函数声明完后立即执行并且不会被其他代码调用 (function(arg){console.log(arg); //js代码块 })(1)
六、JS面向对象
在JavaScript中,面向对象其实是函数的一种变种,与函数的定义非常类似。
方式一:
// 定义一个类 function Foo(n){this.name = n; // 属性// 方法this.sayHello = function(){console.log("hello,", name);} }// 实例化一个对象 var obj = new Foo('abc'); obj.name; // 调用属性 obj.sayHello(); // 调用方法
方式二:
function Foo(n){this.name = n; }Foo.prototype = {'sayHello': function(){console.log("hello,", this.name);} }var obj = new Foo('abc'); obj.name; obj.sayHello();
注:通常使用方式二来定义和使用一个对象。
七、JavaScript中常用的系统方法
1. 定时器,每隔特定的时间执行一次特定的任务,用途十分广泛。
var a = setInterval(function(){console.log('hello');}, 间隔时间);clearInterval(a); // 清除定时器
2. 超时器,设置一段时间,比如5秒钟,当时间超过5秒钟后执行某一任务。
var b = setTimeout(funciton(){console.log('hello')}, 5000); // 设置超时器 clearTimeout(b); // 清除超时器,比如当用户执行某一操作后,取消超时器使用它
3. 弹出提示框
alert('message') // message代指要提示的信息
4. 弹出确认框
// 向用户弹出一个确认框,如果用户选择确认,v=true;否则,v=false。 var v = confirm('message') // message为确认提示信息,比如真的要删除吗?
5. 刷新页面
location.reload(); // 执行此方法浏览器自动刷新当前页面,可以和定时器配合使用用以定时刷新页面
6. 页面跳转
location.href // 获取当前页面的url location.href = url; // 从当前页面跳转到指定url,可与超时器配合使用,做网站的页面跳转 location.href = location.href; // 与location.reload()效果相同,刷新当前页面
7. eval(使用eval,可将字符串转换成代码执行)
var s = '1+2'; var a = eval(s); console.log(a);
8. 序列化
序列化试将一个对象转化成字符串,方便存储,打印等。在任何一门编程语言中都存在序列化。
而反序列化是将读取到的字符串转化为对象,方便程序使用。
在js中,序列化与反序列画的操作如下:
ls = [1,2,3,4]; s = JSON.stringify(ls); //object ---> string console.log(s); new_ls = JSON.parse(s) //string ---> object console.log(new_ls);
9. 字符串的编码与解码
为了能够在所有计算机上识别出字符串,在传输过程中要对字符串编码,传输完成后要对字符串解码。
escape(str) // 对字符串编码 unescape(str) // 对字符串解码 encodeURI() // 对URI编码 decodeURI() // 对URI解码与encodeURI() 对应 encodeURIComponent() // 对URI编码 decodeURIComponent() // 对URI解码与encodeURIComponent() 对应
八、触发JavaScript的事件
当我们用鼠标点击浏览器界面中的一个按钮时就触发了一个事件(即点击事件),类似的还有很多其他事件,比如当鼠标移动到某个标签上,光标选中某个输入框等,这些都是事件,那么就,接下来就介绍一下一些常用的事件。
标签绑定事件的方式:
对div标签绑定点击事件 方式一: <div id="i1" οnclick="funcname">点我</div> 方式二:<div id="i1">点我</div> tag = document.getElementById("i1"); tag.onclick = funciton () {console.log("div i1");}; 方式三:<div id="i2">点我</div> tag = document.getElementById("i2"); tag.addEventListener("click", function () {console.log("div i2"); }, false);
注:使用方式二和方式三可做到事件与标签相分离,在测试代码时,可以使用方式一绑定标签与事件,在日常编程中建议使用方式二和方式三。
常用的事件有:
onclick --- 鼠标点击执行js函数 onfocus --- 光标选中执行js函数 onblur --- 光标移走执行js函数 onmouseover --- 鼠标移到某个标签执行js函数 onmouseout --- 鼠标从某个标签移走执行js函数
八、使用JavaScript完成一些常用功能
1. HTML中的模态对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .c2{ 9 background-color: black; 10 opacity: 0.4; 11 z-index: 8; 12 position: fixed; 13 top: 0; 14 right: 0; 15 bottom: 0; 16 left: 0; 17 18 } 19 .c3{20 background-color: white; 21 z-index: 9; 22 height: 200px; 23 width: 500px; 24 position: fixed; 25 top: 25%; 26 left: 50%; 27 margin-left: -250px; 28 } 29 .hid{30 display: none; 31 } 32 </style> 33 </head> 34 <body style="margin: 0 auto;"> 35 <div> 36 <table style="border: 1px solid red" border="1"> 37 <thead> 38 <tr> 39 <th>host</th> 40 <th>port</th> 41 </tr> 42 </thead> 43 <tbody> 44 <tr> 45 <td>1.1.1.1</td> 46 <td>1111</td> 47 </tr> 48 <tr> 49 <td>1.1.1.2</td> 50 <td>1112</td> 51 </tr> 52 <tr> 53 <td>1.1.1.3</td> 54 <td>1113</td> 55 </tr> 56 </tbody> 57 </table> 58 </div> 59 <div> 60 <input type="button" value="添加" onclick="ShowModel();"/> 61 </div> 62 63 <!--遮罩层--> 64 <div id="i2"; class="c2 hid"></div> 65 <!--对话框--> 66 <div id="i3" class="c3 hid"> 67 <fieldset style="border: 1px solid red;"> 68 <legend>添加</legend> 69 <div> 70 <label>host:</label> 71 <input type="text"/> 72 </div> 73 <div> 74 <label>port:</label> 75 <input type="text"/> 76 </div> 77 <p> 78 <input type="button" value="取消" onclick="HiddenModel();"/> 79 <input type="button" value="确定"/> 80 </p> 81 </fieldset> 82 </div> 83 84 <script> 85 function ShowModel() { 86 tag = document.getElementById('i2').classList.remove('hid'); 87 tag = document.getElementById('i3').classList.remove('hid'); 88 } 89 function HiddenModel() { 90 tag = document.getElementById('i2').classList.add('hid'); 91 tag = document.getElementById('i3').classList.add('hid'); 92 } 93 </script> 94 </body> 95 </html>
View Code
2. HTML中的全选,反选,取消按钮
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <div> 10 <input type="button" value="全选" onclick="checkedAll();"/> 11 <input type="button" value="反选" onclick="reverseAll();"/> 12 <input type="button" value="取消" onclick="cancelAll();"/> 13 </div> 14 15 <table style="border: 1px solid red;" border="1"> 16 <thead> 17 <tr> 18 <th>opotion</th> 19 <th>host</th> 20 <th>port</th> 21 </tr> 22 </thead> 23 <tbody id="i3"> 24 <tr> 25 <td><input type="checkbox"></td> 26 <td>1.1.1.1</td> 27 <td>1111</td> 28 </tr> 29 <tr> 30 <td><input type="checkbox"></td> 31 <td>1.1.1.2</td> 32 <td>1112</td> 33 </tr> 34 <tr> 35 <td><input type="checkbox"></td> 36 <td>1.1.1.3</td> 37 <td>1113</td> 38 </tr> 39 <tr> 40 <td><input type="checkbox"></td> 41 <td>1.1.1.4</td> 42 <td>1114</td> 43 </tr> 44 <tr> 45 <td><input type="checkbox"></td> 46 <td>1.1.1.4</td> 47 <td>1114</td> 48 </tr> 49 <tr> 50 <td><input type="checkbox"></td> 51 <td>1.1.1.5</td> 52 <td>1115</td> 53 </tr> 54 </tbody> 55 </table> 56 </div> 57 <script> 58 function checkedAll() { 59 var tags = document.getElementById("i3").children; 60 for (var i in tags) { 61 var checkbox = tags[i].firstElementChild.firstElementChild; 62 checkbox.checked = true; 63 } 64 } 65 66 function cancelAll() { 67 var tags = document.getElementById("i3").children; 68 for (var i in tags) { 69 var checkbox = tags[i].firstElementChild.firstElementChild; 70 checkbox.checked = false; 71 } 72 } 73 74 function reverseAll() { 75 var tags = document.getElementById("i3").children; 76 for (var i in tags) { 77 var checkbox = tags[i].firstElementChild.firstElementChild; 78 if (checkbox.checked) { 79 checkbox.checked = false; 80 } 81 else { 82 checkbox.checked = true; 83 } 84 85 } 86 } 87 </script> 88 </body> 89 </html>
View Code
3. 类似于购物商城的左侧菜单栏
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .item { 9 margin-bottom: 15px; 10 } 11 12 .menu {13 background-color: blueviolet; 14 height: 30px; 15 line-height: 30px; 16 font-weight: bolder; 17 } 18 19 .hide {20 display: none; 21 } 22 23 .content{24 background-color: lightseagreen; 25 } 26 </style> 27 </head> 28 <body> 29 30 <div style="height: 150px;"></div> 31 <div style="width: 350px; border: 1px solid red;"> 32 <div class="item"> 33 <div id="i1" class="menu" onclick="ChangeMenu('i1');">菜单1</div> 34 <div class="content"> 35 <div>内容1</div> 36 <div>内容1</div> 37 <div>内容1</div> 38 <div>内容1</div> 39 </div> 40 </div> 41 <div class='item'> 42 <div id="i2" class="menu" onclick="ChangeMenu('i2');">菜单2</div> 43 <div class="content hide"> 44 <div>内容2</div> 45 <div>内容2</div> 46 <div>内容2</div> 47 <div>内容2</div> 48 </div> 49 </div> 50 <div class='item'> 51 <div id="i3" class="menu" onclick="ChangeMenu('i3');">菜单3</div> 52 <div class="content hide"> 53 <div>内容3</div> 54 <div>内容3</div> 55 <div>内容3</div> 56 <div>内容3</div> 57 </div> 58 </div> 59 <div class='item'> 60 <div id="i4" class="menu" onclick="ChangeMenu('i4');">菜单4</div> 61 <div class="content hide"> 62 <div>内容4</div> 63 <div>内容4</div> 64 <div>内容4</div> 65 <div>内容4</div> 66 </div> 67 </div> 68 </div> 69 70 <script> 71 function ChangeMenu(id) { 72 menu = document.getElementById(id); 73 items = menu.parentElement.parentElement.children; 74 75 for (var i=0; i<items.length; i++) { 76 var current_item = items[i].children; 77 current_item[1].classList.add('hide'); 78 } 79 menu.nextElementSibling.classList.remove('hide'); 80 } 81 </script> 82 </body> 83 </html>
View Code
4. 鼠标移到标签某行改变其样式,移走恢复
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table border="1" width="300px"> 9 <tr><td>1</td><td>2</td><td>3</td></tr> 10 <tr><td>1</td><td>2</td><td>3</td></tr> 11 <tr><td>1</td><td>2</td><td>3</td></tr> 12 </table> 13 14 <script> 15 var myTag = document.getElementsByTagName('tr'); // 找到标签 16 17 for (var i=0, len=myTag.length; i<len; i++) { 18 myTag[i].onmouseover = function () { 19 this.style.backgroundColor = "red"; // 改变样式 20 } 21 22 myTag[i].onmouseout = function () { 23 this.style.backgroundColor = ""; //恢复样式 24 } 25 </script> 26 </body> 27 </html>
View Code
5. 搜索框提示信息
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .search{ 8 margin: 0 auto; 9 border: 1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <div style="width: 100%;"> 15 <input id="i1" class="search" type="text" name="keywords" οnfοcus="Focus();" οnblur="Blur();" value="请输入关键字"/> 16 <input type="button" value="搜索"/> 17 </div> 18 19 <script> 20 function Focus() { 21 tag = document.getElementById('i1'); 22 val = tag.value; 23 console.log(val); 24 if (val == "请输入关键字") { 25 tag.value = ""; 26 } 27 } 28 function Blur() { 29 console.log(2); 30 tag = document.getElementById('i1'); 31 val = tag.value; 32 if (val == "") { 33 tag.value = "请输入关键字"; 34 } 35 } 36 37 </script> 38 </body> 39 </html>
View Code
JavaScript的基本使用相关推荐
- 【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
- 【JavaScript总结】JavaScript语法基础:JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
- 【JavaScript总结】JavaScript语法基础:DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
- 【JavaScript总结】JavaScript语法基础:JS编码
运算符 数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
- 【JavaScript总结】JavaScript语法基础:数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
- 【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
- Python:模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
- [JavaScript] JavaScript数组挖掘,不只是讲数组哟(2)
课程来源:后盾人 上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟 数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
- [JavaScript] JavaScript 数组挖掘,不只是讲数组哟
课程来源:后盾人 数组引用类型分析 数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...
- linux下用js生成xml,js2xml:将javascript字符串转换为xml
有时候爬数据遇到像下面这种,数据在script标签中以javascript形式存在. var totalReviewsValue = 32; var averageRating = 4.5; if(t ...
最新文章
- 使用Android内部的DownloadProvider下载文件,并获取cache权限 .
- 海外观察丨未来 10 大科技趋势预测全解读(上)
- MySQL五大约束详解(我有多详细只有我知道小白都能懂哦)
- 如何选购儿童陪伴机器人(非广告)
- BZOJ2333 [SCOI2011]棘手的操作 【离线 + 线段树】
- SpringCloud Zuul(七)之POST Filter
- 周五尾盘上涨,配合周末消息,周一套人的经典实例
- Python zip函数 - Python零基础入门教程
- FF公布融资及FF 91交付规划 IPO之前还需8.5亿美元资金
- NEON在Android中的使用举例【转】
- 计算机网络-路由器广域网配置
- android通电自动开机,【图】改造导航仪,实现通电自动开机!
- 2020年开始,中国程序员前景一片灰暗,是这样吗?
- 解决一直Gradle Build Running的问题
- 如何深入理解PhalApi框架三层结构Api+Domain+Model模式
- 谈谈promise,谈谈微任务
- Windows日志查看工具分享
- 竞价排名对SEO的影响
- 设置电脑主机ip地址
- python opc服务器和客户端互相发送信息并给出实例