javascript
Posted Hesperid
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript相关的知识，希望对你有一定的参考价值。
一、JS介绍
1、浏览器具有解释javascript的功能，所以js是html的三把利器之一。在HTML中可以将js的代码写在head中，被script标签包裹，当浏览器解释HTML时，遇到style标签时，按照css规则解释；遇到script标签，按照js的语法规则解释。
2、引入javaScript代码，类似于python的import
3、三个地方写js代码：
1）html文件head中导入js代码文件可以创建一个js文件，然后在html文件的head里导入该文件<head> <meta charset="UTF-8"> <title>Title</title> <script src="test.js"></script> #src处是js文件的路径</head>
2）head和body里也可以写js代码代码是从上到下执行，一般js是写在body的最下面，所以一般页面都是页面先出来，然后再加载js
二、JS语法
1、局部变量和全局变量
var demo=\'局部变量\'
demo1=\'全局变量\'
2、字符串
var str=\'你好\'
var str2=\'你好2\' #定义字符串
var str3=str+str2 #字符串拼接
字符串操作：
str.charAt(0) 根据脚标获取字符串的某一个字符，char字符
str.substring(1,3) 切片，顾头不顾尾
str.length 获取字符串长度
str.concat(\'拼接字符串\') 拼接字符串
str.indexOf(\'大师\') 获取该第一个字符的脚标位置
str.slice(0,1) 切片，顾头不顾尾，同substring
str.toLowerCase() 变更为小写
str.toUpperCase() 变更为大写
str.split(\'d\',1) 根据第一个参数的字符\'d\'切片，把字符串分割成一个数组，参数2是取分割后数组的前x个元素
3、数字类型
var age=18
var score=85.55 定义数字类型
var strnum=\'19\'
parseInt(strnum) 把字符串转换成int类型的数字
var strnum2=\'19.88\'
parseFloat(strnum2) 把字符串转换成float类型的数字
4、布尔类型
var t=true
var f=false #都是小写
5、数组类型
var list=[]
list[0]=\'aaa\' 第一种方式：创建一个数组，并通过脚标赋值
var list2=new Array(\'aa\',\'bb\') 第二种方式：创建数组
数组操作：
list.length 数组的长度
list.push(\'hn\') 尾部增加元素
list.shift() 获取头部元素，并删除该元素；返回的是删除的元素
list.pop() 获取尾部元素，并删除该元素；返回的是删除的元素
list.unshift(\'bb\') 头部增加元素
list.splice(start,deleteCount,value) 即从哪个脚标开始、删除或替换几个数组元素、值
list.splice(n,0,val) 增加一个值，脚标是n；0即删除0个元素
list.splice(n,1,val) 增加一个值，脚标是n，删除之前脚标n的元素；返回的是删除的元素
list.splice(n,1) 删除脚标为n的元素
list.slice(1,2) 切片
list.reverse() 反转
list.join(\'-\') 将数组根据分隔符拼接成字符串
list.concat([\'abc\']) 数组与数组拼接
list.sort() 排序
6、字典
var dict={name:\'hn\',age:18} 创建数组，key值也可以像python一样加引号
dict.age 取值
dict[\'name\'] 取值
delete dict[\'name\'] 删除
delete dict.age 删除
7、if判断
<body> <script> if (1==="1"){ console.log(\'if\') #console.log相当于python的print }else if(1=="1"){ console.log(\'else if\') }else{ console.log(\'else\') } </script> </body> if判断中的符号： ==:只校验值是否相同，不管数据类型；所以1=="1"是成立的 ===:即校验数据类型也校验值；所以1==="1"不成立 !=:只校验值不相等，不管数据类型 !==:校验值和数据类型不相等 &&:and；例如1==1 && 1==2，这个不成立 ||:or；例如1==1 || 1==2，这个成立
8、s wi t h
<body> <script> switch (1){ #这里的1是条件，符合下面case里的某个条件 case 1: console.log(111); #多行代码，每行结束就得加分号 case 2: console.log(222); break; #break的意思是代码到这里就结束；如果不加break，前面的条件就算命中了，代码也会一直往下执行，直到遇到break或结束 #所以每个case下面一般都要加break default: console.log(\'default\') } </script> </body>
9、for循环
<body> <script> var list=[\'hn\',\'wb\'] var dict={"name":"hn","age":"20"} for (var i in list){ console.log(list[i]) #第一种for循环 #这里的i取的是数组的脚标，要想取值得用list[i] } for (var i in dict){ console.log(i,dict[i]) #第一种for循环 #这里的i取的是字典的key值，dict[i]取的是value值 } for (var i=0;i<list.length;i++){ console.log(list[i]) #第二种for循环 #这种循环顺序是：设定i=0；如果i值小于list的长度时，就打印出list[i]，然后i+1；然后再继续判断i+1是否小于list的长度 #此处的i只是单纯的数值，并不是list的脚标，但数值和list脚标数值一样； #这种循环不支持字典的循环 } </script> </body>
10、while循环
<body> <script> while (1==1){ console.log(111); break; #1==1永远成立，所以这是个死循环 #加上break，所以只打印一个111就会结束，否则会一直打印下去 } </script> </body>
11、函数
变量的作用域和python一样
1），普通函数 创建一个普通函数f，f是函数名，a b是形参 <script> function f(a,b){ console.log(a); console.log(b); } </script> 调用： f(1,2) 作用域链：从内到外，一次查找变量 <body> <script> function f(){ var name=\'aaa\'; function f1(){ var name=\'bbb\'; console.log(name) 这个name是bbb } console.log(name); 这个name是aaa f1() } f() </script> </body> 2)，匿名函数 匿名函数没有名字，无法调用时找到，将整个函数当作一个参数传递 eg: l=lambda x:x+1 定义了一个匿名函数，x是形参，这个函数赋给变量l num=l(2) l(2)即调用函数，实参是2 相当于： def f(x): return x+1 f(2) 这里的f(2)相当于上面的num
12、绑定
1，标签直接绑定：直接在标签上绑定js动作；弊端是可以在页面上看见源码 <body> <input type="button" value="登录" id="i1" onclick="f()"> 定义一个按钮，onclick意思是点击按钮会触发函数f <script> function f(){ alert(\'gogogo\') 函数f是出现一个显示gogogo的弹窗 } </script> </body> 2，间接绑定：通过dom定位标签的方式来绑定js动作；这样源码在页面上就不会像标签绑定那么明显；需要用到匿名函数 匿名函数：定义一个函数，函数没有名字，写完直接把它赋值给一个变量，就是匿名函数 <body> <input type="button" value="登录" id="i1" > body里定义一个按钮标签 <script> var input=document.getElementById(\'i1\'); 通过dom定位到这个标签按钮 input.onclick=function(){ alert(\'gogogo 匿名\')； 此处的函数没有名字（有名字的函数 比如上面的f），写完直接赋值给input.onclick，就是匿名函数；更改按钮的属性onclick为点击后出现\'gogogo匿名\'的弹窗 } </script> </body>
onclick() 单击时做操作
ondbclick() 双击时做操作
onmouseover() 鼠标悬浮触发时操作
onmouseout() 鼠标离开悬浮时触发操作
onfocus() 获取光标时做操作
onblur() 失去焦点时做操作
14、面向对象
eg1: <body> <script> function f(name){ this.name=name; 出现this，就说明是一个对象；this和python里的self用法一样 this.say=function(){ 此处也是一个匿名函数 console.log(this.name) } } var obj=new f(\'aaa\'); 给对象创建一个实例，实参是aaa obj.say(); 调用实例对象里的say函数，此处的打印结果是aaa </script> </body> eg2: 需要多次实例化的时候，上面的写法就不适合了（每次实例化都要多实例一次类里的函数，造成重复），需要用到下面类的原型的写法 <body> <script> function f(name){ this.name=name; 类里面就只定义一个变量 } f.prototype={ 把需要用到的函数 json或对象等，写到该类的原型prototype里 say:function(){ say是匿名函数 console.log(this.name) } } var obj=new f(\'aaa\'); var obj2=new f(\'bbb\'); obj.say() 调用实例化对象的函数的时候，先去类的原型里去找这个函数，找不到再去类里去找，这样就避免每次重复的实例 obj2.say() </script> </body>
15、序列化（较重要）
JSON.stringify(obj) 把一个字典对象转化成字符串
JSON.parse(str) 把字符串转化成一个字典对象
16、转义
1，在标准的url规范中是不允许出现中文字符或某些特殊字符的，所以要进行转义
2，比如：&代表参数的链接，如果就是想传&给后端，那么必须转义
decodeURI(url) 不转义url中的字符
decodeURIComponent(url) 不转义url组件中的字符
encodeURI(url) 转义url中的字符
encodeURIComponent(url) 转义url组件中的字符
字符串转义
var name=\'哈哈\'
escape(name) 对字符串转义
unescape(name) 转义字符串解码
17、例子：向后端发送ajax请求，并对返回结果做出判断，把相应文案或弹窗提示到页面上：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="form1"> //这个id用来定位此form表单 <div> <div style="display:inline-block"><label for="user">用户名</label></div> //label可扩展光标点击的范围 <div style="display:inline-block;margin-left:16px"> //display:inline-block样式设置多大就是多大;margin-left:16px是文本框向右挪动16px <input name="username" id="user" type="text" placeholder="用户名"> </div> </div> <div> <div style="display:inline-block"><label for="passwd">密码</label></div> <div style="display:inline-block;margin-left:32px"> //设置margin-left:32px是为了三个文本框页面对齐 <input name="pwd" id="passwd" placeholder="密码" type="text"> </div> </div> <div> <div style="display:inline-block"><label for="confirmpass">确认密码</label></div> <div style="display:inline-block"> <input name="cpwd" id="confirmpass" placeholder="确认密码" type="text"> </div> </div> <div> <input type="button" id="save" value="注册" onclick="save1()"> //函数名不能用save，会报错；点击按钮就会触发save1函数 </div> </form> <script src="jquery-1.11.1.min.js"></script> <!--这个文件用来向后端发送请求的，通过jquery--> <script> function save1(){ $.ajax({ //$是jquery的一种快捷方式，即通过jquery调用ajax向后端发送请求 url:\'http://118.24.3.4/api/user/user_reg\', //请求路径 data:$(\'#form1\').serialize(), //请求参数，$(\'#form1\')等于document.getElementById(\'form1\')；这是jquery提供的一种通过serialize方法自动从form表单的input里获取参数 method:\'post\', //回调函数，当请求执行成功，后端就会把返回值结果灌到data这个参数里，就能拿到返回的数据了 success:function(data){ console.log(data) //打印后端返回的所有结果 console.log(data.code) //打印返回结果里的code字段的值 if (data.code==1000){ var v=document.getElementById(\'user\').value; //从id为user的标签里获取到注册的value值 var str=\'<span>\'+v+\'注册成功</span>\'; //拼接字符串\'xxx注册成功\'，该字符串用于后面创建标签 var div=document.getElementById(\'save\')； //获取到id为save的注册按钮 div.insertAajacentHTML(\'afterEnd\',str) //把上面创建的字符串作为标签插入到注册按钮标签的后面 //如果返回值code是1000，就注册成功，就在页面上的注册按钮的后面打印\'xxx注册成功\' }else { alert(data.msg) //注册失败，就把返回的msg字段文案 以弹窗提示在页面上 } } }) } </script> </body> </html>
以上是关于javascript的主要内容，如果未能解决你的问题，请参考以下文章