JS筆記

<meta charset="UTF-8">
這個筆記主要是針對于我看了JS權(quán)威編程指南后偶有感悟?qū)懙?/strong>
由于我昨天已經(jīng)看了五十頁,現(xiàn)在就從中間開始寫吧
現(xiàn)在是JS的算術(shù)運算:
算術(shù)溢出時不會報錯,會用Infinity來表示(正無窮大),當(dāng)然加個負(fù)號就是負(fù)無窮大了

Var n=17;//利用to.String來轉(zhuǎn)化進制
binary_string=n.toString(2);//轉(zhuǎn)換為"10001"
octal_string="0"+n.toString(8);//轉(zhuǎn)換為"021"
hex_string="0x"+n.toString(16);//轉(zhuǎn)換為"0x11"

更多特定版本的to.String()方法:
數(shù)組=>轉(zhuǎn)化=>每個數(shù)組元素轉(zhuǎn)化為一個字符串,然后用逗號間隔,最后再合并成一個字符串。
函數(shù)類(Function class)=>轉(zhuǎn)化=>返回這個函數(shù)定義的表達方式。
日期類(Date class)=>轉(zhuǎn)化=>返回一個可讀的日期和時間字符串。
RegExp類=>轉(zhuǎn)化=>將RegExp對象轉(zhuǎn)化為正則表達式直接量的字符串。

對象轉(zhuǎn)化為原始值:
所有對象都繼承了兩個轉(zhuǎn)化方法:
第一個是to.String(),返回一個反應(yīng)這個對象的字符串。
第二個是valueOf(),對于valueOf,如果存在任意原始值,它就默認(rèn)將對象轉(zhuǎn)換為它的原始值。
對象是復(fù)合值,而且大多數(shù)對象無法真正表示為一個原始值。數(shù)組,函數(shù),和正則表達式簡單的繼承了這個默認(rèn)方法,valueOf()方法只是簡單的返回對象本身。

JavaScript中對象到字符串的轉(zhuǎn)化所需要的步驟:
首先:如果對象具有to.String()的方法,那么首先調(diào)用這個方法,如果返回一個原始值,那么JavaScript就將這個值轉(zhuǎn)化為字符串并返回這個字符串的結(jié)果。(原始值=>字符串)
第二:如果對象沒有to.String()方法,或者這個方法不返回一個原始值,那么就會調(diào)用valueOf()方法。如果存在這個方法,則調(diào)用。如果返回值是原始值,就把這個值轉(zhuǎn)化為字符串。,并返回這個字符串的結(jié)果。
否則:無法從這兩個方法之中獲得一個原始值,那么將拋出一個類型錯誤異常。
<在對象到數(shù)字的過程中,也是同理,但是首先調(diào)用的是valueOf()方法。>
例子:空數(shù)組轉(zhuǎn)化為0的過程:空數(shù)組=>空字符串=>0.

var o={x:1,y:{z:3}};//一個示例對象
var a=[o,4,[5,6]];//一個包含這個對象的示例數(shù)組
o.x=>1
o.y.z=>3
o["x"]=>1
a[1]=>4
a[2]["1"]=>6//表達式a[2]中索引為1的元素
a[0].x=>1//表達式a[0]的x屬性

左移<<,將一個值左移一位相當(dāng)于它乘以2,右移一位除以2(忽略余數(shù))
帶符號右移>>
無符號右移>>>

1+2//結(jié)果是3
"1"+"2"http://結(jié)果是"12"
"1"+2//2轉(zhuǎn)換為"2"。結(jié)果是12
11<3//結(jié)果是false
"11"<"3"http://字符串的比較,結(jié)果為false,這里比較Unicode碼
"11"<3//數(shù)字的比較,"11"轉(zhuǎn)換為11.結(jié)果為false
"one"<3//數(shù)字的比較,"one"轉(zhuǎn)換為NaN,結(jié)果false(如果其中一個操作數(shù)是NaN,那么結(jié)果總是返回false)

