什麼是Javascript ?

 


1. Javascript的介紹

在還沒接觸JavaScript的時候一直以為他與Java應該有什麼關聯，殊不知這是一個天大的誤解，Java和 JavaScript雖然名稱相似，但卻是熱狗和狗的差別。JavaScript是一種直譯式、基於原型(prototype based)的物件導向程式語言，但又具有函數式程式設計(Functional programming)的特性。在過去的一段時間他都一直被認為是玩具語言，難登大雅之堂。但隨著版本的更新，加上搭配NodeJS，讓JavaScript成為排行榜上的紅人，除了網頁開發外，在許多的領域都可以看到JavaScript的身影。


2. Javascript究竟可以做什麼呢

JavaScript 是一種腳本，也能稱它為程式語言，可以讓你在網頁中實現出複雜的功能。當網頁不只呈現靜態的內容，另外提供了像是：內容即時更新、地圖交動、繪製 2D/3D 圖形，影片播放控制……等，你就可以大膽地認為 JavaScript 已經參與其中。

例如 : 按下按鈕後觸發事情 , 偵測到按下enter按鈕觸發事情 , 控制CSS , 驗證用戶輸入的內容等等..... , 太多太多了~


3. 使用方式

直接放在 <head></head>

<head> 
	<script>
		alert('Hello JS');
	</script>
</head>

直接放在 <body></body>

<body> 
    <script>
        alert('Hello JS');
    </script>
</body>

放在<html></html>外面

<!DOCTYPE html>
<html>
<head>
	<title>js測試</title>
</head>
<body>

</body>
</html>

<script type="text/javascript">
	alert('hello Js')
</script>

引入在外部檔案

建立一個資料夾 , 在資料夾內建立兩個檔案 index.html 、 main.js

index.html

<!DOCTYPE html>
<html>
<head>
	<title>js測試</title>
</head>
<body>
	
	<!-- 引入JS -->
	<script src="./main.js"></script>
</body>
</html>

說明 : 引用JavaScript通常寫在<body></body>的最後面 ,因為瀏覽器渲染HTML文件是從上往下呈現的。先執行head標籤裡的內容，再執行body標籤裡的，一行行渲染下去。當JavaScript放在head裡面的話，頁面的下載和渲染都必須停下來等待JavaScript執行完成。JavaScript執行過程耗時越久，瀏覽器等待的時間就越長。

main.js

alert('hello Js')


4. 基礎語法

型態

number

NaN為number的特殊數值，NaN不等於任何值，NaN也不等於NaN，如果你要測試某值結果是否為NaN，則要用isNaN()函式。

var number = 10;      // 宣告數值
parseInt("10", 10);   // 將字串轉為十進位整數
NaN == NaN;           // false
isNaN(NaN);           // true
isNaN(1);             // false
isNaN('a');           // true

string

字串是基本資料型態，可使用單引號或雙引號來包括一串文字，用以表示字串。

var text = 'Hello JS';  // 宣告字串
text.length;            // 8

bolean

布林值只有兩個值，true與false。

Boolean(false)       // false
Boolean(0)           // false
Boolean('')          // false
Boolean(null)        // false
Boolean(undefined)   // false
Boolean(NaN)         // false
// False Family
                     
Boolean(1)           // true
Boolean(true)        // true

undefined

undefined是JavaScript中特殊的值，當你變數在初始的時候未給予任何值或試圖取得某個沒定義的變數（也沒指定null）時產生。

var abc;
typeof abc;          // undefined


宣告

var

JavaScript則為動態語言，其變數本身使用者無需宣告型態。

var JS = 1;
JS = 'Hello';

如果沒有宣告var或是在全域使用var宣告皆會被判定為全域變數(window)，也可以在全域範圍中使用this來取得。

js = 1;
js;                 // 1
this.js;            // 1

x在函式中使用var宣告為區域變數，但y並非使用var宣告，所以y是全域變數。

function func() {
       var x = 1;
       y = 2;
       console.log(x);
   }
   
func();     		// 1
//console.log(x);   //錯誤
console.log(y)  	//2
console.log(this.y)	//2

如果全域與區域中有同名的變數，則區域會暫時覆蓋全域。

