JavaScript知識筆記(一)——入門、語句、注釋、變量、函數、輸出內容、對話框、窗口

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

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

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

引用JavaScript

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

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

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

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

<script src="script.js"></script>

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

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

語句和符號

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

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

先來看看下面代碼

<script type="text/javascript">
   alert("hello!");
</script>

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

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

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

<script type="text/javascript">document.write("I");document.write("love");document.write("JavaScript");
</script>

注意:

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

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

注釋

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

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

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

<script type="text/javascript">document.write("單行注釋使用'//'");  // 我是注釋,該語句功能在網頁中輸出內容
</script>

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

<script type="text/javascript">document.write("多行注釋使用/*注釋內容*/");/*多行注釋養成書寫注釋的良好習慣*/
</script>

變量

從字面上看,變量是可變的量;從編程角度講,變量是用于存儲某種/某些數值的存儲器。我們可以把變量看做一個盒子,為了區分盒子,可以用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歲,是成年人,否則不是成年人。代碼表示如下:

<script type="text/javascript">
   var myage = 18;if(myage>=18)  //myage>=18是判斷條件
   { document.write("你是成年人。");}
   else  //否則年齡小于18
   { document.write("未滿18歲,你不是成年人。");}
</script>

函數

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

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

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

說明:

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

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

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

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

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

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

輸出內容

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

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

<script type="text/javascript">document.write("I love JavaScript!"); //內容用""括起來,""里的內容直接輸出。
</script>

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

<script type="text/javascript">var mystr="hello world!";document.write(mystr);  //直接寫變量名,輸出變量存儲的內容。
</script>

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

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

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

<script type="text/javascript">var mystr="hello";
document.write(mystr+"<br>");//輸出hello后,輸出一個換行符document.write("JavaScript");
</script>

警告對話框

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

語法:

alert(字符串或變量);  

看下面的代碼:

<script type="text/javascript">var mynum = 30;alert("hello!");alert(mynum);
</script>

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

結果:按順序彈出消息框

注意:

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

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

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

確認對話框

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

語法:

confirm(str);

參數說明:

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

返回值:

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

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

看下面的代碼:

<script type="text/javascript">var mymessage=confirm("你喜歡JavaScript嗎?");if(mymessage==true){   document.write("很好,加油!");   }else{  document.write("JS功能強大,要學習噢!");   }
</script>

結果:

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

提問對話框

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,無菜單,無工具欄,無狀態欄,有滾動條窗口:

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

注意:

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

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

關閉窗口

close()關閉窗口

用法:

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

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

例如:關閉新建的窗口。

<script type="text/javascript">var mywin=window.open('http://www.imooc.com'); //將新打的窗口對象,存儲在變量mywin中mywin.close();
</script>

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

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

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/386129.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/386129.shtml
英文地址,請注明出處:http://en.pswp.cn/news/386129.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HTML如何添加錨點,總結到位

標簽語義化&#xff1a; 語義和默認樣式的區別&#xff1a; 默認樣式是瀏覽器設定的一些常用tag的表現形式&#xff1b;語義化的主要目的就是讓大家直觀的認識標簽和屬性的用途和作用&#xff1b; 標簽語義化作用&#xff1a; 當只有HTML頁面時&#xff0c;沒有CSS&#xf…

JavaScript知識筆記(二)——事件

事件&#xff1a; JavaScript 創建動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。 比如說&#xff0c;當用戶單擊按鈕或者提交表單數據時&#xff0c;就發生一個鼠標單擊&#xff08;onclick&#x…

HTML如何添加錨點,我先收藏為敬

背景 我18年本科畢業&#xff0c;年前已有換工作想法&#xff0c;一直沒有付諸行動&#xff0c;疫情爆發后回到老家&#xff0c;年后開始找工作&#xff0c;對于自己水平不是很清楚&#xff0c;之前找工作一直都挺順利的。大學畢業沒有留在實習單位繼續做前端開發&#xff0c;…

JavaScript知識筆記(三)——內置對象、瀏覽器對象

內置對象&#xff1a; &#xff08;與Java很像&#xff09;JavaScript 中的所有事物都是對象&#xff0c;如:字符串、數值、數組、函數等&#xff0c;每個對象帶有屬性和方法。 對象的屬性&#xff1a;反映該對象某些特定的性質的&#xff0c;如&#xff1a;字符串的長度、圖像…

HTML如何添加錨點,文末領取面試資料

開始 我大學讀的是大專&#xff0c;在學校學的是機電一體化。臨近畢業的時候選擇了學習web前端技術&#xff0c;因為做機電實在又累工資又低&#xff0c;而我更喜歡坐辦公室的工作&#xff0c;有空調吹&#xff0c;我很現實&#xff0c;就是想多賺一點錢。到現在做了兩年前端的…

HTML如何添加錨點,論程序員成長的正確姿勢

前言 年前準備換工作&#xff0c;總結了一波面試最頻繁的面試問題跟大家交流。此文章是關于瀏覽器的常見問題&#xff0c;大概面試10家遇到6家提問類似問題&#xff08;主要是大廠和中廠&#xff09;。目前入職滴滴出行成都團隊。 css盒模型 1&#xff0c;css盒模型基本概念…

DOM(文檔對象模型)

文檔對象模型DOM&#xff08;Document Object Model&#xff09;定義訪問和處理HTML文檔的標準方法。 DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構&#xff08;節點樹&#xff09;。 先來看看下面代碼: 將HTML代碼分解為DOM節點層次圖: HTML文檔可以說由節點構成的集合&…