JavaScript語句小結(jié)
**break break[label] ** 退出最內(nèi)層循環(huán)或者退出switch或者退出label指定的語句
case case expression: 在switch語句中標(biāo)記一條語句
continue continue[label]; 重新開始最內(nèi)層的循環(huán)或者重新開始label指定的循環(huán)
**default ** 在switch語句中標(biāo)記默認(rèn)的語句
do/while
for
**function function name(param[],...){body} ** 聲明一個函數(shù)
**if/else if(expr)statement1 [else statement2] ** 執(zhí)行statement1或者statement2
label label:statement 給statement制定一個名字

CSS

盒模型,浮動,定位,清除浮動
CSS清除浮動的幾種方法(至少兩種)

使用帶clear屬性的空元素
使用CSS的overflow屬性;
使用CSS的:after偽元素;
使用鄰接元素處理;

盒模型
盒模型主要定義四個區(qū)域:內(nèi)容(content)、邊框距(padding)、邊界(border)和邊距(margin)

寫出幾種IE6 BUG的解決方法

雙邊距BUG float引起的 使用display
3像素問題 使用float引起的 使用dislpay:inline -3px
超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active
Ie z-index問題 給父級添加position:relative
Png 透明 使用js代碼 改
Min-height 最小高度 !Important 解決’
select 在ie6下遮蓋 使用iframe嵌套
為什么沒有辦法定義1px左右的寬度容器(IE6默認(rèn)的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)

定位
定位的方法有很多種,它們分別是靜態(tài)(static),絕對定位(absolute),固定(fixed),相對定位(relative)。在這個教程里,我不逐一講,只講最常用也是最實用的兩個定位方法:絕對定位(absolute)、相對定位(relative)。
絕對定位
將被賦予此定位方法的對象從文檔流中拖出,使用left,right,top, bottom等屬性相對于其最接近的一個最有定位設(shè)置的父級對象進行絕對定位,如果對象的父級沒有設(shè)置定位屬性,即還是遵循HTML定位規(guī)則的,則依據(jù) body 對象左上角作為參考進行定位。絕對定位對象可層疊,層疊順序可通過 z-index 屬性控制,z-index值為無單位的整數(shù),大的在最上面,可以有負(fù)值。

相對定位(relative):對象不可層疊,依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移自身位置。同樣可以用z-index分層設(shè)計。

Ajax中我們經(jīng)常用到get和post請求.那么什么時候用get請求,什么時候用post方式請求呢? 在做回答前我們首先要了解get和post的區(qū)別.

1、 get是把參數(shù)數(shù)據(jù)隊列加到提交表單的ACTION屬性所指的URL中,值和表單內(nèi)各個字段一一對應(yīng),在URL中可以看到。post是通過HTTP post機制,將表單內(nèi)各個字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。

2、 對于get方式,服務(wù)器端用Request.QueryString獲取變量的值,對于post方式,服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)。兩種方式的參數(shù)都可以用Request來獲得。

3、get傳送的數(shù)據(jù)量較小,不能大于2KB。post傳送的數(shù)據(jù)量較大,一般被默認(rèn)為不受限制。但理論上,因服務(wù)器的不同而異.

