JavaScript筆記

JavaScript基礎語法

JavaScript（客戶端的腳本語言）

JavaScript可以實現表單驗證，能減少服務器的壓力，能製作頁面特效，能動態的改變頁面的內容
JavaScript是一種基於對象和事件驅動的腳本語言
a) 特點
i. JavaScript是一種交互語言，是客戶端的腳本語言，同時也是一中解釋性語言（可以通過瀏覽器解析出來，不需要別的編譯器去解析）
ii. JavaScript可以一邊執行一邊解釋（即可以通過瀏覽器直接解析、執行）
JavaScript的組成
a) ECMAScript
i. ECMAScript是一種語法標準（定義和約束了JavaScript中的一些核心語法）
ii. 變量，語法，數據類型，運算符，邏輯控制語句，關鍵字，保留字，對象都是ECMAScript約定的，都屬於ECMAScript
b) BOM（Browser Object Model ）（瀏覽器對象模型）
i. 提供了獨立於內容與瀏覽器窗口進行交互的對象
ii. JavaScript操作瀏覽器，與瀏覽器進行交互的一些方法或接口，（即操作瀏覽器的內容BOM）
c) DOM（Document Object Model）文檔對象模型
i. 對HTML文檔進行操作就是DOM操作
ii. 用來訪問和操作HTML文檔
JavaScript語法結構
a) 內嵌式使用

b) 外聯式使用

Src 爲引入；JavaScript.js爲javascript文件名
c) 在標籤中的使用（使用少）

i. javascript:alert爲彈出一個文本框
ii. onclick爲單擊事件
5. Document .write使用（等同於java中的輸出語句syso）
a) document.write(“hello js!”);輸出hello js!
b) 其中write表示寫，它是一個方法，
c) Write（）括號中可以寫HTML的標籤，輸出的爲對應標籤作用生效後的內容，即document.write("

hello javascript

")
6. 修改javascript編碼格式；
a) 方法1；
i. file——setting——editor——fileEncodings——projestEncodings中選擇UTF—8
b) 方法2
i.
7. Javascript的使用方式

8. 在javascript中交互、樣式、內容進行分開書寫，方便查看
變量（var變量關鍵字）

先聲明再賦值
同時聲明賦值（賦值與java中一樣）
不聲明賦值（java中必須聲明）不提倡不聲明就賦值
數據類型
undefined類型；未定義類型
a) 未定義變量的類型，聲明變量後該變量沒有賦值或該變量的值爲undefined時，該變量類型就爲undefined類型
b) 對象的屬性沒有賦值，該對象的屬性也是undefined類型
c) 函數沒有返回值時，該函數的默認返回值也是undefined
null類型；空值，與undefined值相等
number類型；數值型；所有的數字都是number類型的（java中有浮點與整形的區別）
boolean類型；返回值爲true和false（與java中的Boolean類型一樣）
string類型；被單引號或雙引號括住的文本（與java中一樣，當java中string類型不能用單引號）
object類型（沒與講解，具體看下回筆記）對象，數組和null
typeof操作符；通過typeof操作符來檢查變量的數據類型
a) 語法
var namber=89;
document.write(“我是這個類型的數據”+typeof namber);
注意；在javascript中，輸出語句是document.write( ) 並且輸出段之間也與java中一樣，使用加號（+）進行連接，在打印namber=null時，他的類型時object類型，就只有這一種情況下是object類型，其餘情況null爲undefined類型
註釋
單行註釋
a) 單行註釋用 / /表示，快捷鍵是Ctrl+斜槓（取消一樣）
b) 多行註釋用 / * 文字內容 * /表示，快捷鍵是ctrl+shift+斜槓（取消一樣）
運算符
算術運算符+、-、*、/、%（求餘）、++（自加）、–（自減）
複合運算符；+=、-=、/=、=（在自身的基礎上加上（減、除、乘）=後面的那個值便爲+=（-=、/=、=）前的值）
複合運算符；+=、-=、/=、=（在自身的基礎上加上（減、除、乘）=後面的那個值便爲+=（-=、/=、=）前的值）
關係運算符(數值間的比較，返回值爲布爾值即（true或false）)；==（等於）、！=（不等於）>=、<=、>、<（===三個等於號在一起時爲比較類型）
邏輯運算符（返回值爲布爾值即（true或false））；&&（兩數一樣才爲一個值不然爲另一個數）、||（兩個數只要有一個數爲規定值結果就爲那個值）、！（結果爲後一個數不爲前一個數）
查找
Indexof( “p” )查找字符串中存在的字符的下標（返回類型爲數字，有爲對應的下標，無爲-1）
charAt( 6 )輸出下標爲6的字符
substring( 1,5 )輸出1到5之間的字符
split（“—”）將字符串分隔爲字符串數組（—可以改變）
語法
a) document.write(he.charAt(2)+"
") ;
b) he爲字符串的名稱，通過 . 可以調用方法
數組
var 數組名=new Array (size(數組的長度))或者var 數組名=new Array （數組的元素）；
數組賦值與java中一樣
語法var is=new Array(“42”,“fsf”,“dfs”);
Join（“—”）將數組打印爲字符串(通過數組名 . 調用)
Sort（）對數組排序(通過數組名 . 調用與java中的排序用法一樣，但目前只知道只能排序個位數)
語法i.sort(); alert(i);
Length數組的長度(通過數組名 . 調用)
Push（“添加的字符串”）給數組添加內容(通過數組名 . 調用)
遍歷數組
//for輸出的是下標，要輸出數組的元素必須加入數組名，通過輸出相應下標的數，輸出數組
for(var k in i){
document.write(i[k]+",");
/* break;/!與java中一樣!//
/ continue;與Java中一樣*/
}
提示信息prompt();
Javascript調試
利用alert（）與f12結合，在對應的位置打點，進行調試

