本文目錄一覽:
- 1、dreamweaver里如何調試javascript代碼
- 2、如何將js 輸出到html源碼中?
- 3、javascript的test()方法
- 4、js讀取遠程網頁源碼
- 5、vs2010如何導入js源碼所在的文件夾
dreamweaver里如何調試javascript代碼
目前,常用的瀏覽器IE、Chrome、Firefox都有相應的腳本調試功能。我們先來看IE的:
1、在F12開發人員工具中進行調試
打開IE瀏覽器,按下F12鍵,就會打開開發人員工具,這是IE內置的開發人員開發工具,方便開發人員對HTML、CSS、Javascript等網頁資源進行跟蹤調試使用的。
如果你打開的時候沒有固定在網頁底部,可以點擊右上角菜單欄中的按鈕來完成。
我們看到在這個工具窗口裡面有幾個標籤頁,分別是:HTML、CSS、控制台、腳本、探查器和網絡,點開每一個標籤,可以執行相應的任務。
在HTML標籤窗口中,工具欄中的按鈕所執行的操作如下圖:
CSS標籤是用來查看樣式的;控制台顯示網頁中JS的各種輸出信息,包括錯誤信息、用戶日誌等;打開腳本標籤頁,這裡面才是我們想要的內容。
我在圖中用黃色矩形選中連個控件,左側的下拉列表用來選擇文件,右側的按鈕用來啟動調試。當點擊啟動調試後,調試程序會將窗口最大化,我們在選中的文件中找到需要調試的位置,點擊左側邊欄添加斷點即可進行調試。
當有程序運行到我們的斷點處時,就可以進行調試了:
在這裡,我們可以使用快捷鍵進行操作,常用的快捷鍵如下:
F9:添加/移除 斷點
F10:逐過程,即跳過該語句中的方法、表達式等
F11:逐語句調試,即單步調試,會跳入方法、表達式,進行逐語句的跟蹤調試
在執行過程中,如果我們要執行即時的代碼,我們就需要在右側的窗格中輸入代碼,按回車即可:
如果要執行多行代碼,點擊運行按鈕右側的雙箭頭,就會打開多行模式。我就不再截圖片了。
這種直接在瀏覽器中調試的方法同樣適用於Google瀏覽器Chrome和FireFox FireDebug,只不過在細枝末葉上面有些不同罷了,主體的功能都是一樣的。
按F12鍵進入開發者工具,可以查看源代碼、樣式和js:
點擊Scripts按鈕,可以打開這個調試窗口,裡面包含了網頁中腳本文件源碼,點擊左側的按鈕可以打開選擇文件的側窗口。
2、使用debugger關鍵字進行調試
這種方法很簡單,我們只需要在進行調試的地方加入debugger關鍵字,然後當瀏覽器運行到這個關鍵字的時候,就會中斷:
設置以後就可以使用debugger關鍵字進行調試了;進過這樣的設置,我們還可以捕獲到意外的錯誤,進行跟蹤調試。
如何將js 輸出到html源碼中?
HTML中調用JS代碼。
js代碼註解:javascript代碼,可直接在客戶端解釋執行,html中調用js代碼的方法有兩種:一、將javascript寫在html文件中,在html中調用js函數等;二、js代碼寫一個文件中,在html中引用該文件,使用js文件中定義的js函數。
調用方法:
1、打開Dreamweaver軟件,在創建新項目下選擇HTML;
2、點擊“文件”——“另存為”——文件命名為test——保存在電腦桌面;
3、編寫html文件,html文件包含用戶名及密碼輸入文本框,確定和取消按鈕;
4、在title標籤下插入script language=”JavaScript”js代碼/script,在html中調用js函數;
5、js代碼編寫及html調用js代碼完成保存tset.html文件,在瀏覽器中打開test.html文件,檢查js代碼執行效果;
6、在Dreamweaver軟件中新建check.js文件(方法同html文件新建),check文件中輸入校驗函數;
7、test.html的title標籤下引用check.js文件;
8、在程序中引用check.js文件中js函數,在瀏覽器中刷新test.hmtl文件,然在username的輸入框中輸入非法字符來檢驗js代碼。
javascript的test()方法
這個方法有時有問題,你用這個方法就好了和test的功能一樣,判斷正則表達式匹配的
var patrn=/^(\w){4,10}$/;
if (!patrn.exec(p1)){
alert(”222″);
}
js讀取遠程網頁源碼
代碼如下:
!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
html
head
meta http-equiv=”Content-type” content=”text/html; charset=utf-8″
title遠程網頁源代碼讀取/title
style type=”text/css”
/* 頁面字體樣式 */
body, td, input, textarea {
font-family:Arial;
font-size:12px;
}
/style
script type=”text/javascript”
//用於創建XMLHttpRequest對象
function createXmlHttp() {
//根據window.XMLHttpRequest對象是否存在使用不同的創建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等瀏覽器支持的創建方式
} else {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);//IE瀏覽器支持的創建方式
}
}
//直接通過XMLHttpRequest對象獲取遠程網頁源代碼
function getSource() {
var url = document.getElementById(“url”).value; //獲取目標地址信息
//地址為空時提示用戶輸入
if (url == “”) {
alert(“請輸入網頁地址 。”);
return;
}
document.getElementById(“source”).value = “正在加載……”; //提示正在加載
createXmlHttp(); //創建XMLHttpRequest對象
xmlHttp.onreadystatechange = writeSource; //設置回調函數
xmlHttp.open(“GET”, url, true);
xmlHttp.send(null);
}
//將遠程網頁源代碼寫入頁面文字區域
function writeSource() {
if (xmlHttp.readyState == 4) {
document.getElementById(“source”).value = xmlHttp.responseText;
}
}
/script
/head
body
h1遠程網頁源代碼讀取/h1
div
地址:input type=”text” id=”url”
input type=”button” onclick=”getSource()” value=”獲取源碼”
/div
textarea rows=”10″ cols=”80″ id=”source”/textarea
/body
/html
vs2010如何導入js源碼所在的文件夾
把js所在的目錄連同目錄一同拷到工程下,在你工程的解決方案管理器上點擊”顯示所有文件”。不在工程中的文件或者文件夾顯示為白色。點擊文件或者文件夾右鍵”包含在項目中”。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/227578.html