4、get安全性非常低,post安全性較高。
清除浮動有哪些方式?比較好的方式是哪一種?
(Q1)
(1)父級div定義height。
(2)結(jié)尾處加空div標(biāo)簽clear:both。
(3)父級div定義偽類:after和zoom。
(4)父級div定義overflow:hidden。
(5)父級div定義overflow:auto。
(6)父級div也浮動,需要定義寬度。
(7)父級div定義display:table。
(8)結(jié)尾處加br標(biāo)簽clear:both。
(Q2)比較好的是第3種方式,好多網(wǎng)站都這么用。

Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
(Q1)<!DOCTYPE>告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。
(Q2)標(biāo)準(zhǔn)模式的排版和JS運作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。在兼容模式中,頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作
doctype用來規(guī)范瀏覽器的行為
經(jīng)過總結(jié)使用Ajax可以分為四步,分別如下:
1:創(chuàng)建引擎(xmlHttpRequest對象)
不同的瀏覽器創(chuàng)建 XMLHttpRequest 對象的方法是有差異的,針對IE使用ActiveXObject,針對其他瀏覽器用xmlHttpRequest,但是如果針對不同版本的的瀏覽器可以使用“try and catch”語句來進行創(chuàng)建
2:事件處理函數(shù),處理服務(wù)器的響應(yīng)結(jié)果。
onreadystatechange事件:該事件處理函數(shù)由服務(wù)器觸發(fā),而不是用戶,相當(dāng)于監(jiān)聽,監(jiān)聽服務(wù)器每個動作
readyState 屬性表示Ajax請求的當(dāng)前狀態(tài)。它的值用數(shù)字代表。分別是:
0 代表未初始化。 還沒有調(diào)用 open 方法
1 代表正在加載。 open 方法已被調(diào)用,但 send 方法還沒有被調(diào)用
2 代表已加載完畢。send 已被調(diào)用。請求已經(jīng)開始
3 代表交互中。服務(wù)器正在發(fā)送響應(yīng)
4 代表完成。響應(yīng)發(fā)送完畢
status 屬性表示狀態(tài)碼,也是用數(shù)字表示,分別是:
404 沒找到頁面(not found)
403 禁止訪問(forbidden)
500 內(nèi)部服務(wù)器出錯(internal service error)
200 一切正常(ok)
304 沒有被修改(not modified)(服務(wù)器返回304狀態(tài),表示源文件沒有被修改 )
responseText屬性包含了從服務(wù)器發(fā)送的數(shù)據(jù)
每次 readyState 值的改變,都會觸發(fā) readystatechange 事件
3:打開一個連接open(method, url, asynch)
允許客戶端用一個Ajax調(diào)用向服務(wù)器發(fā)送請求。
三個參數(shù)的含義如下:
method:請求類型,類似 “GET”或”POST”的字符串
url:請求路徑字符串,指向所請求的服務(wù)器上的那個文件(servlet,jsp,action)
asynch:表示請求是否要異步傳輸,默認(rèn)值為true(異步)
4:發(fā)送數(shù)據(jù)send(data)
data:向服務(wù)器發(fā)的數(shù)據(jù),如果是get方式data為null就行,即使傳了參數(shù),服務(wù)器也收不到。如果為post方式在send(data)之前還要設(shè)置requestHeader("Content-Type","application/x-www-form-urlencoded")。

  new操作符具體干了什么呢?

(1)創(chuàng)建一個空對象,并且 this 變量引用該對象,同時還繼承了該函數(shù)的原型。
(2)屬性和方法被加入到 this 引用的對象中。
(3)新創(chuàng)建的對象由 this 所引用,并且最后隱式的返回 this 。

Ajax

第一步:
var xhttp;
if(Window.XMLHttpRequest)
{
    xhttp=new XMLHttpRequest();
}
else
{
    xhttp= new ActiveXObject("Microsoft.XMLHTTP");
}

第二步:
post 發(fā)送請求什么時候能夠使用呢?
(1)更新一個文件或者數(shù)據(jù)庫的時候。
(2)發(fā)送大量數(shù)據(jù)到服務(wù)器,因為post請求沒有字符限制。
(3)發(fā)送用戶輸入的加密數(shù)據(jù)

xhttp.send();使用get方法發(fā)送請求到服務(wù)器。
xhttp.send(string);使用post方法發(fā)送請求到服務(wù)器

get例子:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.open("GET", "index.html", true);
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send(); 

post例子

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

post表單數(shù)據(jù)需要使用xmlhttprequest對象的setRequestHeader方法增加一個HTTP頭。

post表單例子

xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); 
async=true 當(dāng)服務(wù)器準(zhǔn)備響應(yīng)時將執(zhí)行onreadystatechange函數(shù)。
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "index.aspx", true);
xhttp.send(); 
asyn=false 則將不需要寫onreadystatechange函數(shù),直接在send后面寫上執(zhí)行代碼。
xhttp.open("GET", "index.aspx", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; 

第三步,使用xmlhttprequest對象的responseText或responseXML屬性獲得服務(wù)器的響應(yīng)。
使用responseText屬性得到服務(wù)器響應(yīng)的字符串?dāng)?shù)據(jù),使用responseXML屬性得到服務(wù)器響應(yīng)的XML數(shù)據(jù)。

例子如下:

