JavaScript02
JavaScript02
01Js内置对象String
在js中如何创建字符串对象
var 对象名 = new String(“字符串”);
例子:
var s1 = new String(“hello”);
var s2 = new String(“hello”);
document.write(s1 == s2);
比较是两个对象的地址是否相同,false
js中的valueOf()比较的是两个js对象的原始值是否相同
document.write(s1.valueOf() == s2.valueOf());
Js中创建对象String,简写格式就是直接 字符串常量赋值给变量
var s3 = “helloworld”;
var s4 = “helloworld”;
document.write((s3 == s4));//true
在Js中常用的方法
1),charAt(index); 获取指定索引处的字符
var str = “helloworldJavaEE”;
document.write(str.chartAt(4));
2),concat(字符串); 字符串拼接功能
document.write(str.concat(“王丽坤”));
3),fontcolor(): 给字符串颜色标记(“参数英文单词或者#XXXXXX”)
document.write(str.fontcolor(“green”));
4),substring(start,end); 截取功能 跟java中的String一样
document.write(str.substring(5,10));
5),split(“字符串”); 拆分,分割,获取到的字符串数组
var str2 = “JavaEE-PhP-Go-C-C++”;
var strArray = str2.split(“-”);
//遍历for-in语句
for( var i in strArray){
document.write(strArray[i]+" ");
}
02Js自定义对象
方式1:类似于Java中有参构造
定义对象格式 跟定义函数格式一样
function 对象(属性名称1,属性名称2,…){
//追加它的成员属性
this.成员属性1 = 属性名称1;
this.成员属性2 = 属性名称2;
…
//追加它得功能
this.方法名 = function(空参/带参){
…
}
}
创建对象
var 对象名 = new 对象(实际参数列表);
例子:
创建一个人对象
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
this.speakEnglish = function(name){
alert(“会说”+ name);
}
}
创建Person对象
var p = new Person(“王丽坤”,18,"女);
document.write(“姓名是:”+p.name+“,年龄是:”+p.age+“,性别是:”+p.gender);
//调用功能
p.speakEnglish(“英语”);
方式2:类似于Java中的无参构造
1).定义对象的格式:function 对象(){}
2).创建对象 var 对象名 = new 对象();
3).追加属性和追加功能
对象名.属性名称 = “值”;
对象名.方法名 = function(){}…
定义对象
function Person2(){}
创建Person2对象
var p2 = new Person2();
追加属性和功能
p2.name = “文章”;
p2.age = 35;
p2.gender = “男”;
p2.playGame = function(gameName){
alert(“会玩”+gameName);
}
document.write(“姓名是:”+p2.name+“,年龄是:”+p2.age+“,性别是:”+p2.gender);
document.write(“csgo”);
方式3:使用Object对象(代表所有js对象)
直接new对象
var p3 = new Object();
p3.name = “王丽坤”;
p3.age = 18;
p3.gender = “女”;
p3.speakEnglish = function(name){
alert(p3.name+“会说”+name);
}
document.write(“姓名是:”+p3.name+“,年龄是:”+p3.age+“,性别是:”+p3.gender+) ;
p3.speakEnglish(“英语”) ;
方式4:字面值方式:“Json数据格式”
方式4:字面值方式:"Json数据格式"基本格式: {"key":value}这种键值对例子:需要描述一个学生---->姓名,年龄,性别,住址var student = {"name":"迪丽热巴";"age":27;"gender":"女";"playGame":function(gameName){document.write(this.name+"会玩"+gameName);};};document.write(student.name);student.playGame("王者荣耀");Json_复杂类型
复杂格式
var 对象名 = [{},{},{}...] 描述类似数组或者集合var students =
[{"name":"范冰冰","age":45,"gender":"女","address":"西安市"},{"name":"李晨","age":36,"gender":"男","address":"北京市"},{"name":"邓超","age":46,"gender":"男","adderss":"上海市"}
];json对象[索引值].key获取对应的value值
document.write(student[1].address);通过document方法获取标签对象
<html><head><meta charset="utf-8"><title>05_通过docuement方法获取标签对象</title></head><body><!-- 1)事件源 --> <!-- 失去焦点onblur-->用户名:<input type="text" id="username" class="cl_username" name="name" placeholder="请输入用户名" onblur="getUserName()" /> <!-- 3)绑定事件监听器--></body><script>//2)事件监听器:编写一个函数function getUserName(){//alert("触发了失去焦点事件了") ;//方式1:在标签中给定id属性值,必须唯一 (推荐)//document.getElementById("id属性值") 获取标签对象var username = document.getElementById("username") ;//方式2:docuement.getElementsByClassName("class属性值") ; 获取的标签对象列表//var username = document.getElementsByClassName("cl_username")[0] ;//方式3:docuement.getElementsByName("name属性值") ;//获取的标签对象列表//var username = document.getElementsByName("name")[0] ;//方式4:通过标签名称获取标签对象//docuement.getElementsByTagName("同名的标签名称") ; //返回的标签对象列表//var username = document.getElementsByTagName("input")[0] ;//标签对象获取value属性:内容可以获取到alert(username.value) ;}</script>
</html>
Js中常见事件分类
Js正则表达式语法
正则表达式:js引擎是能够识别这些语法
1)数量词相关的语法
x:代表任意字符
x+: 表示x字符串出现一次或多次
x*: 表示x字符出现0次或者多次
x?: 表示X字符出现0次或者1次
2)范围相关的语法
x{n}: 表示x字符恰好出现n次
x{n,}:表示x字符至少出现n次
x{n,m}:表示x字符至少出现n次,但是不超过m次
3)匹配字符相关的
X[a-z]: x字符可以是a~z中任何的一个小写字母字符
X[0-9]: x字符是一个数字字符
X[A-Za-z0-9]:x字符可以是任意的大小写均可或者数字或者_
正则表达式:有一个函数 test(“接收用户输入的文本框的内容字符串”)
匹配是否成功
创建一个正则规则:
var 正则对象名 = /书写正则语法/; //不完全匹配(会出现漏洞!)
正则对象名.test(字符串),true,匹配成功,false,失败
在java语言中和在javascript中,如果要完全匹配,必须加入边界匹配器
^:以…开头
$:以…结尾
创建正则对象
var reg = /[0-9]{2}/; 不完全匹配
var reg2 = /1{2}$/; 完全匹配
创建一个字符串
var str = “asd12mns”;
if(reg2.test(str)){
alert(“条件成立”);
}else{
alert(“条件不成立”);
}
js的表单校验
例子:
正则规则:用户名:4-14位的数字或者字母(不区分大小写)组成密码:6-10位的数字或者英文大小字母组成确认密码和密码一致邮箱:满足邮箱的格式数字或者字母@数字或者字母.com/.cm/.com.cn919081924@qq.com@163.com@Istone.com.cn本身字符就是. 需要\. 转义
<html><head><meta charset="utf-8"><title>08_js的表单校验</title><!-- 正则规则:用户名:4-14位的数字或者字母(不区分大小写)组成密码:6-10位的数字或者英文大小字母组成确认密码和密码一致邮箱:满足邮箱的格式数字或者字母@数字或者字母.com/.cm/.com.cn919081924@qq.com@163.com@Istone.com.cn本身字符就是. 需要\. 转义--></head><body><!-- form表单一个事件:onsubmit:表单是否你能够提交成功!携带的值如果true,能够提交成功false,提交失败!--><form action="server.html" method="get" onsubmit=" return checkAll()"> 用户名:<input type="text" id="username" placeholder="请输入用户名" onblur="checkUserName()" /><span id="userTip"></span><br/>密  码:<input type="password" id="pwd" placeholder="请输入密码" onblur="checkPwd()" /><span id="pwdTip"></span><br/>确认密码:<input type="password" id="repwd" placeholder="两次密码一致" onblur="checkRepwd()" /><span id="repwdTip"></span><br/>邮  箱:<input type="text" id="email" placeholder="请输入邮箱" onblur="checkEmail()" /><span id="emailTip"></span><br/><input type="submit" value="注册" /></form></body><script>//校验用户名function checkUserName(){//1)获取 用户名的内容 (id="username"的input标签对象同时获取内容)var username = document.getElementById("username").value ;//2)定义用户名的正则规则:用户名:4-14位的数字或者字母(不区分大小写)组成var reg = /^[A-Za-z0-9]{4,14}$/ ;//3)获取 id="userTip"的span标签对象var span = document.getElementById("userTip") ;//4)正则表达式校验用户名的内容 usernameif(reg.test(username)){//成立span.innerHTML = "√".fontcolor("green") ;return true ;}else{//不成立span.innerHTML = "×".fontcolor("red") ;return false ;}}//校验密码function checkPwd(){//1)获取密码输入框的内容 dom操作var pwd = document.getElementById("pwd").value;//2)密码正则:6-10位的数字或者英文大小字母组成var reg = /^[A-Za-z0-9]{6,10}$///3)获取id="pwdTip"所在的span标签对象var span = document.getElementById("pwdTip") ;//4)正则校验if(reg.test(pwd)){//成立span.innerHTML = "密码格式满足".fontcolor("green") ;return true ;}else{//不成立span.innerHTML = "不符合格式".fontcolor("red") ;return false ;}}//校验确认密码function checkRepwd(){//1)获取密码框的内容var pwd = document.getElementById("pwd").value;//2)获取当前确认密码框的内容var repwd = document.getElementById("repwd").value ;//3)获取id="repwdTip" 所在的span标签对象var span = document.getElementById("repwdTip") ;//4)判断if(pwd == repwd){//成立span.innerHTML = "两次密码一致".fontcolor("green") ;return true ;}else{//不成立span.innerHTML = "两次密码不一致".fontcolor("red") ;return false ;}}//校验邮箱function checkEmail(){//1)获取邮箱的内容var email = document.getElementById("email").value ;//2) 邮箱的正则:数字或者字母@数字或者字母.com/.cn/.com.cnvar reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,2}$///3)获取id="emailTip"的span标签对象var span = document.getElementById("emailTip") ;//4)校验if(reg.test(email)){//成立span.innerHTML="邮箱格式正确".fontcolor("green") ;return true ;}else{//不成立span.innerHTML="不满足格式,重新输入".fontcolor("red") ;return false ;}}//将所有的表单项的都满足条件,才能提交function checkAll(){if(checkUserName() && checkPwd() && checkRepwd() && checkEmail()){return true ;}else{return false ;}}</script>
</html><html><head><meta charset="utf-8"><title>08_js的表单校验</title><!-- 正则规则:用户名:4-14位的数字或者字母(不区分大小写)组成密码:6-10位的数字或者英文大小字母组成确认密码和密码一致邮箱:满足邮箱的格式数字或者字母@数字或者字母.com/.cm/.com.cn919081924@qq.com@163.com@Istone.com.cn 本身字符就是. 需要\. 转义--></head><body><!-- form表单一个事件:onsubmit:表单是否你能够提交成功!携带的值如果true,能够提交成功false,提交失败!--><form action="server.html" method="get" onsubmit=" return checkAll()"> 用户名:<input type="text" id="username" placeholder="请输入用户名" onblur="checkUserName()" /><span id="userTip"></span><br/>密  码:<input type="password" id="pwd" placeholder="请输入密码" onblur="checkPwd()" /><span id="pwdTip"></span><br/>确认密码:<input type="password" id="repwd" placeholder="两次密码一致" onblur="checkRepwd()" /><span id="repwdTip"></span><br/>邮  箱:<input type="text" id="email" placeholder="请输入邮箱" onblur="checkEmail()" /><span id="emailTip"></span><br/><input type="submit" value="注册" /></form></body><script>//校验用户名function checkUserName(){//1)获取 用户名的内容 (id="username"的input标签对象同时获取内容)var username = document.getElementById("username").value ;//2)定义用户名的正则规则:用户名:4-14位的数字或者字母(不区分大小写)组成var reg = /^[A-Za-z0-9]{4,14}$/ ;//3)获取 id="userTip"的span标签对象var span = document.getElementById("userTip") ;//4)正则表达式校验用户名的内容 usernameif(reg.test(username)){//成立span.innerHTML = "√".fontcolor("green") ;return true ;}else{//不成立span.innerHTML = "×".fontcolor("red") ;return false ;}}//校验密码function checkPwd(){//1)获取密码输入框的内容 dom操作var pwd = document.getElementById("pwd").value;//2)密码正则:6-10位的数字或者英文大小字母组成var reg = /^[A-Za-z0-9]{6,10}$///3)获取id="pwdTip"所在的span标签对象var span = document.getElementById("pwdTip") ;//4)正则校验if(reg.test(pwd)){//成立span.innerHTML = "密码格式满足".fontcolor("green") ;return true ;}else{//不成立span.innerHTML = "不符合格式".fontcolor("red") ;return false ;}}//校验确认密码function checkRepwd(){//1)获取密码框的内容var pwd = document.getElementById("pwd").value;//2)获取当前确认密码框的内容var repwd = document.getElementById("repwd").value ;//3)获取id="repwdTip" 所在的span标签对象var span = document.getElementById("repwdTip") ;//4)判断if(pwd == repwd){//成立span.innerHTML = "两次密码一致".fontcolor("green") ;return true ;}else{//不成立span.innerHTML = "两次密码不一致".fontcolor("red") ;return false ;}}//校验邮箱function checkEmail(){//1)获取邮箱的内容var email = document.getElementById("email").value ;//2) 邮箱的正则:数字或者字母@数字或者字母.com/.cn/.com.cnvar reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,2}$///3)获取id="emailTip"的span标签对象var span = document.getElementById("emailTip") ;//4)校验if(reg.test(email)){//成立span.innerHTML="邮箱格式正确".fontcolor("green") ;return true ;}else{//不成立span.innerHTML="不满足格式,重新输入".fontcolor("red") ;return false ;}}//将所有的表单项的都满足条件,才能提交function checkAll(){if(checkUserName() && checkPwd() && checkRepwd() && checkEmail()){return true ;}else{return false ;}}</script>
</html>
0-9 ↩︎
JavaScript02相关推荐
- wxpython+MySQL实现学生信息管理系统
初学者,仅供学习交流 Python学习两周时间了,这是我目前编写的比较满意的一个程序,有以下几个方面的经验总结: 1.布局管理是可视化编程的基础思维,尽量避免定点式布局,不规则分布的各种控件可以局部先 ...
- JavaScript01 JS基础入门(详细描述)
一.JavaScript导读 1.1 javascript概述: JavaScript主要用于HTML的页面,嵌入在HTML的源码中. JavaScript是因特网上最流行的脚本语言,它存在于全世界所 ...
最新文章
- TensorFlow 实现分类操作的函数学习
- Socket网络通讯_TCP协议
- 二分图模板（女生赛要用）
- Python matplotlib pyplot中title() xlabel() ylabel()无法显示在中文（方框乱码）的解决办法
- JFreeChart使用
- 【Linux系统编程应用】 Linux输入子系统(二）
- transformers tokenizer_summary
- 成功修复Ｕ盘，狂喜中~哈哈哈！！！
- Maven和Eclipse整合
- Ubuntu12.04增加屏幕分辨率选项
- STL标准模版库--vector的操作集合
- 广色域图片Android,Android Q将支持广色域照片
- 搭建eova开发环境
- sass实现前端页面基础框架布局
- 导师对计算机学生论文的评语,导师对论文的学术评语
- thinkadmin模板渲染与赋值
- Java设计模式：1.1.认识六个原则（开闭，里氏替代，依赖颠倒）
- opencv-python给图片添加半透明mask
- apache atlas 官方安装
- 用宅购节当前哨战，京东到家为双十一暗中蓄力