JavaScript

JS

 javascript 程式當作存檔的時後,通常會存成 xxx.js 的檔案,
這樣的話可以容易判別出檔案的格式;所以就算妳你不存成.js,
只要你在html內外掛引入的標籤正確也是可行的!

自己在家做JS的方法


●狀態列的開始→設定→資料夾的選項→檢視→把隱藏副檔名選項打句取消


開新記事簿,將檔名的.txt改為.js(它可能會跑視窗說不能使用,請放心按下確定)
再按右鍵編輯,把要的語法放入,但是要改它的格式,請將語法當中有的都
改下面的樣子↓
<head>、</style>跟</head>都改為document.write

參考至http://www.taconet.com.tw/agogocity/

JavaScript 心得

JavaScript 是一種描述語言,這種一語言可以被嵌入 HTML 的文件之中,而在瀏覽器中顯示出來。

avaScript 和 Java 很類似,但到底並不一樣﹗ Java 是一種比 JavaScript 更復雜許多的程式語言,而 JavaScript 則是相當容易了解的語言。在很多情況下,撰寫JavaScript可以不那麼注重程式技巧(當然注意一下會比較好),所以許多 Java 的特性在 Java Script 中並不支援。

 

心得:現在的網頁已經很少是靜態網頁 JavaScript 的發揮 讓網頁可以增加互動性 就像現在的網誌 可以找到許多語法 引用之後自己的網誌也也會比較多采多姿 還有在專題上也可以運用上

javaScript

 


什麼是 JavaScript?

 

是用來設計增加 HTML 網頁互動性

 

是一種指令語言,指令語言是一種較簡單的程式語言

 

是一序列可執行的電腦程式碼

 

通常直接嵌入在 HTML 網頁裏

 

是一種解譯式語言(表示執行指令不用再編譯)

 

大部份的瀏灠器都可以使用

 

 

 

JavaScript 能做什麼?

 


它能讓HTML網頁設計者可以撰寫程式的工具

 

它能將動態的文字放進網頁裏

 

它能對事件有所反應,例如當網頁完成下載或是使用者按下一個HTML元素,可以設定JavaScript去執行

 

它能夠讀取並且記下和改變HTML元素的內涵

 

它可以用來驗證資料,當資料送要送到伺服器之前,可用JavaScript驗證資料

 

它可以用來偵測使用者的瀏灠器,Javascript可依使用者的瀏灠器來提供特定的網頁

 

它可以用來建來cookies,可以儲存且回覆資料在使用者的電腦裏

 

 

 

JavaScript擺放位置

 


當下載網頁時,在<body>內的JavaScripts會被執行

 

在<head>內的JavaScripts當網頁下載後即執行

 

 

 

 

範例: 顯示文字 Hello!

<html>

<body>


<script type="text/javascript">

document.write("Hello!");

</script>


</body>

</html>

範例: 改變文字型式

<html>

<body>


<script type="text/javascript">

document.write("<h1>Test</h1>");

</script>


</body>

</html>

 

Javascript

什麼是 Javascript 

簡單、以物件為基礎的敘述語言 若比較  Java  和  JavaScript  的不同之處:  JavaScript  屬於簡單而易於使用的敘述語言。在學習使用  JavaScript  和網頁之間建立互動應用的難度上,  JavaScript  和其強大的工具比起  Java  確實是要容易得多。
源自Java JavaScript  不只保有  Java  的語法及基本結構,它也借用了  Java  大部分的流程結構並且提供某些和Java  相同的安全措施。
直譯式的程式語言 JavaScript  是一種直譯式的程式語言,這是和  Java截然不同的。  Java  的程式碼要先被編譯之後才可以執行﹔而直譯式程式語言的程式碼則直接在應用程式立即執行。
有限擴充性 JavaScript  不像  Java  可以完全的擴充下去﹔JavaScript  的模組列出有限的一群物件、屬性、方法及資料形態,這些模組已經提供了足夠的功能用來設計客戶端的應用程式。
有限的主從互動關係 JavaScript  目前並非設計成完全的主從互動。除了分析、建立、呼叫  URLs  ,  JavaScript  並不能直接和伺服器溝通或用不同的通訊協定。基本上,JavaScript  是用來處理客戶端的動作。
與HTML合而為一 不同於  Java  僅只是與  HTML  連結,  JavaScript  是緊密地與  HTML  檔案結合。典型上  JavaScript  整個的語法和決定頁面格式的  HTML  是在同一個檔案,而這些語法會和  HTML  同時被下載。

 

