JavaScript & Jquery (初階)12/10 part1－JoshS的部落格

今天上了JavaScrip & Jquery 課程

第一堂先介紹JavaScript 基礎，基本上還挺簡單的

因為之前上班都早已用的比這些還進階了

但比較值得一提的是，可以到http://www.w3schools.com/ (W3CSCHOOL)

這來看一些html、css、JavaScript 的一些文件及教學

在這通常會叫"Tutorial" 也就是"教學"的意思，比方JavaScript 就叫 JavaScript Tutorial

點進去就可以看一些Simple ~ ^^

而今天基本上也在複習一些基礎觀念

也就是說，一個tag 如 <div>、<a> 、<p>..或是Java的tag <action>等..

都可設定ID 及 name 而ID擇是唯一值而name則可重複

而我們最主要的抓ID方式就是 : document.getElementById("ID名稱") ;

ex <p id="demo" > </p> 則我們就是 var x = document.getElementById("demo") ;

這樣 x 就取得了 demo 這個控制項;

當然JavaScript 最基本的語法就是 alert("") 拉!! 許多debug時還得依賴他呢~

以下就先介紹一個範例:

<head>

</head>

alert(x) ;
}
</script>

<body>

</body>

則我們就可以看到跳出一個視窗是寫 gggg的警告

而原先 id="test" 的<div> 內 kkkk 也變成 gggg 瞜~

接下來是介紹跳 POP

哈~大家應該不陌生，但基礎課程有教，就介紹一下吧

window.open("httpxxxx");

window.open("httpxxx","","width=200,height=400");

以上的表示應該淺顯易懂寬高的設定就是網頁的大小

下面有個範例:

function openPop(){

window.open("httpxxx","","width=200,height=400");

return false;

}

說明一下上面的onclick 中的 return ，如果回傳了 false 則母頁面就會停留在原來的頁面

，所以我們就可因此用javaScript 來做if else 的判斷需不需要導頁

順道一題，有時可以前端判斷的狀況其實就由前端來完成會比較不浩效能，因為這樣就不用在到

伺服器去做判斷增加負擔，以下再簡單個範例

Ex:

function isCheck(){
var isValid = true;
var year = document.getElementById("year").value;
// 抓ID 所以控制項也需要取ID名稱
if(year.length == 0){
alert("year cannot be null");
isValid = false;
}
var seasonIndex = document.getElementById("season").selectedIndex;
if(seasonIndex == 0){
alert("請選擇項目");
isValid = false;
}

var title = document.getElementById("title").value;

if(title .length == 0)

{

alert("title 不可為空");

isValid = false;

}

return isValid;
}

<s:form action="add_league">
<%-- Repopulate the year field --%>
<s:textfield name="year" label="Year" id="year"/>

<%-- Repopulate the season drop-down menu --%>
<s:select name="season" label="Season"
headerKey="UNKNOWN" headerValue="UNKNOWN"
list="seasons_list"
id="season"/>

<%-- Repopulate the title field --%>
<s:textfield name="title" label="Title" id="title"/>

<%-- The submit button --%>
<s:submit value="Add League"
onclick="return submitForm();"/>
</s:form>