Bom屬性

瀏覽器對象
a) Window；（窗口對象）通過window . open（）打卡新的頁面或者控制當前窗口
i. Close（）關閉瀏覽器窗口
ii. Open（）打開一個新的瀏覽器窗口
iii.
b) Screen；屏幕對象。獲取屏幕相關信息
c) Navigator；瀏覽器對象，通過這個對象可以判斷用戶所使用的瀏覽器
d) History；歷史對象，通過這個對象可以前進或者後退一個頁面
i. History .Back（）前一頁
ii. History .Forward（）後一頁
iii. History .Go（數字），數字爲-1是前一頁，1是後一頁
e) Location；地址對象；通過該對象獲取當前URL的信息
i.
f) Javascript計時事件；在一個設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行
g) Localstorage sessionstorage，存儲對象，可以用來存儲數據，和cookie相似，區別是它是爲了更大容量存儲設計的，在使用上也更加方便
Javascript彈窗
a) 警告框window . alert ( )用於確保用戶可以得到某些信息
b) Window . confirm( )用於驗證是否接受用戶操作（可以有返回值，返回的是布爾類型，確定爲turn，取消爲flash）
c) Window . prompt()用於提示用戶在進入頁面前輸入某個值，獲得的是字符串類型的，通過parseInt進行可以轉換爲namber類型
i. 書寫方法
var nam=prompt(“請輸入第一個數”);
var nam2=prompt(“請輸入第二個數”);
var nam3=prompt(“請輸入運算符”);
nam=parseInt(nam);
nam2=parseInt(nam2);
Document . getElementById( “ id名 ”) . innerHTML=變量名
書寫函數；
<input type=“button” value=“點我” //新建函數
onclick=“myFunctions()”/>
a) //新建函數方法（寫在javascript中）function爲函數構造關鍵字，不能改
function myFunction(){//警告框
window.alert(“你好我是一個警告框”)
}
定義id，通過id給id賦值，

（確認框） //新建變量，通過變量確定輸出的內容 var oness; //新建函數方法 function myFunctions(){ var one =window.confirm("按下按鈕") //利用id進行輸出 if(one==true){ oness="你按下的是【確定】按鈕" }else { oness="你按下【取消】按鈕" } document.getElementById('ones').innerHTML=oness; } 6. Window.location對象（用於獲得當前頁面的地址（URL），並把瀏覽器重定向到新的頁面） a) Location . hrdf ( )獲得當前頁面的URL b) Location. aahtname（）獲得當前文件的路徑名 c) Location. assign(（文檔路徑或第三方路徑）)打開新的文檔 7. Javascript計時事件 a) setInterval ( )間隔指定的毫秒數不停地執行指定的代碼 b) clearInterval( )用於停止setInterval（）方法執行的函數代碼（通常setInterval ( )與clearInterval( )用在一塊，clearInterval( )的括號中寫接受setInterval ( )的變量名） c) setTimeout( )暫停指定的毫秒數後執行指定的代碼 d) clearTimeout( )用於停止執行setTimeout( )方法的函數代碼 8. 函數構造寫法 9. myIn.onclick=function(){ alert("1") } function myFunctions(){//警告框 window.alert("你好！我是一個警告框") }

