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做很多事情!~~~開動腦筋...

今天在注冊登入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 看起來比較好.

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驗證使用者名

上面這個可以說很全面了...

好了,讓我們紮緊領子,好好實踐一下:

JavaScript緊湊學習

今天下午把RegisterAndLoginWithDB的判定js重新做了. 名為reg1.js (資料缺乏正規表達式判斷和長度判斷)

原表單也做了相應修改:

接下來的是繼而在js中添加判定資料格式,長度.(已添加使用者名、密碼等15個常用的js正規表達式.)

繼而要修改Register.java ,這裡可以使用Ajax :

經常用到的IDEA快捷鍵

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條