JavaScript如何嵌入HTML中

在  HTML  中放入  JavaScript  其實很簡單,每一個  script  都必須被包在  SCRIPT  標籤中。換句話說,以  <SCRIPT>  開始  script  而以  </SCRIPT>  結束  script。


 

<SCRIPT>

JavaScript Program

</SCRIPT>

 

註解: JavaScript不像  HTML  使用  <!-- and --> 作註解,而是使以雙斜線 (//)來作註解。如果不放在  HTML  註解中,  JavaScript  的註解會被其他瀏覽器當作文字顯現出來。

 

SCRIPT  標籤有兩個屬性用來決定  Javascript  的 script 如何併入  HTML  中,這兩個屬性如下:

LANGUAGE 指出  script  所使用的語言。
SRC

包含  Javascript  原始程式檔的URL。此檔必須是副檔名為 .js 的檔。

 

  LANGUAGE:

  <SCRIPT LANGUAGE="JavaScript">

  JavaScript Program

  </SCRIPT>

 

輸出文字: JavaScript有幾種方法可以輸出文字,在這裡我們先用document.write()來輸出文字到視窗中。
在  JavaScript  的呼叫方法中,須結合物件與方法的名稱:

Object - name . property - name  

給一個例子比較容易理解:

<html>

  <title>Hello World</title>

  <script language="javascript">

  document.write("Hello World");

  </script>

  </html>

HTML  的限制之一就是  Web Site  開發者只能在單一的客戶端視窗上開發。
JavaScript提供程式設計師創作一小對話盒的功能----對話盒的內容是獨立於包含   JavaScript的  HTML  頁面之外,並不會影響到頁面的外觀和內容。
直接輸出於對話盒最簡單的方法就是使用  alert( ) 方法。使用  alert( )方法就像使用 document.write( )  一樣,只需提供一個文字字串即可。
把剛剛的例子改一下:
<html>

  <title>Hello World 使用 alert()</title>

  <script language = " javascript " >

   alert ( " Hello World " );

  </script>

  </html>

Google map 實作簡介

今天的project報告我所報告的是goole map的部份.因為報告時間的關係,沒有講的很充足,所以我想在這裡再補充一些.而且還能夠多一篇文章,何樂不為呢XD

1.申請google map key  

要使用map時若是要放在伺服器上就必須先申請key,但若只是要run在localhost上那就不需要,所以請先到這裡申請專屬key.   http://code.google.com/intl/zh-TW/apis/maps/signup.html 要注意的是需要擁有Google的帳號才能申請.

2.基本map展示

既然要使用map,當然要先把map載入才行.google所提供的map是以Javascript的語言來寫的.以下是基本載入地圖的程式碼.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key="
type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(23.50843605199308, 121.01848793029785), 7);
}  
}
</script>       
</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html> 

接著我們就得到最陽春的地圖了:

不過像這樣的地圖是完全沒有任何功能既無法放大也無法改成衛星地圖,於是只要再新增以下程式碼就能有所功能了:

map.addControl(new GLargeMapControl());
map.enableScrollWheelZoom();
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());

至於每一行程式碼代表著什麼功用或是為什麼語法是這樣,因為解釋會佔很大篇幅就不解釋了.請有興趣的自行研究吧!接著我們就得到下面這張可放大縮小的地圖.

3.map右鍵選單事件處理

因為這次的project我有用到右鍵選單,所以特別提了出來.首先要使用google所提供的右鍵監聽,再用Javascript處理選單,再用function處理選單裡每個按鈕的功能.由於在網頁裡按右鍵會出現預設選單,照理說要先用語法把預設的右鍵選單消除去掉.但還好在map裡右鍵是沒有預設選單的,所以就省了這個步驟.以下是有關右鍵選單的重點程式碼:

