JavaScript紧凑学习

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上面的教程和电子书<JavaScript高级程序设计>.总体第一次打JavaScript的时候感觉跟java刚开始学基础语法和流程语句时差不多.

很有意思的是document.getElementById("someId")这个语法结构,,,简单形象,充满乐趣,可以更改元素显示的字,css样式...或是某图片的链接.切换两张不同的图片...等等功能,让我很想有种想做动画片的冲动.(今天中午看新闻说YouTube上充斥着一些邪恶的动画片,比如唐老鸭横尸街头,冰雪公主被迫开颅手术.等,,,而新闻报道说这些邪恶动画及真人视频居然被搬运到了某国内视频网站.而更匪夷所思的是,中国人居然效仿去拍摄同类的真人视频小片段...)

啊.了解js之美吧.不过可以明显地感受到一个美一个丑的对比(布拉格的美丽idea与美国的邪教动画片)

做完了基本的ｊｓ数组操作，感觉意犹未尽啊！下一步是Date对象的学习.再加上基础数据类型的学习.

在<JavaScript高级程序开发>这书中,提到了一些基础数据类型,大概看了下.现在要应用在学习编码上.

2018年1月22日 16:30:36

明天早班,今晚弄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