js

在浏览器里操作，没有返回值就会显示undefined
var tmp = '大师兄';  # 局部变量
name = '大师兄';  # 全局变量
const age=12  # 定义常量，常量不能修改
let num=1  # 在es6里，let定义的变量没有域解析

 

# 普通函数
function dsx(name, age) {
console.log(name, age);
return '哈哈哈';
}
dsx('axi', 22);

# 匿名函数
<input type="button" value="测试匿名函数" id="i1">
<script>
element = document.getElementById('i1');
element.onclick = function () {
console.log('测试匿名函数')
}
</script>

# javascript的作用域，以函数为作用域，存在作用域链

function out() {
    var name = 'dsx';
    function inner() {
        var name = 'in';
        console.log('里面的：',name);
    }
    console.log('外面的：',name);
    inner();
}
out()  # 先执行console.log('外面的:',name)，如果外面有name就打印name，然后执行inner()，如果里面有name就打印name，里外都没有name就不打印

浏览器->out-->inner，这就是作用域链，只能从里往外找
javaScript在执行函数之前，会把你函数中所有的局部变量，赋一个空值

 

# 字符串的处理方式
定义字符串
var str = '开心就好啊'
字符串操作
str.charAt() 根据角标获取字符串中的某一个字符，str.charAt(0)就获取到第一个字符
str.substring() 根据角标获取字符串子序列，str.substring(0,5)，0是起始位置，5是结束位置
str.length 获取字符串长度
str.concat() 拼接字符串，str.concat('today')，也可以str + '哈哈哈'
str.indexOf() 获取子序列的位置，str.indexOf('心')，返回角标
str.slice() 切片，和str.substring()的用法一样
str.toUpperCase() 小写字母变更为大写
str.toLowerCase() 大写字母变更为小写
str.split('师',1) 切片，返回一个数组，第二个参数为取分割后数组的前x个元素

 

# 数字类型的处理方式
字符串转成整数
parseInt('12.22')
字符串转成小数
parseFloat('12.22')

#布尔类型的处理方式
true，false就两种小写类型，不能大写

# 数组的处理方式
创建数组的第一种方式：
var list = new Array()  # 定义了一个空的list
list[0] = '你好'  # 数组赋值
list[1] = '他好'  # 数组赋值
创建数组的第二种方式：
var list2 = new Array('11','22')
创建数组的第三种方式：
var list3 = ['oppo','lenovo']  # 记住这种就行

 

数组操作
list3.length 数组的长度
list3.push('huawei') 尾部追加参数，打印出数组的长度，在输入list3就能看到所有元素
list3.shift() 获取数组里面的第一个元素并删除该元素
list3.pop() 获取数组里面的最后一个元素并删除该元素
list3.unshift('oppo') 数组里的起始位置插入一个元素，返回数组的长度，在输入list3就能看到所有元素
list3.splice(start, deleteCount, value) 参数1是起始位置
list3.splice(0,0,'apple') 指定位置插入元素，在头部插入一个元素
list3.splice(0,1,'huawei') 指定位置替换元素，在头部替换一个元素，回车会显示被替换的元素
list3.splice(0,1) 指定位置删除元素
list3.slice(0,2) 切片
list3.reverse() 翻转
list3.join('*') 将数组根据分割符拼接成字符串，会打印出拼接后的字符串
list3.concat(['apple']) 数组与数组拼接，不赋值还显示之前的数组
list3.sort() 排序

 

对象的处理方式(dict)
var dict = {'name': 'dsx', 'age': 18, 'sex': '男' };
var age = dict.age;  # 获取值方法一
var name = dict['name'];  # 获取值方法二
delete dict['name']  # 删除key方式一
delete dict.age  # 删除key方式二

 

# if判断，跟python的不一样

<input type="button" value="弹出弹框" id="i1">
<input type="text" id="i2">
<script>
    var target = document.getElementById('i1');
    target.onclick = function () {
        var tmp = document.getElementById('i2').value;
     # 三个等号代表值相同，类型也必须相同，if(tmp===1)，把所有的判断语句里的两个等号换成三个等号
     # 两个等号代表值可以相同，类型可以不同
        if (tmp == 1) {
            alert('tmp=1')
        } else if (tmp == 2) {
            alert('tmp=2')
        } else {
            alert('none')
        }
    }
</script>

 

打断点是在Sources里找到文案，点击行号，用鼠标括起来就会显示内容，F11是下一步的意思
修改了代码不想再打开一个新的浏览器的话，要在之前的浏览器里展示的话，可以右键刷新按钮，选中清空缓存并硬性重新加载，就可以刷新代码

 

# js里面的and用&&表示，or用||表示，!=还是一样的!=

<input type="button" value="弹出弹框" id="i1">
<input type="text" id="i2">
<input type="text" id="i3">
<script>
    var target = document.getElementById('i1');
    target.onclick = function () {
        var tmp = document.getElementById('i2').value;
        var name = document.getElementById('i3').value;
        if (tmp == 18 && name == 'ssj') {
            alert('ssj18岁')
        } else if (tmp == 19 || name == 'syy') {
            alert('syy19岁')
        } else {
            alert('none')
        }
    }

 

if用法(登录)