document.getElementById("demo").innerHTML = xhttp.responseText; 
服務(wù)器響應(yīng)的XML數(shù)據(jù)需要使用XML對象進行轉(zhuǎn)換。

例子:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt; 

第四步,onreadystatechange函數(shù),當(dāng)發(fā)送請求到服務(wù)器,我們想要服務(wù)器響應(yīng)執(zhí)行一些功能就需要使用onreadystatechange函數(shù),每次xmlhttprequest對象的readyState發(fā)生改變都會觸發(fā)onreadystatechange函數(shù)。
onreadystatechange屬性存儲一個當(dāng)readyState發(fā)生改變時自動被調(diào)用的函數(shù)。
readyState屬性,XMLHttpRequest對象的狀態(tài),改變從0到4,0代表請求未被初始化,1代表服務(wù)器連接成功,2請求被服務(wù)器接收,3處理請求,4請求完成并且響應(yīng)準(zhǔn)備。
status屬性,200表示成功響應(yīng),404表示頁面不存在。
在onreadystatechange事件中,服務(wù)器響應(yīng)準(zhǔn)備的時候發(fā)生,當(dāng)readyState==4和status==200的時候服務(wù)器響應(yīng)準(zhǔn)備。

例子:

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
} 

//函數(shù)作為參數(shù)調(diào)用

<!DOCTYPE html>
<html>
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button"
onclick="loadDoc('index.aspx', myFunction)">Change Content
</button>
<script>
function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>

幾種瀏覽器的內(nèi)核:
一、Trident內(nèi)核代表產(chǎn)品Internet Explorer,又稱其為IE內(nèi)核。Trident(又稱為MSHTML),是微軟開發(fā)的一種排版引擎。使用Trident渲染引擎的瀏覽器包括:IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
2
二、Gecko內(nèi)核代表作品Mozilla FirefoxGecko是一套開放源代碼的、以C++編寫的網(wǎng)頁排版引擎。Gecko是最流行的排版引擎之一,僅次于Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9。
3
三、WebKit內(nèi)核代表作品Safari、Chromewebkit 是一個開源項目,包含了來自KDE項目和蘋果公司的一些組件,主要用于Mac OS系統(tǒng),它的特點在于源碼結(jié)構(gòu)清晰、渲染速度極快。缺點是對網(wǎng)頁代碼的兼容性不高,導(dǎo)致一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome。
4
四、Presto內(nèi)核代表作品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎,供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎,包括加入動態(tài)功能,例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版。
接下來是我看JavaScript的一些筆記
Windows對象定義了一些方法,比如alert(),可以彈出一個對話框用來顯示一些信息,還有setTimeout(),可以注冊一個函數(shù),在給定的一段時間觸發(fā)一個回調(diào):

setTimeout(function(){ alert("hello word");},2000);//等待兩秒,然后說hello

innerHTML的用法:
innerHTML在HTML中是雙向功能:獲取對象的功能或者向?qū)ο笾胁迦雰?nèi)容。

<div id="aa">這是內(nèi)容</div> 
//我們可以通過下面這句來獲取id為aa的對象的內(nèi)嵌內(nèi)容;
 document.getElementById('aa').inner[HTML];

也可以對某對象插入內(nèi)容

 document.getElementById('abc').inner[HTML]='這是被插入的內(nèi)容'; //這樣就能向id為abc的對象插入內(nèi)容。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,534評論 19 139
  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 12,332評論 6 13
  • 個人入門學(xué)習(xí)用筆記、不過多作為參考依據(jù)。如有錯誤歡迎斧正 目錄 簡書好像不支持錨點、復(fù)制搜索(反正也是寫給我自己看...
    kirito_song閱讀 2,648評論 1 37
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法,內(nèi)部類的語法,繼承相關(guān)的語法,異常的語法,線程的語...
    子非魚_t_閱讀 34,638評論 18 399
  • 昨天,也不知道為啥,心情那么低落,情緒那么壞,見誰都吵吵,老爸也氣得跳腳,經(jīng)過一夜的沉淀,心情平復(fù)了不少,也...
    聆聽_efd1閱讀 303評論 0 0

友情鏈接更多精彩內(nèi)容