var x = 1;
function func() {
       var x = 2;
       console.log(x);
   }
func();     	// 2
console.log(x);  // 1


陣列 Array

var array = [
    1, 
    "JS", 
    false, 
    {'a':1}, 
    function(){
      console.log(123)
    }
];


物件 Object

長的會像是這樣  { key: value } 

var person = {
    name: 'Giant',
    speak: function() {
        alert('Hello');
    }
}
person.name;             // Giant
person['name'];          // Giant


Function 

//一般函數的兩種寫法
function Person(name){  
    return name        
}
or
var Person = function(name){
    return name
}
Person('Giant')


DOM元素操作

簡單來說 DOM 可以利用 JS 來跟 HTML 文件進行互動

因為瀏覽器載入網頁會建立 DOM 樹，會包含各種節點，每個節點都是物件

程式碼會存取和變更這個 DOM 樹，然後改變就會反應在瀏覽器上(互動)




根據ID名稱選取

document.getElementById(elementId)

根據ID loaded

document.getElementById(elementId).value = 'hello world~'

範例網址

根據ID取得值

document.getElementById(elementId).value

根據ID顯示

document.getElementById(elementId).innerHTML = 'hello world~';

範例網址

根據Class名稱選取

document.getElementsByClassName(classname)


事件控制 Event Handle

onclick (按下事件 )

方法一 :

<html>
	<button id="btn" class="btn"/>
</html>

<script type="text/javascript">
	document.getElementById('btn').onclick = function() {
		alert('Hello');
	};
</script>

方法二 :

<html>
	<button id="btn" class="btn" onclick="func()"/>
</html>

<script type="text/javascript">
	function func() {
	    alert('Hello');
	}
</script>

keyup(按下事件 )

<html>
	<input type="text" id="fname" onkeyup="myFunction()">
	<div id="print"></div>
</html>

<script type="text/javascript">
	function myFunction() {
	    var fname = document.getElementById("fname");
	    document.getElementById('print').innerHTML = fname.value;
	}
</script>

說明 : 將打在input內的文字馬上顯示在下方


5. 常用的內建函式(function)

顯示一個警告對話框，包括一個OK按鈕。

alert("輸入錯誤");

顯示一個確認對話框，包括OK、Cancel按鈕。

confirm("確定否！");

返回此變數的長度。

math.length;

返回一個0～1的隨機數值。

Math.random();

回傳true or false，找值是否存在此陣列。

array.include("value");

回傳此值在此陣列的位置。

array.findIndex(index => index);

迴圈

array.forEach(i => console.log(i));

印出陣列

array.map(i => i);

方法可以藉由刪除既有元素並／或加入新元素來改變一個陣列的內容。

array.splice(index, 0);

可以將某些值加入到陣列的最後一個位置

array.push('value');

PS : 當然不只有這些function~ 我的話都是遇到問題的時候才上網查的~



引用網址 : https://medium.com/tkd-giant/javascript-%E5%85%A5%E9%96%80-84c4cb12d083

留言

張貼留言

這個網誌中的熱門文章

網頁入門教材目錄

  0.網頁運作原理 網頁運作原理與專業名詞 1.程式編輯器sublime 3 介紹 sublime 3 使用介紹 2. PHP開發環境介紹  Xampp介紹 3. 認識HTML HTML介紹 4. 認識CSS CSS基礎篇 CSS基礎語法 5.認識 Javascript Javascript基礎 6. 認識 Jquery Jquery與ajax介紹 7. Bootstrap 4 基礎介紹 Bootstrap 4 介紹 Bootstrap 4 範例製作 8. 資料庫入門 MariaDB入門教學 9. PHP介紹 PHP基礎用法 - 1 PHP基礎用法 - 2 PHP物件導向 PHP與資料庫連線 10. Laravel框架入門 Laravel 基礎概念 Laravel下載安裝、MVC流程編寫、資料庫設定 Laravel 新增資料與顯示資料 Laravel 資料修改與刪除 Laravel 完整筆記本範例
閱讀完整內容

什麼是HTML?

