當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript知识笔记（一）——入门、语句、注释、变量、函数、输出内容、对话框、窗口

發布時間：2023/11/30 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript知识笔记（一）——入门、语句、注释、变量、函数、输出内容、对话框、窗口小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript可以提供漂亮的網頁、令用戶滿意的上網體驗。

1.增強頁面動態效果(如:下拉菜單、圖片輪播、信息滾動等)

2.實現頁面與用戶之間的實時、動態交互(如:用戶注冊、登陸驗證等)

引用JavaScript：

一、使用<script>標簽在HTML文件中添加JavaScript代碼，如圖:

二、HTML文件和JS代碼分開,并單獨創建一個JavaScript文件(簡稱JS文件),其文件后綴通常為.js，然后將JS代碼直接寫在JS文件中。

注意:在JS文件中，不需要<script>標簽,直接編寫JavaScript代碼就可以了。

JS文件不能直接運行，需嵌入到HTML文件中執行，我們需在HTML中添加如下代碼，就可將JS文件嵌入HTML文件中。

我們可以將JavaScript代碼放在html文件中任何位置，但是我們一般放在網頁的head或者body部分。
放在<head>部分
最常用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會執行這個代碼，然后才解析頁面的其余部分。
放在<body>部分
JavaScript代碼在網頁讀取到該語句的時候就會執行。

注意:?javascript作為一種腳本語言可以放在html頁面中任何位置，但是瀏覽器解釋html時是按先后順序的，所以前面的script就先被執行。比如進行頁面顯示初始化的js必須放在head里面，因為初始化都要求提前進行（如給頁面body設置css等）；而如果是通過事件調用執行的function那么對位置沒什么要求的。

語句和符號：

JavaScript語句是發給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。

每一句JavaScript代碼格式:?語句;

先來看看下面代碼

例子中的alert("hello!");就是一個JavaScript語句。

一行的結束就被認定為語句的結束，通常在結尾加上一個分號";"來表示語句的結束。

看看下面這段代碼,有三條語句，每句結束后都有";"，按順序執行語句。

注意:

1.?“;”分號要在英文狀態下輸入，同樣，JS中的代碼和符號都要在英文狀態下輸入。

2.?雖然分號“;”也可以不寫，但我們要養成編程的好習慣，記得在語句末尾寫上分號。

注釋：

注釋能提高代碼的可讀性，幫助自己和別人閱讀和理解你所編寫的JavaScript代碼，注釋的內容不會在網頁中顯示。注釋可分為單行注釋與多行注釋兩種。

我們為了方便閱讀，注釋內容一般放到需要解釋語句的結尾處或周圍。

單行注釋，在注釋內容前加符號 “//”。

多行注釋以"/*"開始，以"*/"結束。

變量：

從字面上看，變量是可變的量；從編程角度講，變量是用于存儲某種/某些數值的存儲器。我們可以把變量看做一個盒子，為了區分盒子，可以用BOX1,BOX2等名稱代表不同盒子，BOX1就是盒子的名字（也就是變量的名字）。

定義變量使用關鍵字var,語法如下：

var 變量名

變量名可以任意取名，但要遵循命名規則:

? ? 1.變量必須使用字母、下劃線(_)或者美元符($)開始。

? ? 2.然后可以使用任意多個英文字母、數字、下劃線(_)或者美元符($)組成。

? ? 3.不能使用JavaScript關鍵詞與JavaScript保留字。

變量要先聲明再賦值，如下：

var mychar; mychar="javascript"; var mynum = 6;

變量可以重復賦值，如下：

var mychar; mychar="javascript"; mychar="hello";

注意:

1. 在JS中區分大小寫，如變量mychar與myChar是不一樣的，表示是兩個變量。

2. 變量雖然也可以不聲明，直接使用，但不規范，需要先聲明，后使用。

判斷語句：

if...else語句是在指定的條件成立時執行代碼，在條件不成立時執行else后的代碼。

語法:

if(條件) { 條件成立時執行的代碼 } else { 條件不成立時執行的代碼 }

假設我們通過年齡來判斷是否為成年人，如年齡大于等于18歲，是成年人，否則不是成年人。代碼表示如下:

函數：

函數是完成某個特定功能的一組語句。如沒有函數，完成任務可能需要五行、十行、甚至更多的代碼。這時我們就可以把完成特定功能的代碼塊放到一個函數里，直接調用這個函數，就省重復輸入大量代碼的麻煩。