HTML實體字符列表,總結到位

前言 每年畢業季都能聽到很多報道說大學畢業生找工作難&#xff0c;以前看到這類新聞一直覺得無所謂。因為總覺得離我還早&#xff0c;但今年輪到我畢業了&#xff0c;才發現不幸終于降臨到我的頭上。 簡歷 首先肯定是要準備一份自己的簡歷&#xff0c;簡歷經常是給面試官的第…

java實現矩陣相乘

眾所周知&#xff0c;矩陣的乘法就是矩陣的行列相乘再相加。話不多說&#xff0c;直接上代碼&#xff1a; package test;public class matrixMultiply {public static void printMatrix(int[][] a, int[][] b) {int r a.length;int c b[0].length;double result[][] new dou…

你必須知道的CSS盒模型,面試建議

什么是HTML? HTML: ( Hypertext Markup Language )超文本標記語言&#xff0c;是一種標識性的語言。它包括一系列標簽&#xff0e;通過這些標簽可以將網絡上的文檔格式統一&#xff0c;使分散的Internet資源連接為一個邏輯整體。 特點: 簡易性&#xff1a;超級文本標記語言版…

你必須知道的CSS盒模型,順利通過阿里面試

前言 正式學習前端大概 3 年多了&#xff0c;接觸前端大概 4 年了&#xff0c;很早就想整理這個書單了&#xff0c;因為常常會有朋友問&#xff0c;前端該如何學習&#xff0c;學習前端該看哪些書&#xff0c;我就講講我學習的道路中看的一些書&#xff0c;雖然整理的書不多&a…

java中的幾種泛型類——HashSet、HashMap、TreeSet、TreeMap,遍歷map,排序,HashTable比較

HashSet HashSet<E>泛型類在數據組織上類似于數學上的集合&#xff0c;可以進行“交”、“并”、“差”等運算。HashSet<E>泛型類創建的對象稱為集合&#xff0c;如&#xff1a;HashSet<E> set HashSet<String>();那么set就是一個可以存儲string類型…

保駕護航金三銀四,100%好評!

前端的興起 前端真正興起和開始頻繁出現在大家的視線里&#xff0c;大概是在十年前。彼時的 Web 開發基本是由后端主導&#xff0c;前端能做的只是校驗一下數據、操作一下 DOM。&#xff08;其中數據檢驗是 JS 產生的根本原因&#xff1a;當時網絡太慢&#xff0c;在服務端檢驗…

java連接mysql數據庫(JDBC),存到二維數組里并輸出

java連接mysql數據庫都有固定的操作&#xff0c;步驟如下&#xff1a; 加載mysql驅動&#xff0c;一般都是com.mysql.jdbc.Driver。提供JDBC連接的URL。 創建數據庫的連接。要連接數據庫&#xff0c;需要向java.sql.DriverManager請求并獲得Connection對象。 創建一個Statem…

保駕護航金三銀四,萬字解析!

從事前端開發工作差不多3年了&#xff0c;自己也從一個什么都不懂的小白積累了一定的理論和實踐經驗&#xff0c;并且自己也對這3年來的學習實踐歷程有一個梳理&#xff0c;以供后面來細細回憶品味。 1、為什么選擇學習前端開發&#xff1f; 你可能是因為興趣&#xff0c;完成…

數據降維技術——PCA(主成分分析)

為什么要對數據進行降維&#xff1f; 在機器學習或者數據挖掘中&#xff0c;我們往往會get到大量的數據源&#xff0c;這些數據源往往有很多維度來表示它的屬性&#xff0c;但是我們在實際處理中只需要其中的幾個主要的屬性&#xff0c;而其他的屬性或被當成噪聲處理掉。比如&a…

保駕護航金三銀四,使用指南

前言 作為一個程序員&#xff0c;當然總是期望自己的代碼能「一次編寫&#xff0c;四處運行」&#xff0c;但真實經驗往往是「一處修改&#xff0c;百處填坑」&#xff0c;依賴落后了好幾個版本了想要升級、老代碼已經看著很不爽了打算重構&#xff0c;都需要下堅決的決心&…

社交網絡初探——鏈路預測

社交網絡可以用來描述現實社會中的實際網絡&#xff0c;它包括人與人之間的社會關系&#xff0c;物種之間的捕食關系&#xff0c;科學研究中的合作關系等。大量研究已經表明在真實世界中各種不同社交網絡具有許多共同的結構特征&#xff0c;例如小世界性質、無標度性、社團結構…

保駕護航金三銀四,內容太過真實

前言 正式學習前端大概 3 年多了&#xff0c;接觸前端大概 4 年了&#xff0c;很早就想整理這個書單了&#xff0c;因為常常會有朋友問&#xff0c;前端該如何學習&#xff0c;學習前端該看哪些書&#xff0c;我就講講我學習的道路中看的一些書&#xff0c;雖然整理的書不多&a…

決策樹——ID3和C4.5

決策樹&#xff08;decision tree&#xff09;是一個樹結構&#xff08;可以是二叉樹或非二叉樹&#xff09;。其每個非葉節點表示一個特征屬性上的測試&#xff0c;每個分支代表這個特征屬性在某個值域上的輸出&#xff0c;而每個葉節點存放一個類別。使用決策樹進行決策的過程…