圖片
  1. HTML 是什麼呢 ? html介紹 HTML 的英文原文是 HyperText Markup Language ，中文譯為「超文字標示語言」。為什麼要說「 超文字 」呢？如果你曾經用過 Windows 上的「記事本」打過字，你應該知道一般的純文字輸入是無法顯示不同的字型大小、不同的文字顏色、甚至插入與文字說明相關的圖片的。而 超文字則可包含這些不同的文字變化、加入圖片或影音多媒體、畫表格、甚至可做一些基本的排版功能 。而「標記語言」指的是 HTML 透過一些定義好的結構化標籤 (Tag) 語法，讓你把超文字放到你所想要的位置、或去指定它的呈現方式。因此，再簡單的說， HTML 就是可以讓你將您所想要呈現給別人看的資料，儘可能以較豐富的方式去呈現。 我可以用什麼工具編寫 HTML 網頁？ 很簡單，用 Windows 內建的「記事本」小軟體，就可以拿來練習編寫網頁了。但如果可以的話，真心推薦您使用以下其中一套「免費的進階版記事本」小軟體：  Notepad++  、  sublime ，因為它們可以幫您將 HTML 語法和您的網頁文章內容用不同的顏色做一些區隔，讓您更方便閱讀 HTML 內容，並且也可以及早讓您發現可能的編寫錯誤，讓您的學習之路更為順暢。 我要如何瀏覽及測試我的 HTML 網頁呢？ 當您使用前述的「記事本」工具編寫完內容後， 可以將檔案儲存成 test.html 這樣的檔名 ， test 即是您網頁的主檔名，而 .html 則為網頁的副檔名。假設您的檔案是儲存在「桌面」，您可用檔案總管或是任何可能的方式到桌面去找到 .html 的檔案，例如前述的 test.html 檔，然後用 滑鼠在 test.html 檔案上按左鍵快速點選兩下 ，則電腦即會自動以您系統預設的  網頁瀏覽器  開啟這個練習的網頁 2. HTML 基本語法 基本的HTML文件格式 < HTML > 　 < HEAD > 　　 < TITLE > 網頁主題 </ TITLE > 　　 < Meta > 　 </ HEAD > 　 < BODY > 　　網頁內容的主要呈現部分 　 </ BODY > </ H...
閱讀完整內容

網頁是怎麼運作的呢?

圖片
  短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。 網頁know-how : 用戶端與伺服器端 用戶端 是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。 伺服器端 是放著網頁、網站、或著 app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。 IP位址 為Internet Protocol Address的縮寫，中文被稱為網際協議位址。 是一種在Internet上的給主機編址的方式。  IP位址可以說是網頁伺服器的門牌 讓系統可以透過這個號碼找到正確的網頁伺服器在哪裡。 DNS Domain Name System的縮寫，中文又稱領域名稱解析系統。 是網際網路的一項的服務，是個可將網址和IP位址相互對應的資料庫，能夠使人更方便的存取網際網路。( 不用記長長一串的數字啦！ ) 伺服器 伺服器作為硬體來說，通常是指那些具有較高計算能力，能夠提供給多個使用者使用的電腦。伺服器與PC機的不同點太多了，例如PC機在一個時刻通常只為一個使用者服務。伺服器與主機不同，主機是透過終端給使用者使用的，伺服器是透過網路給用戶端使用者使用的。 而近期 雲端伺服器 越來越盛行,常見的雲端服務有 AWS , GCP , AZURE 等.... , 雲端伺服器擁有非常多的服務, 可以節省開發時間 , 直接使用服務(但通常都不便宜...) 、擁有高擴展的硬體資源, 隨時調整你的硬體資源、安全性高等等.... , 想必之後會成為伺服器的主流 網頁伺服器 又叫做 Web Server 。 Apache是接洽的服務員負責將網頁畫面傳遞給瀏覽器，只要網頁中有需要資料的部分Apache就會向DB索取資料後一起交給瀏覽器。 DB(Data Base)就是存放資料的地方。 web server 的種類有： apache、nginx、iis apache 和nginx的差別在於nginx可能速度會比較快，用的資源少。 iis是微軟做的，如果是寫 asp.net  就可用這套iis但環境就是要在window server上。 瀏覽器輸入網址的流程 :...
閱讀完整內容