如何定義一個函數呢？基本語法如下:

function 函數名() {函數代碼; }

說明:

1. function定義函數的關鍵字。

2. "函數名"你為函數取的名字。

3. "函數代碼"替換為完成特定功能的代碼。

我們來編寫一個實現兩數相加的簡單函數,并給函數起個有意義的名字：“add2”，代碼如下：

function add2(){var sum = 3 + 2;alert(sum); }

函數調用:函數定義好后，是不能自動執行的，所以需調用它，只需直接在需要的位置寫函數就ok了,代碼如下(單擊按鈕后，調用函數onclick):

輸出內容：

document.write()?可用于直接向 HTML 輸出流寫內容。簡單的說就是直接在網頁中輸出內容。

第一種:輸出內容用“”括起，直接輸出""號內的內容。

第二種:通過變量，輸出內容。

第三種:輸出多項內容，內容之間用+號連接。

<scripttype="text/javascript">var mystr="hello";document.write(mystr+"I love JavaScript"); //多項內容之間用+號連接 </script>

第四種:輸出HTML標簽，并起作用，標簽使用“”括起來。

警告對話框：

我們在訪問網站的時候，有時會突然彈出一個小窗口，上面寫著一段提示信息文字。如果你不點擊“確定”，就不能對網頁做任何操作，這個小窗口就是使用alert實現的。

語法:

alert(字符串或變量);

看下面的代碼:

注:alert彈出消息對話框(包含一個確定按鈕)。

結果:按順序彈出消息框

注意:

1. 在點擊對話框"確定"按鈕前，不能進行任何其它操作。

2. 消息對話框通常可以用于調試程序。

3. alert輸出內容，可以是字符串或變量，與document.write 相似。

確認對話框：

confirm 消息對話框通常用于允許用戶做選擇的動作，如：“你對嗎？”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。

語法:

confirm(str);

參數說明:

str：在消息對話框中要顯示的文本返回值: Boolean值

返回值:

當用戶點擊"確定"按鈕時，返回true 當用戶點擊"取消"按鈕時，返回false

注:?通過返回值可以判斷用戶點擊了什么按鈕

看下面的代碼:

結果:

注: 消息對話框是排它的，即用戶在點擊對話框按鈕前，不能進行任何其它操作。

提問對話框：

prompt彈出消息對話框,通常用于詢問一些需要與用戶交互的信息。彈出消息對話框（包含一個確定按鈕、取消按鈕與一個文本輸入框）。

語法:

prompt(str1, str2);

參數說明：

str1: 要顯示在消息對話框中的文本，不可修改 str2：文本框中的內容，可以修改

返回值:

1. 點擊確定按鈕，文本框中的內容將作為函數返回值 2. 點擊取消按鈕，將返回null

看看下面代碼:

var myname=prompt("請輸入你的姓名:"); if(myname!=null){ alert("你好"+myname); } else{ alert("你好 my friend."); }

結果:

注:在用戶點擊對話框的按鈕前，不能進行任何其它操作。

打開新窗口：

open() 方法用于打開一個新的窗口。

語法：

window.open(<URL>, <窗口名稱>, <參數字符串>)

參數說明:

URL：打開窗口的網址或路徑。 窗口名稱：被打開窗口的名稱。可以是"_top"、"_blank"、"_selft"等。 參數字符串：設置窗口參數，各參數用逗號隔開。

參數表:

例如:打開http://www.imooc.com網站，大小為300px * 200px，無菜單，無工具欄，無狀態欄，有滾動條窗口：

注意：

1.參數之間逗號及等號前后有空格，該字符串無效，只有刪除空格才能正常運行。

2.運行結果考慮瀏覽器兼容問題。

關閉窗口：

close()關閉窗口

用法：

window.close(); //關閉本窗口

或

<窗口對象>.close(); //關閉指定的窗口

例如:關閉新建的窗口。

注意:上面代碼在打開新窗口的同時，關閉該窗口，看不到被打開的窗口。

————————————————————————————————————————————————————————————————

以上內容參考自慕課網：http://www.imooc.com

總結

以上是生活随笔為你收集整理的JavaScript知识笔记（一）——入门、语句、注释、变量、函数、输出内容、对话框、窗口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。