<input type="text" placeholder="请输入用户名" id="username">
<input type="password" placeholder="请输入密码" id="password">
<input type="button" onclick="login()" value="登录">
<script>
     function login() {
     var username='ssj';  // 每行后面都要有;
     var password='123456';
     var user = document.getElementById('username').value;
     var passwd = document.getElementById('password').value;
     console.log('username-->'+user);
     console.log('password-->'+passwd);
     if (user == username && passwd == password) {    // js里的if判断语法(){}
         console.log('登录成功！')
     }else if (user != username) {
         console.log('用户名不正确！')
     }else if (passwd != password){
         console.log('密码不正确！')
     }else {console.log('用户名和密码都不正确！')}
 }
</script>

# switch用法

<input type="text" placeholder="请输入用户名" id="username">
<input type="password" placeholder="请输入密码" id="password">
<input type="button" onclick="login()" value="登录">
<input type="button" onclick="test()" value="测试">
<script>
    function test() {
        var s = document.getElementById('username').value;
        switch (s) {
        case 'dsx':
            console.log('这是大师兄');
            break;
        case 'nhy':
            console.log('这是牛牛');
            break;
        default:
            console.log('none');
    }

    }

</script>

 

# for循环方法一，把加粗的代码复制到console下，点击弹出弹框的按钮，会打印出list里面的值，支持数组和字典的循环，用的多

<input type="button" value="弹出弹框" id="i1" onclick="loop_demo()">

    function loop_demo() {
        var li = ['benz','bmw','toyota'];  # 也可以var li = {'benz':'奔驰400','bmw':'宝马'};

        for (var i in li){
            console.log(li[i])  // console.log(li)打印出值，console.log(i)打印出下标

        }
    }

function test() {
    var d = {'name': 'paul','age': 35};  // 字典循环
    for (k in d) {
        console.log(k);  // 打印key
        console.log(d[k])  //打印value
    }
}

 

# for循环方法二，不支持字典的循环，因为循环的是数字，不是key，所以不支持字典

<input type="button" value="弹出弹框" id="i1" onclick="loop_demo()">
<input type="text" id="i2" placeholder="switch">
<script>
    function loop_demo() {
        var li = ['benz','bmw','toyota'];
        for (var i=0;i<li.length;i++){
            console.log(li[i])
        }
    }    

 

# while循环，基本用不到

<input type="button" value="弹出弹框" id="i1" onclick="loop_demo()">
<input type="text" id="i2" placeholder="switch">
<script>
    function loop_demo() {
        var li = ['benz','bmw','toyota'];
        while (1==1){
            console.log('你好啊');
            break;
        }
    }    

 

# 面向对象

function Foo() {
    this.name = 'dsx';
    this.say = function () {
        console.log(this.name);
    }
}
var obj = new Foo();
obj.say();

function Foo(name) {
    this.name = name;
}
Foo.prototype = {
    say:function () {
        console.log(this.name);
    }
};
var obj = new Foo('dsx');
obj.say();

 

# 序列化

var str = {'宝马': 'BMW', '奔驰': 'BC'};
var tmp = JSON.stringify(str) # 序列化，将字典转成json串，输入tmp会打印出"{"宝马":"BMW","奔驰":"BC"}"
JSON.parse(tmp) # 反序列化，将json串转成字典，打印出{宝马: "BMW", 奔驰: "BC"}

 

# 转义中文或特殊字符
var url = 'url'
输入url会打印出下面的url
"https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&"
encodeURIComponent(url)打印出"看不懂的url"
decodeURIComponent("看不懂的url")打印出能看懂的url

 

# 转义
var name = '哈哈哈';
escape(name) # 字符串转义，转成看不懂的"%u54C8%u54C8%u54C8"
unescape("%u54C8%u54C8%u54C8") # 转义字符串解码，转成能看懂的字符串

输入用户名、密码和确认密码，点击注册按钮，弹出注册成功！的逻辑用下面的代码实现

<!--作业-->
    <!--1、http://doc.nnzhp.cn/index.php?s=/5&page_id=7 抽奖系统开发页面-->
    <!--2、正常交互 尽量美观-->
    <!--除了添加奖品之外，都用ajax提交-->
    <!--中奖纪录 要求用到for 将中奖的结果写在下方-->
<form id="req">
    <input type="text" placeholder="用户名(长度>6位，<10位)" name="username">
    <input type="password" placeholder="密码" name="pwd">
    <input type="password" placeholder="确认密码"name="cpwd">
    <input type="button" value="注册" id="req_button">
    <input type="reset">
</form>
<script src="jquery-1.11.1.min.js"></script> <!--引入jquery，导入ajax-->
<script>
    var req_obj = document.getElementById('req_button');// 定位到button，进行绑定事件
    req_obj.onclick = function (){
        $.ajax({
                url:'http://api.nnzhp.cn/api/user/user_reg',
                type:'POST',
                data:$('#req').serialize(),// 带着什么东西去
                success:function(data){    // 从服务器返回来时候拿什么东西
                    // console.log(data);
                    if (data.error_code != 1000){
                        alert(data.msg);// 点击注册按钮，当接口调用成功时，处理返回数据
                    }else {
                        // 创建标签   2种方法  第一种对象的方式 第二种字符串的方式
                        // 用行内标签 span
                        // 主动闭合标签用 innerText
                        // 追加到form表单的最下方
                       var tag = document.createElement('span');
                       tag.innerText = data.msg;
                       document.getElementById('req').appendChild(tag);
                       // 注册成功后清除username，把username的值设为空
                       document.getElementsByName('username')[0].value = '';// 以数组形式返回带有指定名称的元素集合，因为允许多个元素是相同的名称
                    }
                }
            })
        }
</script>
</body>
</html>