AI智能
改变未来

JavaScript(JS)的简单使用

一、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>56 <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 }89 // 常用判断符号与逻辑符号10 &&    逻辑与11 ||    逻辑或12 >  <   大于  小于13 == !=   判断值14 === !==   判断值和类型选择语句_1
1 // x代指变量,case为x不动的取值情况,defult当上面的case都不满足执行defult,相当于else2 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 }678 a = {\'k1\':\'v1\', \'k2\':\'v2\', \'k3\':\'v3\'};9 for (var item in a){10     console.log(a[item]);11 }1213 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 }

四、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);     // 清除定时器
  1. 超时器,设置一段时间,比如5秒钟,当时间超过5秒钟后执行某一任务。
var b = setTimeout(funciton(){console.log(\'hello\')}, 5000);    //  设置超时器clearTimeout(b);    // 清除超时器,比如当用户执行某一操作后,取消超时器使用它
  1. 弹出提示框
alert(\'message\')    // message代指要提示的信息
  1. 弹出确认框
//  向用户弹出一个确认框,如果用户选择确认,v=true;否则,v=false。var v = confirm(\'message\')   // message为确认提示信息,比如真的要删除吗?
  1. 刷新页面
location.reload();   // 执行此方法浏览器自动刷新当前页面,可以和定时器配合使用用以定时刷新页面
  1. 页面跳转
location.href   // 获取当前页面的urllocation.href = url;   // 从当前页面跳转到指定url,可与超时器配合使用,做网站的页面跳转location.href = location.href;  //  与location.reload()效果相同,刷新当前页面
  1. eval(使用eval,可将字符串转换成代码执行)
var s = \'1+2\';var a = eval(s);console.log(a);
  1. 序列化

序列化试将一个对象转化成字符串,方便存储,打印等。在任何一门编程语言中都存在序列化。

而反序列化是将读取到的字符串转化为对象,方便程序使用。

在js中,序列化与反序列画的操作如下:

ls = [1,2,3,4];s = JSON.stringify(ls);       //object  --->  stringconsole.log(s);new_ls = JSON.parse(s)           //string  --->  objectconsole.log(new_ls);
  1. 字符串的编码与解码

为了能够在所有计算机上识别出字符串,在传输过程中要对字符串编码,传输完成后要对字符串解码。

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中的模态对话框**
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>.c2{background-color: black;opacity: 0.4;z-index: 8;position: fixed;top: 0;right: 0;bottom: 0;left: 0;}.c3{background-color: white;z-index: 9;height: 200px;width: 500px;position: fixed;top: 25%;left: 50%;margin-left: -250px;}.hid{display: none;}</style></head><body style=\"margin: 0 auto;\"><div><table style=\"border: 1px solid red\" border=\"1\"><thead><tr><th>host</th><th>port</th></tr></thead><tbody><tr><td>1.1.1.1</td><td>1111</td></tr><tr><td>1.1.1.2</td><td>1112</td></tr><tr><td>1.1.1.3</td><td>1113</td></tr></tbody></table></div><div><input type=\"button\" value=\"添加\" onclick=\"ShowModel();\"/></div><!--遮罩层--><div  id=\"i2\"; class=\"c2 hid\"></div><!--对话框--><div id=\"i3\" class=\"c3 hid\"><fieldset style=\"border: 1px solid red;\"><legend>添加</legend><div><label>host:</label><input type=\"text\"/></div><div><label>port:</label><input type=\"text\"/></div><p><input type=\"button\" value=\"取消\" onclick=\"HiddenModel();\"/><input type=\"button\" value=\"确定\"/></p></fieldset></div><script>function ShowModel() {tag = document.getElementById(\'i2\').classList.remove(\'hid\');tag = document.getElementById(\'i3\').classList.remove(\'hid\');}function HiddenModel() {tag = document.getElementById(\'i2\').classList.add(\'hid\');tag = document.getElementById(\'i3\').classList.add(\'hid\');}</script></body></html>
  1. HTML中的全选,反选,取消按钮
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><body><div><div><input type=\"button\" value=\"全选\" onclick=\"checkedAll();\"/><input type=\"button\" value=\"反选\" onclick=\"reverseAll();\"/><input type=\"button\" value=\"取消\" onclick=\"cancelAll();\"/></div><table style=\"border: 1px solid red;\" border=\"1\"><thead><tr><th>opotion</th><th>host</th><th>port</th></tr></thead><tbody id=\"i3\"><tr><td><input type=\"checkbox\"></td><td>1.1.1.1</td><td>1111</td></tr><tr><td><input type=\"checkbox\"></td><td>1.1.1.2</td><td>1112</td></tr><tr><td><input type=\"checkbox\"></td><td>1.1.1.3</td><td>1113</td></tr><tr><td><input type=\"checkbox\"></td><td>1.1.1.4</td><td>1114</td></tr><tr><td><input type=\"checkbox\"></td><td>1.1.1.4</td><td>1114</td></tr><tr><td><input type=\"checkbox\"></td><td>1.1.1.5</td><td>1115</td></tr></tbody></table></div><script>function checkedAll() {var tags = document.getElementById(\"i3\").children;for (var i in tags) {var checkbox = tags[i].firstElementChild.firstElementChild;checkbox.checked = true;}}function cancelAll() {var tags = document.getElementById(\"i3\").children;for (var i in tags) {var checkbox = tags[i].firstElementChild.firstElementChild;checkbox.checked = false;}}function reverseAll() {var tags = document.getElementById(\"i3\").children;for (var i in tags) {var checkbox = tags[i].firstElementChild.firstElementChild;if (checkbox.checked) {checkbox.checked = false;}else {checkbox.checked = true;}}}</script></body></html>
  1. 类似于购物商城的左侧菜单栏
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>.item {margin-bottom: 15px;}.menu {background-color: blueviolet;height: 30px;line-height: 30px;font-weight: bolder;}.hide {display: none;}.content{background-color: lightseagreen;}</style></head><body><div style=\"height: 150px;\"></div><div style=\"width: 350px; border: 1px solid red;\"><div class=\"item\"><div id=\"i1\" class=\"menu\" onclick=\"ChangeMenu(\'i1\');\">菜单1</div><div class=\"content\"><div>内容1</div><div>内容1</div><div>内容1</div><div>内容1</div></div></div><div class=\'item\'><div id=\"i2\" class=\"menu\" onclick=\"ChangeMenu(\'i2\');\">菜单2</div><div class=\"content hide\"><div>内容2</div><div>内容2</div><div>内容2</div><div>内容2</div></div></div><div class=\'item\'><div id=\"i3\" class=\"menu\" onclick=\"ChangeMenu(\'i3\');\">菜单3</div><div class=\"content hide\"><div>内容3</div><div>内容3</div><div>内容3</div><div>内容3</div></div></div><div class=\'item\'><div id=\"i4\" class=\"menu\" onclick=\"ChangeMenu(\'i4\');\">菜单4</div><div class=\"content hide\"><div>内容4</div><div>内容4</div><div>内容4</div><div>内容4</div></div></div></div><script>function ChangeMenu(id) {menu = document.getElementById(id);items = menu.parentElement.parentElement.children;for (var i=0; i<items.length; i++) {var current_item = items[i].children;current_item[1].classList.add(\'hide\');}menu.nextElementSibling.classList.remove(\'hide\');}</script></body></html>
  1. 鼠标移到标签某行改变其样式,移走恢复
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><body><table border=\"1\" width=\"300px\"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table><script>var myTag = document.getElementsByTagName(\'tr\');  // 找到标签for (var i=0, len=myTag.length; i<len; i++) {myTag[i].onmouseover = function () {this.style.backgroundColor = \"red\";   // 改变样式}myTag[i].onmouseout = function () {this.style.backgroundColor = \"\";     //恢复样式}</script></body></html>
  1. 搜索框提示信息
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>.search{margin: 0 auto;border: 1px solid red;}</style></head><body><div style=\"width: 100%;\"><input id=\"i1\" class=\"search\" type=\"text\" name=\"keywords\" onfocus=\"Focus();\" onblur=\"Blur();\" value=\"请输入关键字\"/><input type=\"button\" value=\"搜索\"/></div><script>function Focus() {tag = document.getElementById(\'i1\');val = tag.value;console.log(val);if (val == \"请输入关键字\") {tag.value = \"\";}}function Blur() {console.log(2);tag = document.getElementById(\'i1\');val = tag.value;if (val == \"\") {tag.value = \"请输入关键字\";}}</script></body></html>
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » JavaScript(JS)的简单使用