<script type="text/javascript">

GEvent.addListener(map,"singlerightclick",function (pixel) {          
clickedPixel = pixel;
latlng = map.fromContainerPixelToLatLng(pixel);
var x=pixel.x;
var y=pixel.y;
if (x > map.getSize().width - 140) { x = map.getSize().width - 140 }
if (y > map.getSize().height - 110) { y = map.getSize().height - 110 }
var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y)); 
pos.apply(contextmenu);
contextmenu.style.visibility = "visible";
});

contextmenu.innerHTML = '<a href="javascript:setpoint()">&nbsp;&nbsp;標地設置&nbsp;&nbsp;</a>'

function setpoint() {
if(marker!=0)
map.removeOverlay(marker);    
marker = new GMarker(latlng);
map.addOverlay(marker);
contextmenu.style.visibility = "hidden";
}

</script>

若想研究程式碼所代表的意義可以參考Google map api.

如此一來就完成了右鍵選單的功能了,而且這裡的右鍵標點是設計成標下一個點就會移除上一個所標的點,也就是地圖上只能有一個標點,以下就是成果:

4.map之Javascript與php的溝通

這次的project我想要把伺服器裡每筆資料的經緯度秀在地圖上,但課本只有教html和php的溝通,加上Javascript和php很難互相獲得對方的變數,使得這裡花了很多時間才解決,這裡也要感謝本隊的組長.以下是php寫入Javascript中的程式碼:

<script type="text/javascript">

<?php for($c = 0 ;   <?php $row = mysql_fetch_row( $result ); ?> ; $c++){ ?>

var marker = new GMarker(new GLatLng(<?php echo "$row[5]"; ?>,<?php echo "$row[4]"; ?>));
var latlng = new GLatLng(<?php echo "$row[5]"; ?>,<?php echo "$row[4]"; ?>);
var myHtml2 = '<p><img src = "<?php echo "$row[14]"; ?>" width = "204" height = "153"/></p>';
var myHtml3 = '<p><a href = "http://.../show.php?name=<?php echo "$row[0]"; ?>">詳細資料</a></p>';
open(marker,latlng,"<?php echo "$row[0]"; ?>","<?php echo "$row[2]"; ?>","<?php echo "$row[3]"; ?>","<?php echo "$row[12]"; ?>",myHtml2,myHtml3);     
map.addOverlay(marker);   

<?php } ?>

function open(marker,latlng,a,b,d,e,f,g){
GEvent.addListener(marker,"click", function() {
var myHtml = f +'<b>店家名稱:</b>' + a + '<br/>' +
'<b>電話:</b>' + b +  '<br>'+
'<b>地址:</b>' + d + '<br>'+
'<b>分類標籤:</b>' + e + '<br>'+ g + '<br>'     
map.openInfoWindowHtml(latlng,myHtml);       
});

</script>

上面這段程式碼省略了連到DB裡的php語法,因為課本裡就有.這裡的重點是Javacript要接收php的值都必須"<?php echo "    "; ?>" 這樣的語法才能接收.上面的程式碼不僅包含和接取DB值還有能展開浮動訊息框的語法,以下是結果:

5.map地址查詢

這個功能我在project demo時沒有講到,因為時間真的太趕了,那在這邊講一下怎麼做好了.其實搜尋地址直接找到正確的位置這個是google的功能,只要加些function就行.但是要展示在地圖上的話就必須自己搞定了,因為google的工作只是幫你找到正確的位置而已,他不會自動幫你處理顯示的部份.

<script type="text/javascript">

geocoder = new GClientGeocoder();

function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point);

}
}
);
}
}

</script>

<body>

<form action="#" onsubmit="showAddress(this.address.value); return false">      
住址:<input type="text" size="60" name="address" value="輔仁大學" />

</body>

如此一來輸入好住址後,按下搜尋,就可以得到以下效果:

 

JavaScript整理part2

JavaScript的windows和 documents物件


