JavaScript紧凑学习

windows本地,调用命令行:
win键+R 键入cmd , (cmd是Command 命令行 简称)
目录是C盘下的

C:\Users\Administrator>

创建文件夹:

[前面省略上面的目录结构]mkdir jsFastLearn

cd进去,创建文件,testjs1.js

cd jsFastLearn

echo .>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

将编程看作是一门艺术，而不单单是个技术。 敲打的英文字符是我的黑白琴键， 思维图纸画出的是我编写的五线谱。 当美妙的华章响起，现实通往二进制的大门即将被打开。