在浏览器里操作，没有返回值就会显示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>