Dom屬性與方法

查找HTML元素
a) document.getElementById ( ) 通過id屬性獲取對象（括號中寫id名）
i. 書寫語法
var myIn=document.getElementById(“in”)
//通過ID獲取
myIn.onclick=function(){
alert(“1”)
}
b) document.getElementsByTagName ( )通過標籤名獲取對象（必須加下標）
i. 書寫語法
Var myIn=document.getElementsByTagName(“button”)[0] （標籤下標）;
//通過標籤名獲取
myIn[0].onclick=function(){
alert(“1”)
}
ii. 當獲取的標籤名有多個時，在標籤名後面叫下標（或在變量名後名加下標）通過下標來進行準確的查找對應的標籤
c) document.getElementsByClassName ( )通過class屬性獲取對象
i. varmyIn=document.getElementsByClassName(“ins”)[0];//通過class獲取元素
myIn.onclick=function(){
alert(“1”)
}
ii. 當獲取的class名有多個時，在class名後面叫下標（或在變量名後名加下標）通過下標來進行準確的查找對應的class
使用document.getElementsByTagName ( )和document.getElementsByClassName ( )時必須加上下標，否則找不到對應的標籤或class
改變HTML
a) document . write( )（改變HTML的輸出流）
i. 可以通過document . write（“ ”）進行輸出
ii. 語法
document.write(“你好”)
b) 對象 . inner HTML=新的HTML（改變HTML的內容）
i. 書寫語法document.getElementById(“in”).innerHTML=“新文本”
c) 對象 . attribute=新的屬性值（改變HTML的屬性）
i. attribute爲對應的屬性名，可以改變（如果要改變圖片路徑，那麼就把attribute改爲src）
改變css樣式
a) 對象 . style . property=新樣式（通過id屬性獲取對象，property爲對應的樣式，可以改變）
b) 書寫語法
document.getElementsByTagName(“p”)[0].style.backgroundColor=“red”;
i. 當對fontSize等樣式進行改變時要使用駝峯命名法（樣式是兩個兩個以上時都要使用使用）

javascript函數

Parse Int(“字符串”)（首字母爲數字才能轉爲namber類型）
parseFloat( “ ” )（有小數的）
isNaN( ) (//判斷變量是不是數字)//不是數字，返回爲true，反之爲false
自定義函數
a) Function study(){
Document.write( “ ” )
}
具體代碼
var ins=“123fdsf”;
var nam=print(ins);//字符串數組字轉換爲namber的數字
//從字符串的首位置開始是數字的可以轉
parseFloat();//有小數的
//判斷變量是不是數字
var iss=isNaN(ins);//不是數字，返回爲true，反之爲false
alert(nam);
//有參函數與java中的方法使用一樣
function study(count){
for(var int=1;int<=count;int ++){
document.write(“好好學習”);
return “4234”;
}
a)

代碼樣式

/* document.write(“javascript
”);//在當前頁面上打印內容 documetn.write（）等同於java中的system.out.printIn()語句
document.write(" hello javascript！")/
var he=“string-in-our”;
/字符串查找/
/ document.write(he.charAt(2)+"
") ;
document.write(he.indexOf(“o”)+"
");
document.write(he.substring(2,7)+"
");
document.write(he.split("-")+"
")/
/數組/
/ var is=new Array(“42”,“fsf”,“dfs”);/
//輸出數組的長度
/ document.write(is.length+"
");/
//輸出數組的內容，將他變爲字符串顯示
/ document.write(is.join("-")+"
");/
//給數組增加一個字符串，並返回一個長度
/ var sis=is.push(“fs”+"
");

  document.write(sis+"<br/>");*/
 //對數組進行排序
 var i=new Array(9,2,5,4,1);
/* i.sort();
  alert(i);*/
 //for輸出的是下標，要輸出數組的元素必須加入數組名，通過輸出相應下標的數，輸出數組
  for(var k in i){
      document.write(i[k]+",");
     /* break;/!*與java中一樣*!/*/
     /* continue;與Java中一樣*/

  }
  var stngs=new Array("fds","fds","dsds","Dsgg","gggg");
 var count=0;
  for(var h in stngs ){
      if (stngs [h].indexOf("d")!=-1||stngs[h].indexOf("D")!=-1){
          count++;
      }
      document.write(stngs[h]+"<br/>");
  }
  document.write(count);