windows物件: windows物件是  JavaScript  所不可或缺的物件,我們在前面所用過的  alert、confirm、prompt就是windows物件的方法及屬性。
windows.status: 另外一種  JavaScript  的輸出方式,把欲輸出的訊息顯在狀態列上。

window.setTimeout( "  JavaScript  程式碼 " , 時間間隔 );
時間間隔的時間單位是  1 / 1000  秒
setTimeout( )並不會一直循環的呼叫,只會執行一次。

window的open( )就是  JavaScript  程式裡面用來開新視窗的方法,呼叫的基本格式是:winid=window.open("URL");
winid=window.open(" "); 開啟空白的瀏覽視窗
window.open("URL"); 不記錄被開啟之瀏覽視窗的 id
winid=window.open("HTML檔案 "); HTML檔案的角色就相當於URL
特別值得注意的是傳回值 winid ( window id),有了這個winid,我們將來可以呼叫,『winid.close( );』來關閉此一瀏覽視窗。
open( )還有另外一種呼叫格式可以設定視窗的外觀:
winid=windows.open( " URL " , " 視窗名稱  " , " 視窗外觀之設定 ");

注意: " 視窗外觀設定 " 參數中的『,』之後不可以含有空白字元
 
toolbar=yes / no 瀏覽視窗是否顯示『工具列』
location=yes / no 瀏覽視窗是否顯示『位址欄位』
directories=yes / no 瀏覽視窗是否顯示『目錄列』
status=yes / no 瀏覽視窗是否顯示『狀態列』
menubar=yes / no 瀏覽視窗是否顯示『功能表』
scrollbars=yes / no 瀏覽視窗是否顯示『捲動軸』
resizable=yes / no 瀏覽視窗是否『可以調整大小』
width=點數 瀏覽視窗的『寬度』
height=點數 瀏覽視窗的『高度』

document物件:   document  物件也是  JavaScript  非常重要的物件,我們前面就經常利用document.write方法在頁面上輸出資料

Onload( )  及  Unonload  事件
Onload()是「當頁面載入時」的意思,屬於  JavaScript  的一種「事件」。
 
與Unload相對應的事件是OnUnload(),意思是「當頁面載出時」,也就是離開目前頁面的時候,所以當使用者切換頁面或關閉瀏覽視窗時,都會發生此一事件。

charAt( )方法:依照Index N 去找出字串中第 N 個字元

ex: x="ABCDE"

x.charAt(0) A
x.charAt(1) B
x.charAt(2) C
x.charAt(3) D
x.charAt(4) E

參考網頁:http://residence.educities.edu.tw/brencar/JsTeach/JsTeach_grammar.html
 

JavaScript整理part1

JavaScript  是一種直譯式的程式語言,這是和  Java截然不同的。  Java  的程式碼要先被編譯之後才可以執行﹔而直譯式程式語言的程式碼則直接在應用程式立即執行。
目前並非設計成完全的主從互動。除了分析、建立、呼叫  URLs  ,  JavaScript  並不能直接和伺服器溝通或用不同的通訊協定。基本上,JavaScript  是用來處理客戶端的動作。
JavaScript  是緊密地與  HTML  檔案結合。典型上  JavaScript  整個的語法和決定頁面格式的  HTML  是在同一個檔案,而這些語法會和  HTML  同時被下載。

