JavaScript的基本使用
2018-06-24 01:42:51来源：未知 阅读 ()
一、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文档导入JavaScript代码注：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 // 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 }
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 }
1 var len = 10; 2 var i = 0; 3 while(i < len){ 4 console.log(i); // 代指js代码 5 i++; 6 }
五、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" onclick="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>
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>
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>
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>
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" onfocus="Focus();" onblur="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>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
相关文章
- javascript面向对象入门基础详细介绍 2020-03-29
- 关于jQuery UI 使用心得及技巧 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签