//var myIn=document.getElementById(“in”)//通過ID獲取
//var myIn=document.getElementsByTagName(“button”)[0] ;//通過標籤名獲取返回值是數組
var myIn =document.getElementsByClassName(“ins”)[0];//通過class獲取元素
myIn.onclick=function(){
alert(“1”)
};
document.write(“你好”);
document.getElementById(“in”).innerHTML=“新文本”;
document.getElementsByTagName(“p”)[0].style.backgroundColor=“red”;
var ins=“123fdsf”;
var nam=print(ins);//字符串數組字轉換爲namber的數字
//從字符串的首位置開始是數字的可以轉
parseFloat();//有小數的
//判斷變量是不是數字
var iss=isNaN(ins);//不是數字，返回爲true，反之爲false
alert(nam);
//有參函數與java中的方法使用一樣
function study(count){
for(var int=1;int<=count;int ++){
document.write(“好好學習”);
}
return “4234”;
}
function qian(){
history.forward();
history.go(-1);
history.go(0);//刷新頁面
}
function tiao(){
location.href=“h1.html”;
}
function hou(){
history.back();//跳轉到下一個頁面
}
//動態時鐘
var span=document.getElementById(“time”);//通過id屬性訪問標籤
setInterval(“getTime()”,1000);
function getTime(){
var date=new Date();
var yea=date.getFullYear();//獲取當前年份
var month=date.getMonth()+1;//獲取當前月份月份是從0開始計算的
var day=date.getDate();//獲取當前日期
var hour=date.getHours();//獲取當前時
var minutes=date.getMinutes();//獲取當前分
var sec=date.getSeconds();//獲取當前秒
//拼接時間
var str=yea+"-"+month+"-"+day+"-"+hour+":"+minutes+":"+sec;
//對span進行重新賦值
span.innerHTML=str;
}
var li1=document.getElementById(“span”);
var li2=li1.previousElementSibling;//獲取到同級的前一個元素
var i3=li2.nextElementSibling;//獲取到同級的下一個元素
var ul=document.getElementById(“book”);
var lis=ul.lastElementChild;//最後一個子元素
var liss=ul.firstElementChild;//第一個子元素
var fs =ul.childNodes;//所有的子元素,下標從1開始
alert(fs[1].innerHTML);
var fa=lis.parentNode;//直接父元素
alert(fa.getAttribute(“id”));//獲取屬性值
function add(){
//創建標籤對象
var li =document.createElement(“li”);
//添加內容
li.innerHTML=" 西遊記";
var ul=document.getElementsByTagName(“ul”)[0];
//父元素添加子元素
//插入標籤關鍵字 appendChild
// ul.appendChild(li);
//添加到某個元素前面
var li2=document.getElementById(“spa”);
ul.insertBefore(li,li2);
//複製一個元素（標籤）
var li3=li2.cloneNode(true);//必須寫布爾值 true如果有子標籤也會複製，flash就複製自己
ul.appendChild(li3);
}
function del(){
var li2=document.getElementById(“spa”);
var ul=document.getElementsByTagName(“ul”)[0];
//父元素刪除子元素
ul.remove(li2);
}
function re(){
//創建標籤對象
var li =document.createElement(“li”);
//添加內容
li.innerHTML=" 西遊記";
var li2=document.getElementById(“spa”);
var ul=document.getElementsByTagName(“ul”)[0];
//新元素替換舊元素
ul.replaceChild(li,li2);
}
function change(){
var p=document.getElementsByTagName(“p”)[0];
//添加定義好的樣式
p.className=“tset”;
}

面向對象

對象
a) 類；在javascript中表示是引用類型，是一種數據結構，將數據（屬性也就是變量）和功能（函數）組織在一起
b) 對象；某個特定引用類型的實例
對象組成包括屬性與方法
a) 屬性等於變量
b) 方法爲函數
函數可以與java中一樣，直接調用，如
var str=“是一個字符串”;//聲明變量
function shoInfo(){
document.write(str+"
");//通過函數進行輸出
}
shoInfo();//調用函數
a) 編寫自己的方法時不能直接用=“內容”，要通過函數來對其方法進行賦值從而編寫自己的方法；如
ste.show=function(){
document.write(“我是時鐘”);
};函數默認爲window的對象
Window對象（默認的this）
a) This與java中的一樣
事件
Onmouseover鼠標移動到某元素上
Onmouseout鼠標從某個元素移開