JavaScript不像  HTML  使用  <!-- and --> 作註解,而是使以雙斜線 (//)來作註解。如果不放在  HTML  註解中,  JavaScript  的註解會被其他瀏覽器當作文字顯現出來。

放入html時的語法:
  <html>
  <script language="javascript">
 //JavaScript語法內容
  </script>
  </html>

document.write(“要顯示的文字”)來輸出文字到視窗中

JavaScript提供程式設計師創作一小對話盒的功能----對話盒的內容是獨立於包含   JavaScript的  HTML  頁面之外,並不會影響到頁面的外觀和內容。
直接輸出於對話盒最簡單的方法就是使用  alert( ) 方法。使用  alert( )方法就像使用 document.write( )  一樣,只需提供一個文字字串即可。
然而,  alert( )  方法不能讓你與使用者做雙向互動,而 確定 按鍵也只能提供你做某些事件的控制,仍然無法讓你依使用者的輸入產生預定或動態的輸出
與使用者做雙向互動最簡單的辦法就是使用  prompt( ) 方法,如同 alert( )方法一樣,prompt( )方法也依你的指定產生對話盒,他還提供了一個有預設值的欄位,使用者必須先填入該欄位然後按  確定  鍵。
另外還有一種 confirm( ) 方法,其用法類似於 alert( ) 和 prompt( ) 方法。confirm( ) 方法以單一字串為引數,它顯示出一個包含字串和 確定  及 取消 按鍵的對話盒,並在使用者按下  確定  時傳回 true ,按下取消時傳回  false。

和java較為不同的定義函數:
function 函數名稱( ){

  敘述 ( 區塊 );

  }
含有傳回值的函數程式碼:
<html>
  <title>帶參數函數的練習</title>
  <script language="javascript">
      function Add3(A,B,C){
      x=A+B+C;
      return x;
       }
  </script>
  <script language="javascript">
    y=Add3(10,20,30);
    alert("10+20+30=" + y);
  </script>
  </html>

何謂jQuery

記得上星期聽到學長在報告他們的專題時提到jQuery,加上之前在研究JavaScript的時候我就有看到jQuery這項工具.於是我再上網搜尋一番.

jQuery是一種JavaScript的Library,也就是Javascript Framework. Javascript Framework就是由JavaScript所組成的一個結構及骨架.當然市面上有很多Javascript Framework.而jQuery就是其中一種.

在jQuery官方網站提到他的賣是Do More With Less(寫的少,做的多).換句話說就是用幾行的程式碼就能做到想要的效果.能夠有這樣的賣點是因為Framework會針對常用的功能,提供簡易的公用函數,用比較簡單的語法來取代原本複雜的程式。但也是因為取代了原先複雜的程式,所以要先學習看懂jQuery所提供的語法,還要了解JavaScript才能夠達成Do More With Less.

因為JavaScript在網頁裡常常會因為瀏覽器的不同或者是版本的更新造成不能完全展現出來,所以利用Javascript Framework之後,藉由更新Framework便能簡單的解決問題,而且大部分的Javascript Framework所提供的語法會有類似的情形,就連jQuery也不例外.

jQuery官網有提供UI介面,做出更炫的畫面,也有範例等程式碼.只要找到想到的畫面效果就能直接去複製其中的程式碼來使用,可以說不會程式的人也能輕易的做出亮麗的頁面出來.當然若是要更深入的使用還是得加以了解才是的.

 

參考資料:http://jquery.com/

http://jsgears.com/thread-63-1-1.html

JavaScript

JavaScript是一種描述語言,這種一語言可以被嵌入HTML的文件之中,而在瀏覽器中顯示出來~

JavaScript 和 Java 很類似,但到底並不一樣~

 Java 是一種比 JavaScript 更復雜許多的程式語言,而 JavaScript 則是相當容易了解的語言~

大部分撰寫JavaScript可以不那麼注重程式技巧,所以許多 Java 的特性在 Java Script 中並不支援~

JavaScript 語言可以產生各種不同的物件,因此可以說是~物件基礎的程式語言~

但並不是物件導向,因為它在物件方面的功能並沒有像 C++ 那麼完全~

JavaScript 屬於底稿式語言~

 

把JavaScript嵌入HTML中~

<SCRIPT LANGUAGE="JavaScript">

 JavaScript內容

 </SCRIPT>

 

  JavaScript 輸出有很多種~

 document.write("輸入你喜歡的人:");

 document.write(prompt("輸入你喜歡的人","女人"));

 --------------------------------------------        

  str=prompt("輸入你喜歡的人","女人")

  document.write(str);

 JavaScript 宣告變數~

var a="XXXX";~不分型態~

 

其他的迴圈~物件~

跟JAVA差不到多少~

大家可以試試看喔!!

 

 

java script prompt

grade = window.prompt( "Enter integer grade:", "0" );

今天老師不就問 為甚麼會是"0"

那不就只是初設值

like this

 

訂閱文章