• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

javascript

开发技术 开发技术 4小时前 3次浏览

一、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
喜欢 (0)