JavaScript紧凑学习
windows本地,调用命令行:
win键+R 键入cmd , (cmd是Command 命令行 简称)
目录是C盘下的
C:\Users\Administrator>创建文件夹:
[前面省略上面的目录结构]mkdir jsFastLearncd进去,创建文件,testjs1.js
cd jsFastLearnecho .>testjs1.js好,看一下文件夹jsFastLearn里面有这个文件了.默认内容是echo后面的 .
之后我们开始编辑.用什么工具呢?webStorm在这弄js的话显得有点臃肿,推荐sublime2中文版.而vim也是很好的,把下载好的gvim,vim放入系统环境变量,之后使用Windows PowerShell直接输入vim或者gvim试试,是不是OK啦?
现在又觉得IntelliJ IDEA做JavaScript不错.界面也好看.补全也迅速.
2018年1月21日 12:39:56
第一章 在IDEA中编写js
Idea是JetBrains公司的产物,该公司总部位于美丽捷克首都布拉格.
百度百科说这家公司大多数是以严谨著称的东欧程序员为主.
看到这里我不禁要想: 布拉格这么美丽的地方才会出现这么美丽的编辑器吧...说实话我用过的IDE精通的不敢说,但都看过了,而且界面上我也是喜欢去调整到自己喜欢的样子,但没有一个像IDEA给我的视觉享受要大.而且IDEA每天打开都会有一个tips,提示一下快捷键的用法...比较不错~
在风景美如画的布拉格,开发人员研发了idea,而idea不仅只适合java编程,它的自动补全和UI的美观让很多人爱不释手,从而也可以使用它制作HTML,JavaScript.
上面是昨天夜里做的一些demo, 参照着w3c上面的教程和电子书
啊.了解js之美吧.不过可以明显地感受到一个美一个丑的对比(布拉格的美丽idea与美国的邪教动画片)
做完了基本的ｊｓ数组操作，感觉意犹未尽啊！下一步是Date对象的学习.再加上基础数据类型的学习.
在
明天早班,今晚弄Date对象就睡觉.2018年1月23日 00:25:50
了解了Date对象,感觉做一些时钟什么的很easy!改天要做.
时钟靠后，先学ｊｓ的正则表达式，2018年1月23日 12:22:29
因为js中的正则可以用在form表单的验证,从而减轻Servlet(服务器端)的验证压力.
这里着重地记录一下js正则表达式的学习.
第二章 javascript正则表达式对象
RegExp 是 正则表达式( regular expression )的简写.
RegExp对象用于规定在文本中检索的内容.
正则表达式是描述字符模式的对象.
正则表达式用于对字符串模式匹配及检索替换. 是对字符串执行模式匹配的强大工具.
正则表达式可以用来检索单个多个的字符,用于解析,格式检查,替换等等.
(其实知道java中的正则表达式,在js中概念就相当于理解了.)
语法:
var patt=new RegExp(pattern,modifiers);
or more simply:
var patt=/pattern/modifiers;上面第二种方法比较简单和常用.
当使用构造函数创造正则对象时, 需要常规的字符转移规则 ( 在前面加反斜杠 ). 比如,以下是等价的:
var re = new RegExp("\\w+");
var re = /\w+/;RegExp修饰符
修饰符用于执行是否全局检索,是否区分大小写等.
i 修饰符是用来执行不区分大小写的匹配.
g 修饰符是用来执行全文的搜索(而不是在找到第一个就停止查找,而是找到所有的匹配).
下面是简单的正则匹配案例:
要判定的数组或字符串:<p id="str"></p>
判断的正则返回:<p id="reg1"></p>
判断成功为true否则为false:<p id="regboolean"></p>
判断的正则处于被判定数组或字符串的开始下标:<p id="reg2"></p>
(在html中空格只显示一个,如果在数据中有多个空格,判断的下标要加上多的空格,但显示上则还是一个空格.)
<script>
var tempStr = "This is a banana.";
document.getElementById("str").innerHTML=tempStr;
var pattern = /banana/i;
//测试下Boolean类型返回
var pattBoolean = tempStr.match(pattern);
if (pattBoolean != null)
{
document.getElementById("regboolean").innerHTML=true;
}
else
{
document.getElementById("regboolean").innerHTML=false;
}
//返回匹配的正则,无匹配项返回null
document.getElementById("reg1").innerHTML=tempStr.match(pattern);
//返回匹配的正则的开始下标.
document.getElementById("reg2").innerHTML=tempStr.match(pattern).index;
</script>先到这里,看完几篇博客再继续修炼! 
2018年1月23日 14:12:46
除了match()方法, 对字符串处理还有 search() 和 replace() 方法.
- search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子字符串的起始下标位置.
- replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子字符串.
之前一直使用document.getElementById("someid").innerHTML = someth; 是将某个id为someid的标签内容更改或填入 someth (字符串或数字等).
而要想使用js取得某id标签内的内容(尤其指字符串)是这样的:
<p id="demo">您好啊!JavaScript!</p>
<script>
function myFunction() {
//这里的str就获取了"您好啊!JavaScript!".
var str = document.getElementById("demo").innerHTML;
</script>可以利用这样的能传入能获取的innerHTML做很多事情!~~~开动脑筋...
https://www.processon.com/diagraming/5a6746aae4b0c090525774a7 近期js计划
http://www.runoob.com/js/js-tutorial.html 群友也在看的~js教程
今天在注册登录demo中加入了简单的js验证:
function checkLog()
{
var user_name = formLog.usernameLogin.value; //formLog是表单name
var pass_word = formLog.passwordLogin.value; //.value获取id字段某的值
if(user_name==""||user_name==null){
alert("请输入用户名!~~");
formLog.usernameLogin.focus();
return false;
}
else if(pass_word==""||pass_word==null){
alert("请输入密码!~~")
formLog.passwordLogin.focus();
return false;
}
else{
return true; //这里return true是我自己加的.还有其他的方式,力气完美.
formLog.submit();
}
}上面是登录验证,注册验证也弄得如此简单.
而阿里云的云栖社区这个:https://yq.aliyun.com/ziliao/59376 看起来比较好.
关于正则表达式验证的:http://blog.csdn.net/u010552788/article/details/51012978 抽空整~
2018年1月25日 16:44:13
先休息一下了...晚上看看买的js那本书.(好贵啊 将近50,一定要多看几遍)
@(有时候,急于求成的心思可以理解,但是没有一个结构清晰的学习路线,难免会造成困扰,在学习正则表达式时切勿慌乱,因为这关系到用户信息的正确性与安全性.把正则表达式掌握好势必要躬行.)为了更有效地学习正则表达式,用IDEA再次制作一个注册登录的demo是不可少的.IDEA的自动补全完全>Eclipse中的这个功能. 当然不使用自动补全也可以学习到一些东西.
在用户注册与登录验证的部分,要找准要点,切中要害,找到最正经最好的教程.
将这些结合起来,形成自己的一个体系.继而总结出来+分析+分享.
2018年1月26日 10:27:25
今天下午把RegisterAndLoginWithDB的判定js重新做了. 名为reg1.js (数据缺乏正则表达式判断和长度判断)
/**
* 强化的reg.js 加入更多判定和细节 相应form表单也做调整(原表单) ctrl+m eclipse编辑区全屏
*/
// userName关注焦点时方法
function focus_username() {
var resultObj = document.getElementById("result_userName");
resultObj.innerHTML = "请输入您的用户名";
resultObj.style.color = "blue";
}
// userName取消焦点时方法
function blur_username() {
var resultObj = document.getElementById("result_userName");
uname = document.formReg.userName.value;
if (uname == "" || uname == null) {
resultObj.innerHTML = "用户名不能为空";
resultObj.style.color = "red";
return false;
} else {
resultObj.innerHTML = "验证成功";
resultObj.style.color="green";
return true;
}
}
/*
* 下面是passWord
*/
// passWord关注焦点时方法
function focus_password() {
// 获取表单提示元素 result_passWord
var resultObj = document.getElementById("result_passWord");
resultObj.innerHTML = "请输入您的密码~";
resultObj.style.color = "blue"; // 设置元素颜色
}
// passWord取消焦点时方法
function blur_password() {
// 获取元素,获取密码验证,按需提示.
var resultObj = document.getElementById("result_passWord");
// 获取密码判断
pwd = document.formReg.passWord.value;
if (pwd == "" || pwd == null) {
resultObj.innerHTML = "密码不能为空";
resultObj.style.color = "red";
return false;
} else {
resultObj.innerHTML="验证成功";
resultObj.style.color="green";
return true;
}
}
/*
* 下面是passWord2
*/
function focus_password2(){
//获取第一次输入的密码和这次的密码,判断相等与否,不相等false,相等为true
var resultObj=document.getElementById("result_passWord2");
resultObj.innerHTML="请重复输入密码";
resultObj.style.color="blue";
}
function blur_password2(){
//获取第一次输入的密码和这次的密码,判断相等与否,不相等false,相等为true
var resultObj=document.getElementById("result_passWord2");
pwd2=document.formReg.passWord2.value;
pwd=document.formReg.passWord.value;
if (pwd2 == pwd) {
resultObj.innerHTML = "验证成功";
resultObj.style.color = "green";
return true;
} else {
resultObj.innerHTML = "请正确重复密码";
resultObj.style.color = "red";
return false;
}
}
//进行总体验证后 , 方可submit成功.
function checkReg() {
flag_username = blur_username();
flag_password = blur_password();
flag_password2 = blur_password2();
if (flag_username == true && flag_password == true
&& flag_password2 == true) {
return true;
} else {
return false;
}
}原表单也做了相应修改:
<form action="/RegisterAndLoginWithDB/Register" method="POST"
name="formReg" onsubmit="return checkReg()">
<p>用户名</p>
<input type="text" name="userName" onfocus="focus_username()"
onblur="blur_username()"><br />
<div id="result_userName"></div>
<br />
<p>密码</p>
<input type="password" name="passWord" onfocus="focus_password()"
onblur="blur_password()"><br />
<div id="result_passWord"></div>
<br />
<p>确认密码</p>
<input type="password" name="passWord2" onfocus="focus_password2()"
onblur="blur_password2()"><br />
<div id="result_passWord2"></div>
<br />
<br /> <br />
<button type="submit" class="btn btn-primary btn-lg">注册</button>
<button type="reset" class="btn btn-info btn-lg">重置</button>
</form>接下来的是继而在js中添加判定数据格式,长度.(已添加用户名、密码等15个常用的js正则表达式.)
判定密码强度显示
2018年1月26日 16:46:08
继而要修改Register.java ,这里可以使用Ajax :
使用Ajax验证用户名
上面这个可以说很全面了...
好了,让我们扎紧领子,好好实践一下:
先把Ajax玩明白.
在做表单验证用户名是否重复时,使用Ajax进行(Ajax与数据库):
https://www.cnblogs.com/joyce-cui/p/7435377.html
http://blog.csdn.net/liushuijinger/article/details/8965686
忽然我觉得查这么多博客,总结出一条道理:"取百家之所长,补自己之所短"...
http://blog.csdn.net/LIU_YANZHAO/article/details/61419310 <表单验证依旧(√照做了下2018年1月26日 16:47:52)
http://blog.csdn.net/qq_27289001/article/details/50099245 < 现在看不懂的
http://blog.csdn.net/forguy10/article/details/54427820
经常用到的IDEA快捷键
copy one line to the next line : CTRL+D
delete one line : CTRL+X
Java main method : psvm + enter
System.out.println() : sout + enter
move one line to other line : CTRL+SHIFT+UP/DOWN ARROW
go to the next line : SHIFT+ENTER
to replace all the selected string : CTRL+SHIFT+R
快捷键博客(反正也不看 ^_^ 毛病是惯的):https://www.cnblogs.com/zhangpengshou/p/5366413.html
Today i feel sooo tired. Wish tomorrow i hava a good rest and spirit. ^-^/
2018年1月27日 22:05:46
扫一扫
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
