字符串
String 用来处理文本（字符串）
字符串的创建
1. 字面量的创建方式
// 字面量的声明
var str = "sfssfsf"; // 用""或者是''括起来的字段就叫字符串
2.通过new的方式 (构造函数创建)
// 构造函数创建
var str = new String('hello'); // 新创建一个对象，并且把存放的值赋予给对象
3. 直接使用String()创建
// 直接使用String() 来去创建
var str = String('hello'); // 直接办存放的值转换为最原始的字符串并返回值
属性：length
字符串的length是其字符串中所有字符的长度
获取字符串的长度
var str = 'www.baidu.com';
console.log(str.length)
方法:
1.charAt()
在字符串中获取某个位置的字符
// charAt()
var s = str.charAt(10);
console.log(s);
2. charCodeAt()
获取字符串中某个位置的字符对应的Unicode编码
3.indexOf()
// 对字符串进行检索
// 返回回来的值是检索字符在字符串中的下标，没有检索到返回值是-1
// 检索时时把检索的字符当做是一个整体来处理
var str = 'www.baidu.com';
var ind = str.indexOf('comn');
console.log(ind);
4.match()
找到匹配正则表达式的集合
var str = '苏久福今年25，苏久福是男生，苏久福身高190';
var reg = /苏久福/g;
var arr = str.match(reg);
console.log(arr);
5.replace()
替换匹配正则表达式的字符
var str = '苏久福今年25，苏久福是男生，苏久福身高190';
var reg = /苏久福/g;
var newStr = str.replace(reg,'王瑞');
console.log(newStr);
6.slice()
// 截取字符串,可以传入两个参数，一个是startSlice,一个是endSlice
// 如果只传入一个参数，那么就会默认从参数对应的下标开始截取一直到结束
var str = '苏久福今年25，苏久福是男生，苏久福身高190';
var ss = str.slice(0,3); // [start,end)
console.log(ss);
7.split()
将字符串分割为数组,通过制定的字符来分割
var str = '苏久福今年25，苏久福是男生，苏久福身高190';
var arr = str.split('，');
console.log(arr);
8. substr() substring()
提取指定位置在字符串中的字符
// substr() substring()
// 这两个方法如果只传入一个参数，他们结果是一致的
// substr 第二个参数代表从第一个参数位置开始截取的字符长度
// substring 第二个参数也是提取字符的下标，从小的开始提取到大的下标位置
var str = 'www.baidu.com';
var newstr = str.substr(5,1);
console.log(newstr);
var newstr1 = str.substring(5,0); // [5,10)
console.log(newstr1);
console.log(newstr == newstr1); // true
9. toUpperCase() toLowerCase()
toUpperCase() 将字符转换为大写
toLowerCase() 将字符转换为小写
// toUpperCase()
var str = 'www.baidu.com';
var newstr = str.toUpperCase();
console.log(newstr);
数组
Array 用于单个变量存储多个值
var arr = [1,2,3,4,5];
找值通过下标去寻找
创建
1. 字面量
var arr = []; // 字面量创建
2. new
var arr = new Array(); // 返回一个空数组
var arr1 = new Array(2); // 返回一个规定了size(元素个数)的数组
var arr2 = new Array(1,3,5,10,9); // 返回了一个定义了初始值的数组
console.log(arr,arr1,arr2);
属性：
length 返回数组的长度/返回数组元素的总个数
方法:
1. concat()
将多个数组合并并返回合并后的数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
var arr = arr1.concat(arr2,arr3);
console.log(arr);
2.push()
将要添加的元素作为数组最后一个添加到数组中
var arr = [];
arr.push(1);
arr.push(3);
console.log(arr);
3.pop()
删除最后一个元素并返回
// push pop
var a = arr.pop()
console.log(a);
console.log(arr);
4. unshift()
将要添加的元素作为数组的第一个元素添加到数组中
5. shift()
删除数组的第一个元素并返回
6.reverse()
将数组元素反序来排列
// reverse
var arr = [1,2,3,4,5,6,7,8,9];
var newArr = arr.reverse()
console.log(newArr);
7.slice()
在已有的数组中返回制定的元素
// slice
var arr = [1,2,3,4,5,6,7,8,9];
var newArr = arr.slice(5,7); // [5,7)
console.log(newArr);
8.sort()
对数组进行排序
// sort
var arr = [12,2,34,34,13,1000,24];
var arr1 = arr.sort(function(b,a){
return b-a; // 函数中的第一个参数 - 函数中的第二个参数 代表正序排列（从小到大）
// 函数中的第二个参数 - 函数中的第一个参数 代表反序排列（从大到小）
})
console.log(arr1);
9.splice()
删除元素并向数组中添加新元素
// splice
var arr = ['sss','aaa','bbb'];
var arr1 = arr.splice(1,1,'ccc'); // 返回删除的元素
// splice 第一个参数删除的开始下标 ，第二个参数代表删除元素的个数 , 第三个参数 代表要想数组中添加的新元素、位置为删除元素在原来数组中的位置
console.log(arr,arr1);
10. join() toString()
将数组转换为字符串
// join
var arr = ['hello','world','sujiufu'];
var str = arr.join("====");
// 通过制定的字符将数组中所有的元素链接成一个字符串返回
console.log(str);
// toString
var str = arr.toString();
// 把所有的元素直接转换为字符串返回，
并且数组中元素分隔符也加到了字符串中
console.log(str);
数据传输格式
JSON
JSON ?
JSON 指Javascript对象表示法， JavaScript Object Notation
JSON 是轻量级的文本数据传输格式
JSON 独立于语言
JSON使用了javascript语法来描述数据对象,但是JSON仍旧独立于语言和平台，JSON解析器和JSON库支持许多不同的编程语言。
JSON 具有自我描述性，更容易的去理解。
为什么要使用JSON？
JSON对于我们应用来说，JSON比XML更容易的去使用
JSON语法？怎么去书写？
JSON 主要是以键值对的形式存在
JSON的值可以接收哪几种类型？
String
Number
Boolean
Array
Object
Null
// 复杂类型
Array
Object
JSON中Array?
数组不止是接受简单的数据，还可以接受对象作为元素
JSON中Object?
对象里也可以接受对象作为元素，但注意的是需要以键值对的方式存在
怎么使用JSON？
// datasrc["键的名字"] // [] 这里面可以接收变量
var name = "ObjectType";
var obj = datasrc[name];
console.log(obj["option"]);
// datasrc.ObjectType // 不能接受变量
var name = "ObjectType";
var obj = datasrc.ObjectType;
console.log(obj["option"]);
js方式去引入的
JSON文件?
.json 扩展名
不能使用单引号，必须得使用双引号，
每一个键值对之间必须的使用,隔开
JSON两个重要的方法?
JSON 转换为字符串的方法
JSON.stringify(json);
字符串转换为JSON
JSON.parse(str);
注意：字符串转换为JSON，那么字符串必须是json严格格式的字符串
XML
和HTML很像很像
XML 被设计用来传输和存储数据的
XML 可扩展标记语言 （EXtensible Markup Language）
XML 宗旨是传输数据 HTML 是用来显示数据
XML 中可以自由的定义标签
XML 也具有自我描述性
XML文件?
标志 <?xml version="1.0" encoding="utf-8"?>
标签一定是闭合双标签
<root> </root>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" id="username" />
<input type="password" id="password" />
<button id="login">登录</button>
<button id="regist">注册</button>
</form>
<script>
// 后台
var database = {}; // database 是数据库
database.users = []; // 创建一个表
database.users.push({ // 向表中插入一条数据
"id":1,
"username":"admin",
"password":"123456",
"type":"admin"
})
// 注册的registFun
function registFun(option){ // 注册接受数据
var flag = true;
database.users.forEach(function(e,i){//传一个函数 e代表每一个元素i每个元素的索引值
if(e.username == option.name){
flag = false;
}
})
if(flag){
var lenOld = database.users.length;
database.users.push({ // 注册
"id":database.users.length+1,
"username":option.name,
"password":option.password,
"type":"user"
})
var lenNew = database.users.length;
if(lenNew - lenOld == 1){
return '{"ok":true,"mes":"注册成功"}'; // 后台给前台返回一个字符串
}else{
return '{"ok":false,"mes":"注册失败"}';
}
}else{
return '{"ok":false,"mes":"用户名存在"}';
}
}
// 登录的loginFun
function loginFun(str){ /// op 就是前台发送过来的数据
// 查询用户名是否存在
var obj = null; // 用户 默认用户是null
database.users.forEach(function(e){
if(e.username == op.name){
obj = e;
}
})
if(obj != null){
if(obj.password == op.password){
return '{"ok":true,"mes":"登陆成功"}';
}else{
return '{"ok":false,"mes":"密码错误"}';
}
}else{
return '{"ok":false,"mes":"用户不存在"}';
}
}
// 前台
var regist = document.getElementById('regist');
var login = document.getElementById('login');
var username = document.getElementById('username');
var password = document.getElementById('password');
// 注册
regist.onclick = function(){ // 注册完成
var user = username.value;
var pass = password.value;
if(user !== "" && user.length>=3 && pass != "" && pass.length>=6){
var result = registFun({ // 后台发送数据 并接受返回的消息
"name":user,
"password":pass
});
var json = JSON.parse(result);
if(json.ok){
alert(json.mes);
}else{
alert(json.mes);
}
}
return false;
}
// 登录
login.onclick = function(){
var user = username.value;
var pass = password.value;
if(user !== "" && user.length>=3 && pass != "" && pass.length>=6){
// 往后台发送请求
var result = loginFun({ // {} 向后台发送的数据
"name":user,
"password":pass
});
var json = JSON.parse(result);
if(json.ok){
alert(json.mes);
}else{
alert(json.mes);
}
}
return false;
}
/*
* 1.前台获取用户输入的用户名和密码
* 2.验证用户名和密码的格式是否正确
* 3.开始往后台发送数据
*
* 4.后台接受数据，并且需要对数据做相应的处理 class User{}
* // 'username=admin&password=123456'
* // {username:admin,password:123456}
* // '{"username":"admin","password":123456}'
* 5.处理数据，拿到相应的参数
* 6. login -> 登录功能 public void login(username,password){}
* regist -> 注册功能 public void regist(username,password){}
*
* 7. 程序处理完以后返回相应的结果 // 重定向 登陆成功
* // 重载 登陆失败
*
* // 需要向前台发送数据
*
* 7.程序处理完返回相应的结果并发送给前台
*
* 8.接受后台发送回来的消息 // '{"ok":true,"mes":"登录成功"}'
*
* 9.处理发送回来的消息 // 登录成功 跳转页面 登录失败 显示错信息
*
*
*
*
*
*
* */
</script>
</body>
</html>
网友评论