Winform；應用程序中的一個對話框

jQuery事件
a) 基礎事件
i. 鼠標事件
鼠標事件是當用戶在文檔上移動或單擊時而產生的事件
a) Click( )；觸發或將函數綁定到指定的元素的click事件（鼠標單擊時執行）
b) Mouseover（）；觸發或將函數綁定到指定的元素的Mouseover事件（鼠標指針移過時）
方法演示

c) Mouseout（）；觸發或將函數綁定到指定的元素的Mouseout事件（鼠標指針移出時）
Mouseover Mouseout 與Mouseenter Mouseleave事件的不同點與相同點

d) Mouseenter（）；觸發或將函數綁定到指定的元素的Mouseenter事件（鼠標指針進入時）
e) Mouseleave（）；觸發或將函數綁定到指定的元素的Mouseleave事件（鼠標指針離開時）
ii. 鍵盤事件（每次按下或者釋放鍵盤是都會產生的事件）
keydown();觸發或將函數綁定到指定的元素的keydown事件（按下鍵盤時執行）
keyup()觸發或將函數綁定到指定的元素的keyup事件（釋放按鍵時執行）
ketpress()觸發或將函數綁定到指定的元素的ketpress事件（產生可打印的字符時）
a) 使用鍵盤按下或釋放時的事件（代碼如下）
$(“input”).keydown(function(){
//append方法是在被選擇元素內部插入指定內容
$(“span”).append(“keydown”);
}).keyup(function(){
$(“span”).append(“keyup”);
}).keypress(function(){
$(“span”).append(“keypress”);
})
補充內容event方法，通過該方法獲取用戶在鍵盤上按下的鍵位是多少
a) 代碼
//獲取按下的鍵位 event
$(document).keydown(function(event){
//通過event.keyCode來判斷用戶按下的鍵位 enter回車鍵鍵位值是13
if (event.keyCode==13){
//如果用戶按下的是enter鍵，彈出語句
alert(“確定要提交嗎？”)
}
})

iii. Window事件(瀏覽器事件)
語法$( 屬性 ).rezize ( );
語法
$(window).ready(function(){
console.log(“瀏覽器被調整了！”)
})
iv. 表單事件
b) 複合事件（hover（）事件與）
i. 鼠標光標懸停事件
ii. 鼠標連續點擊事件（toggle（（有參數，沒有參數爲顯示隱藏））事件）
iii. 鼠標光標離開事件

綁定事件與移除事件
a) 綁定事件(在一個元素上添加一個或多個事件，以及處理函數等)
i. bind(type,[date ],fn );

ii. 綁定單個事件

iii. 語法（代碼）
$("#ul1").hide();//將內容進行隱藏
//使用bind進行綁定單個事件
$("#a1").bind(“mouseover”,function(){
$("#ul1").show();//通過鼠標懸浮顯示內容
})
i. 綁定多個事件
綁定多個事件就是在原有的基礎上添加新的事件（代碼如下）
$("#a1").bind({
mouseover:function(){
$("#ul1").show();//通過鼠標懸浮顯示內容
},
mouseout:function(){
$("#ul1").hide();//通過鼠標離開隱藏內容
}
})

b) 移除事件（使用unbind ( )方法）
i. 語法
添加和移除事件
a) 語法

添加css樣式的時候如果通過jQuery進行添加的話會不好更改，通過addclass進行添加的話方便移除（利用removeclass進行移除）
5. HTML代碼的使用
a) 具體代碼（註解爲筆記內容）

節點
a) 代碼詳情
var li= $("<li>今年</li>");//工廠模式也可以書寫爲 var li="今年" //$ (“ul”).append(li);//父元素末尾添加子元素
// $("#xing").before(li);//給同級元素添加
// $("#xing").remove();//刪除整個節點內容事件不存在
// $("#xing").empty();//清空節點內容事件還存在
//替換節點
var li4=“
明年

遍歷（each的使用）
a) 代碼詳情
//遍歷
var lis=$(“li”);//創建對象
//循環處理對象，處理函數（操作）
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsction(){ alert($ (this).html());
})

JavaScript基礎語法

hello javascript

Bom屬性

Dom屬性與方法

javascript函數

代碼樣式

SpringBoot整合vue實例

SpringBoot整合activeMq消息中間件

java在線瀏覽文件

docker中安裝rabbitmq（基本使用）

SpringBoot日誌輸出到控制檯

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結