JavaScript基礎知識(上)
知識體系結構如下：
【1】 JavaScript概述
【2】 HTML嵌入JavaScript代碼方式
【3】 JavaScript的識別符號
【4】 HTML的變數
【5】 JavaScript的函式
【6】 JavaScript的資料型別
【7】 null undefined NaN 的區別
【8】 JS的常用事件
【9】 JS回呼函式的概念
【10】 JS注冊事件的兩種方式
【11】 JS代碼的執行順序
【12】 JS捕捉回車鍵
【13】 void運算子
【14】 JS的控制陳述句
【15】 設定和獲取文本框的value
【16】 innerHTML 和innerText
【17】 JS正則運算式
【18】 表單驗證
1.JavaScript概述
JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的高級編程語言，雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式和宣告式（如函式式編程）風格，
JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實作而成，因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript，但實際上它的語法風格與Self及Scheme較為接近，
JavaScript的標準是ECMAScript ，截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準，2015年6月17日，ECMA國際組織發布了ECMAScript的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES6，(源于百度百科)，
那么JavaScript 到底有什么用？
》JavaScript能夠改變HTML內容
》JavaScript能夠改變HTML屬性
》JavaScript能夠改變HTML樣式（CSS）
》JavaScript 能夠顯示HTML元素
可能光定義不能夠讓人理解透徹，下面的學習，會帶有例子，等學完例題之后再回過頭來，就會恍然大悟了，各個部分的講解， 不能光看，要學習自己給自己出題，來驗證這個知識點正確與否，如果說只看而不屑用手，那么這樣會忘的更快，
2.HTML嵌入JavaScript代碼方式
一共有三種方式，和CSS類似，溫馨提示：學習JavaScript的小伙伴，一定要先有HTML和CSS基礎哦~學習要循序漸進，而不是一步登天，
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="utf-8">
<title>html中嵌入JS代碼的第一種方式</title>
</head>
<body>
<!--
1.要實作的功能
用戶點擊以下按鈕，彈出訊息框
2.JS是一門事件驅動型的編程語言，依靠事件去驅動，然后執行對應的程式，
在JS中有很多事件，其中有一個事件叫做： 滑鼠單擊 click，并且任何事件
都會對應一個事件句柄叫做：onclick，【注意:事件和事件句柄的區別是：
事件句柄是在事件單詞添加一個on，】而事件句柄是以html標簽的屬性存在的
3.使用JS代碼彈出訊息框：
在JS中有一個內置物件叫做window，全部小寫，window代表瀏覽器物件
window物件有一個函式叫做:alert 用法是window.alert（"訊息"）:這樣就可以彈窗了
4.JS中的字串可以使用的雙引號，也可以使用單引號，
5.JS中的一條陳述句結束之后可以使用分號 也可以不使用，
-->
<!--window.可以省略不寫-->
<input type="button" value="hello" onclick="window.alert('你好~我的朋友')">
</body>
</hmtl>
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="utf-8">
<title>html中嵌入JS代碼的第二種方式</title>
<!--
JS的腳本塊在一個頁面當中可以出現多次，沒有要求，
JS的腳本塊出現位置也沒有要求，隨意，
-->
<script type="text/javascript">
/*
暴露在腳本塊中的程式，在頁面打開的時候執行，
并且遵守自上而下的順序依次逐行執行，（這個代碼的執行
不需要事件）
*/
window.alert("hello world"); //alert函式會阻塞整個頁面的加載，
//JS代碼注釋和Java一樣，
window.alert("java");
</script>
</head>
<body>
<style type="text/css">
/*
css代碼塊
*/
</style>
<!--第二種方式：腳本塊的方式
-->
<input type="button" value="按鈕" />
</body>
</hmtl>
<!--
/**
* javadoc 注釋：這里的注釋資訊會被javadoc.exe工具決議生成幫助檔案，
*/
-->
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="utf-8">
<title>html中嵌入JS代碼的第三種方式</title>
</head>
<body>
<!--
引入獨立的js檔案
-->
<!--在需要的位置引入js腳本檔案-->
<!--引入外部獨立的js檔案的時候，js檔案中的內容，會遵循自上而下的方式依次逐行執行-->
<script type="text/javascript" src="XXX.js"></script>
</body>
</hmtl>
3.JavaScript的識別符號
識別符號，就是指變數、函式、屬性的名字，或者函式的引數，（這句話說白了就是能夠自己命名的，都是識別符號，）
命名規則
》第一個字符必須是一個字母、下劃線或是美元符號（$）
》其他字符可以是字母、下劃線、美元符號或數字
》關鍵字和保留字不能作為識別符號
》注意區分大小寫
》駝峰命名 ：例如 userName
4.HTML的變數
弱型別語言的定義變數方式，相比強型別（c .java）來說簡直不要太隨意，萬物皆可var ，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關于JS中的變數</title>
</head>
<body>
<script type="text/javascript">
/*
1.回顧Java中怎么定義/宣告變數
資料型別 變數名：
例如：
int i;
2.Java中的變數怎么賦值
使“=”運算子進行賦值運算 等號右邊先執行，然后再賦值給左邊
例如：
i =10；
3.java 是一種強型別語言，
強型別怎么理解？
Java語言存在編譯階段，，假設有代碼：int i;
這個變數i ,從編譯型別最終到記憶體釋放，一直都是int型別，不可能再變成其他型別，
byte short int long float double boolean char
12484812
javascript當中的變數
怎么宣告變數？
var 變數名；
怎么給變數賦值？
變數名=值；
javascript是一種弱型別語言，沒有編譯階段，一個變數可以隨意賦值，賦什么型別的值都行，
var i=100;
i=false;
i="abc";
i=new Object();
i=3.14;
*/
var i; //沒有賦值 undefined(JS中存在的是一個具體值) 兩個undefined相加 =NAN (not a number 也是一個具體的值)
alert(i);
alert(undefined);
//一個變數沒有宣告/定義 直接訪問
//alert(k); //語法錯誤 不能這樣寫
var a,b,c=200;
alert(a);
alert(b);
alert(c);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的區域變數和全域變數</title>
</head>
<body>
<script type="text/javascript">
/*
全域變數：
在函式體之外的宣告變數屬于全域變數，全域變數的宣告周期是:
瀏覽器打開時宣告，瀏覽器關閉時銷毀，盡量少用，因為全域變數
會一直在瀏覽器的記憶體當中，耗費記憶體空間
能使用區域變數盡量使用區域變數，
區域變數：
在函式體當中宣告的變數，包括一個函式的形參都屬于區域變數，
區域變數的宣告周期是：函式開始執行時區域變數的記憶體空間開辟，函式執行結束之后，區域變數的記憶體空間釋放，
區域變數宣告周期較短，
*/
var userName ="lisi";
function name(){
var userName ="zhangsan";
alert(userName);
}
name();
alert(userName);
</script>
</body>
</html>
5.JS的函式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函式初步</title>
</head>
<body>
<script type="text/javascript">
/*
1.JS中的函式，等同于java語言中的方法，函式也是一段可以被重復利用的代碼片段
函式一般都是可以完成某個特定功能的
2.回顧Java中的方法
【修飾符串列】回傳值型別 方法名（形式引數串列）{
方法體;
}
例如：
public static boolean login(String userName ,String password){
...
return true;
}
3.JS中的變數是一種弱型別，那么函式應該怎么定義呢？
語法格式；
第一種方式：
function 函式名（形式引數串列）{
函式體;
}
第二種方式：
函式名=function（形式引數串列）{
函式體;
}
JS中的函式不需要指定回傳值型別，回傳什么型別都行，
4.JS函式可以多載嗎
JS中函式在呼叫時，引數型別沒有限制，引數個數沒有限制
JS函式中，兩個同名函式，后一個會將上一個函式覆寫，
*/
function sum(a,b){
//a和b都是區域變數，她們都是形參（變數名隨意）
alert(a+b);
}
//函式必須呼叫才能執行
//sum(10,20);
sayHello=function(username){
alert("hello"+username);
}
//sayHello("張三");
</script>
<input type="button" value="hello" onclick="sayHello('杰克');" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body >
<script type="text/javascript">
window.onload =function(){
var b=document.getElementById("btn");
b.onclick =function(){
alert("Hello ");
}
}
</script>
<input type="button" value="你好" id="btn" />
</body>
</html>
6.JavaScript的資料型別
資料型別，是我在學校機房做的，所以例子…，大家上網搜一搜資料型別的例子，要善于自己給自己出題，自己給自己找題哦
基本資料型別（原始型別）：String、Number、Null、Undefined、Boolean
參考型別：Object
7.null undefined NaN 的區別
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>null 和undefined NaN 有什么區別？</title>
</head>
<body>
<script type="text/javascript">
alert(typeof null); //"object"
alert(typeof NaN); //"number"
alert(typeof undefined); //"undefined"
//雙等號 等同
alert(NaN== null); //false
alert(null== undefined); //true
alert(undefined==NaN) ; //false
//三等號 資料型別和值都相同
//在JS當中有兩個比較特殊的運算子
alert(null===NaN); //false
alert(null===undefined); //false
alert(undefined===NaN); //false
</script>
</body>
</html>
- JS的常用事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS中的常用事件</title>
</head>
<body>
<input type="button" value="你好" onclick="sayHello()" />
<input type="button" value="我也好" id ="good"/>
<script type="text/javascript">
/*
(1)blur 失去焦點
(2)change下拉串列選中項改變，或文本框內容改變
(3)click 滑鼠單擊
(4)dbclick 滑鼠雙擊
(5)focus 獲得焦點
(6)keydown鍵盤按下
(7)keyup鍵盤彈起
(8)load頁面加載完畢
(9)mousedown滑鼠按下
(10)mouseover滑鼠經過
(11)mousemove滑鼠移動
(12)mouseout滑鼠離開
(13)mouseup滑鼠彈起
(14)reset 表單重置
(15)select 文本被選定
(16)submit 表單提交
任何一個事件都會對應一個事件句柄，在事件前加on
事件句柄以屬性的形式存在，
*/
function sayHello(){
alert("hello");
}
function good(){
alert("very good !");
}
var bu = document.getElementById("good");
bu.onclick =good; // 呼叫good() 是錯誤寫法
</script>
</body>
</html>
- JS回呼函式的概念
注意一點：自己把函式代碼寫出來，由其他程式員去呼叫該函式，
Java中也有回呼函式機制，
public class MyClass{
public static void main(String[] args){
//主動呼叫run()方法，站在這個角度run()正向呼叫
run();
}
//站在run方法這個角度，把run方法叫做回呼函式，
public static void run(){
System.out.println("run...");
}
}
-
JS注冊事件的兩種方式
-
JS代碼的執行順序
由上到下，順序執行，
這個我就不寫例子了，我想由小伙伴們親身去實踐感受以下，給一些提示資訊：放置一個按鈕，在插入一個script代碼塊，按鈕的點擊事件句柄，先是按鈕在代碼塊的下面，執行看看效果，然后在反過來，注意差別， -
JS捕捉回車鍵
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代碼捕捉回車鍵</title>
</head>
<body>
<script type="text/javascript">
window.onload =function(){
var password =document.getElementById("password");
password.onkeydown =function(event){
//獲取鍵值 回車：13 esc ：27
//event 會接收一個事件物件
if(event.keyCode==13){
alert("登錄成功");
}
}
}
</script>
<input type="text" id="password" />
</body>
</html>
- void運算子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="javascript:void(0)"> 這是一個不跳轉也頁面的超鏈接</a>
<!--這里注意 呼叫函式需要指定方式 javascript:-->
</body>
</html>
-
JS的控制陳述句
和Java c等一樣if switch while for break continue -
設定和獲取文本框的value
每個標簽可以設定的屬性X，都可以 “.XXX”來使用，和Java類中屬性類似，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>設定和獲取文本框的value</title>
</head>
<body>
<script type="text/javascript">
window.onload =function(){
document.getElementById("btn").onclick =function(){
//alert("111"); 寫完按鈕的事件句柄先 除錯一下，確定沒問題在往下繼續進行，運行時記得F12哦~
var t =document.getElementById("txt"); //拿到標簽物件
alert(t.value); //標簽的value
}
}
</script>
<input type="text" id="txt" /> 文本框
<input type="button" id ="btn" value="點我獲取文本框的value" />
</body>
</html>
- innerHTML 和innerText
innerHTML 中可以寫HTML代碼
innerText 中寫HTMl代碼會被當作普通的字串文本，并不會被執行，
（innerText例子由小伙伴自行完成）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>點擊按鈕 ，在DIV中顯示內容</title>
</head>
<body>
<style type="text/css">
#div1{
width: 300px;
height: 350px;
background-color: aqua;
position: absolute;
top: 100px;
left: 100px;
border: 1px black solid;
}
</style>
<script type="text/javascript">
window.onload =function(){
var b = document.getElementById("btn");
b.onclick =function(){
//點擊按鈕 ，在div 中輸出hello world
var d= document.getElementById("div1");
d.innerHTML="<center><font>hello world</font><center>";
}
}
</script>
<input type="button" value="更改div" id="btn" />
<div id="div1"></div>
</body>
</html>
- JS正則運算式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正則運算式</title>
</head>
<body >
<script type="text/javascript">
/*
1.什么是正則運算式？有什么用?
正則運算式：Regular Expression
正則運算式主要用在字串匹配方面
2.正則運算式實際上是一門獨立的學科，在Java語言中支持，c語言中也支持，JS中也支持，
大部分編程語言都支持正則運算式，最初使用在醫學方面，用來表示神經符號，目前使用最多的是計算機編程領域，
用作字串匹配，包括搜索方面，
3.正則運算式需要掌握到什么程度？
第一，常見的正則運算式要認識
第二，簡單的正則要會寫
第三，他人撰寫的正則運算式要認識，
第四，在Js中怎么創建正則
第五，在Js中，正則運算式物件有哪些方法？
第六：能夠快速的從網路上找到自己需要的正則運算式，并且測驗其有效性，
4.常見的正則運算式符號
. 匹配除換行符以外的任意字符
\w 匹配字母或者數字或者下劃線或者漢字
\s匹配任意的空白字符
\d匹配單詞的開始或結束
^ 匹配字串的開始
$ 匹配字串的結束，
*重復零次或更多次
+重復一次或更多次
？重復零次或一次
{n} 重復n次
{n,} 重復n次或者更多次
{n,m} 重復n到m次
\大寫字母 （否定）
[^x]
{^aeiou}
5.會查找正則運算式，
6.怎么創建正則運算式物件，怎么呼叫方法？
第一種方式：
var r =/正則運算式/flags;
第二種方式：(使用內置支持類)
var r =new RegExp("正則運算式","flags");
關于flags :
g：全域變數
i:忽略大小寫
m:多行搜索，前面是正則運算式時，m不能使用，只是前面是普通字串的時候，m可以使用，
正則運算式的test()方法
true/false =正則運算式物件.test(用戶的字串).
*/
</script>
</body>
</html>
-
表單驗證
表單驗證要求：
1、用戶名不能為空
2、用戶名必須在6-14位之間
3、用戶名智能由數字和字母組成，不能含有其他符號
4、密碼和確認密碼一致，郵箱地址合法
5、用以失去焦點驗證
6、錯誤提示資訊統一在span標簽中提示，并且要求字體12號，紅色
7、文本框再次獲得焦點后，清空錯誤提示資訊，如果文本框中的資料不合法要求清空文本框的 value
8、最終表單中所有項均合法方可提交，注意： 閱讀下面這段話
我希望小伙伴這道題先自己想想，從需要幾個標簽出發，每個標簽系結什么事件，到實作滿足題意要求 的代碼，實在做不出來的小伙伴也不要著急，我會在最后給出這道題的答案，但還是要求小伙伴，參考借鑒，而不是的復制 粘貼 運行 大功告成！ 這樣不是學習，得不到自己能力的進步，
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="utf-8">
<title>表單驗證</title>
</head>
<body>
<!--
表單驗證：
1、用戶名不能為空
2、用戶名必須在6-14位之間
3、用戶名只能由數字和字母組成，不能含有其他符號
4、密碼和確認密碼一致，郵箱地址合法
5、用以失去焦點驗證
6、錯誤提示資訊統一在span標簽中提示，并且要求字體12號，紅色
7、文本框再次獲得焦點后，清空錯誤提示資訊，如果文本框中的資料不合法要求清空文本框的value
8、最終表單中所有項均合法方可提交，
-->
<!--考慮這里用span 還是div -->
<style type="text/css">
span{
font-size: 12px;
color: red;
}
</style>
<!--哈哈哈，當然是span 了 div 獨占一行哦 回答正確了嗎？-->
<script type="text/javascript">
window.onload =function(){
//用戶名部分
//拿到用戶名
var name =document.getElementById("userName");
//拿到span標簽
var userSpan =document.getElementById("nameError");
//用戶名失去焦點
name.onblur =function(){
/*
這里的alert(111)沒有什么實際作用
但是還要告訴小伙伴們 好程式不是一步登天的，寫點，確定之前的代碼沒問題，在逐步往下進行，
*/
//alert(111);
//拿到用戶名
var username =name.value;
//去空
username=username.trim();
//判斷用戶名是否為空 三種方式看個人喜好怎么寫 ，沒有人會死規定代碼的
// if(username){
// //不是空
// alert("666");
// }else{
// //是空
// userSpan.innerText="用戶名不能為空";
// }
//或者 if(username.length==0)
//或者 if(username=="")
//感徑訓是這種舒服
if(username.length==0){
userSpan.innerText="用戶名不能為空";
}else{
判斷長度
if(username.length<6||username.length>14){
//不合法
userSpan.innerText="長度不合法";
}else{
//合法
//繼續判斷是否含有特殊符號 正則運算式
var reg =/^[A-Za-z0-9]+$/;
var ok=reg.test(username);
if(ok){
//最終合法
userSpan.innerText="?";
}else{
//含有特殊符號
userSpan.innerText="含有特殊字符";
}
}
}
}
//獲得焦點
name.onfocus =function(){
//清空非法的value
if(userSpan.innerText!=""&&userSpan.innerText!="?"){
name.value="";
}
//清空
userSpan.innerText="";
}
//密碼部分
//拿到確認密碼
var agin=document.getElementById("pwdAgin");
var pwdspan =document.getElementById("pwdError");
agin.onblur =function(){
//拿到密碼物件
var pwd =document.getElementById("password");
var pwdvalue=pwd.value;
var aginvalue =agin.value;
if(pwdvalue!=aginvalue){
//兩次密碼不一致
pwdspan.innerText="兩次密碼不一致";
}else{
//兩次密碼一致
if(aginvalue!=""){
pwdspan.innerText="?";
}
}
}
//獲得焦點
agin.onfocus =function(){
//清空非法的value
if(pwdspan.innerText!=""&&pwdspan.innerText!="?"){
agin.value="";
}
//清空
pwdspan.innerText="";
}
//email部分
var emailElt =document.getElementById("email");
var emailspan =document.getElementById("emailError");
emailElt.onblur =function(){
//獲取email的value
var email =emailElt.value;
//判斷郵箱地址是否合法
var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok =reg.test(email);
//由于我的正則表達不熟練，大家注意 不要加雙引號 ！！！！
//物件不支持“test”屬性或方法
if(ok){
//合法 zhangsan@163.com
emailspan.innerText="?";
}else{
//不合法
emailspan.innerText="郵箱地址不合法";
}
}
//獲得焦點
emailElt.onfocus =function(){
if(emailspan.innerText!=""&&emailspan.innerText!="?"){
emailElt.value="";
}
//清空
emailspan.innerText="";
}
//提交
var btn =document.getElementById("sub");
btn.onclick =function(){
//觸發上面的內容
name.focus();
name.blur();
emailElt.focus();
emailElt.blur();
//可以提交
if(userSpan.innerText=="?"&&pwdspan.innerText=="?"&&emailspan.innerText=="?"){
//獲取表單物件
var form =document.getElementById("userform");
//提交
form.submit();
}else{
alert("含有不合法內容，無法提交");
}
}
}
</script>
<!--實際應該用post 但是只是為了練習，所以寫成get-->
<!--
有心的小伙伴 可以利用學過的HTML CSS 知識 把界面優化的美觀 一個小小的表格，讓標簽對齊也算是一種優化，
-->
<form id="userform" method="get" action="success.html">
用戶名<input type="text" name="userName" id ="userName" /><span id="nameError"></span><br />
密碼<input type="password" name="password" id="password" /><br />
確認密碼<input type="password" name="pwdAgin" id="pwdAgin" /><span id="pwdError"></span><br />
郵箱<input type="text" name="email" id ="email" /><span id="emailError"></span><br />
<input type="button" value="提交" id ="sub"/>
</form>
</body>
</hmtl>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/208183.html
標籤：其他
上一篇：Flink的安裝和測驗
下一篇：Style(2)：命名空間