Java程式教學甘仔店: JavaScript-基本類

顯示具有 JavaScript-基本類 標籤的文章。顯示所有文章

顯示具有 JavaScript-基本類 標籤的文章。顯示所有文章

2014年6月28日星期六

JavaScript 基本類使用onClick、this綜合綀習應用之1

關鍵詞(keyword): onClick 、this

程式：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>59 - JavaScript 基本類使用onClick、this綜合綀習應用之1</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
.mybuttonClass{
font-size:20px;
background-color:#ff2277;
}
.test{
font-size:30px;
font-style:inherit;
background-color:#778877;
}
</style>
<script type="text/javascript">
function myMsg(myObj){
alert("onclick 為: " + myObj.onclick);
myMsg2(myObj);
}

function myMsg2(myObj){
myObj.className="test";
alert("className 為: " + myObj.className);
}
</script>
</head>
<body>
<input type="button" id="myButtonId" name="mybuttonName" class="mybuttonClass" value="送出" onclick="myMsg(this)">
</body>
</html>
結果：
第一次按下送出

第二次按下送出

其它文章

閱讀更多 »

JavaScript 基本類使用onClick 及 this取得onclick

關鍵詞(keyword): onClick 、this

<script type="text/javascript">
function myMsg(myObj){
alert("onclick 為: " + myObj.onclick);
}
</script>
<input type="button" id="myButtonId" name="mybuttonName" class="mybuttonClass" value="送出" onclick="myMsg(this)">

結果：

其它文章

閱讀更多 »

JavaScript 基本類使用onClick 及 this取得type

關鍵詞(keyword): onClick 、this、type
<script type="text/javascript">
function myMsg(myObj){
alert("type 為: " + myObj.type);
}
</script>
<input type="button" id="myButtonId" name="mybuttonName" class="mybuttonClass" value="送出" onclick="myMsg(this)">

結果：

其它文章

閱讀更多 »

JavaScript 基本類使用onClick 及 this取得value

JavaScript 基本類使用onClick 及 this取得value

關鍵詞(keyword): onClick 、this、value

<script type="text/javascript">
function myMsg(myObj){
alert("value 為: " + myObj.value);
}
</script>
<input type="button" id="myButtonId" name="mybuttonName" class="mybuttonClass" value="送出" onclick="myMsg(this)">

結果：

其它文章

閱讀更多 »

JavaScript 基本類使用onClick 及 this取得name

JavaScript 基本類使用onClick 及 this取得name

關鍵詞(keyword): onClick 、this、name

基本用法：
<script type="text/javascript">
function myMsg(myObj){

alert("name 為: " + myObj.name);
}
</script>
<input type="button" id="myButtonId" name="mybuttonName" value="送出" onclick="myMsg(this)">

結果：

其它文章

閱讀更多 »

JavaScript 基本類使用onClick 及 this取得id

JavaScript 基本類使用onClick 及 this取得id

關鍵詞(keyword): onClick 、this、id

基本用法：

<script type="text/javascript">
function myMsg(myObj){

alert("id 為: " + myObj.id);
}
</script>
<input type="button" id="myButton" name="mybutton" value="送出" onclick="myMsg(this)">

結果：

其它文章

閱讀更多 »

JavaScript 基本類變數物件重新指定

JavaScript 基本類變數物件重新指定
使用時機：
當你的物件在很深的地方。
例如： document.test1.test12.mytest

基本用法：
var mytext = document.test1.test12.mytest;

用法：

<script type="text/javascript">
function myMsg(){
var mytextObj = document.myForm.mytext;
alert("訊息: " + mytextObj.value);
}
</script>

<body>
<form name="myForm">
<input type="text" name="mytext" >
</form>
<input type="button" name="mybutton" value="送出" onclick="myMsg()">
</body>

結果：

其它文章

閱讀更多 »

JavaScript 基本類 with的使用方法

JavaScript 基本類 with的使用方法

關鍵詞(keyword): with

使用with(物件){
可以略該物件名稱
}

基本用法：

  function myDetails(name,birthday){
   this.name = name;
   this.birthday = birthday;
  }

  document.write("JavaScript 基本類 - with的使用方法
");
  var myDe =new myDetails("JavaScriptTest","2011/02/02");
  
  with(myDe){
   document.write(" name  :  " + name +"
");
   document.write(" birthday  :  " + birthday+"
");
  }
  
  with(document){
   write("with的使用方法
");
  }

測試：

其它文章

閱讀更多 »

2014年4月24日星期四

[JavaScript-基本類]將Javascript寫在外部js檔

[JavaScript-基本類]將Javascript寫在外部js檔

說明：
將Javascript寫在外部js檔
程式：
<html>
<head>
<title>[JavaScript-基本類]將Javascript寫在外部js檔</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="myJavascript.js" charset="UTF-8"></script>
</head>
<body>
<input type="button" value="請點擊" id="myId" onClick="myFunInput(this)">
</body>
</html>

myJavascript.js檔內容

function myFunInput(obj){
alert("ID:"+obj.id);
}
圖：

其它文章

閱讀更多 »

2014年4月23日星期三

[JavaScript-基本類]取出HTML的input元件的id

[JavaScript-基本類]取出HTML的input元件的id

說明：

按下按扭，顯示按扭的id名稱。

程式：
<script type="text/javascript">
function myFunInput(obj){
obj
alert("你的id編號為："+obj.id);
}
</script>
<input type="button" value="請點擊" id="myId" onClick="myFunInput(this)">

結果：

圖：

其它文章

閱讀更多 »

[JavaScript-基本類]取出HTML的input元件的資料

[JavaScript-基本類]取出HTML的input元件的資料

說明：
取出HTML的input元件的資料,
在input輸入框輸入資料，
按下按扭，顯示輸入的資料。

程式：
<body>
<script type="text/javascript">
function myFun(){
myTxt = document.myForm.myText;
alert("你輸入的值："+myTxt.value);
}
</script>
<form name="myForm">
<input type="text" name="myText" value="">
<input type="button" value="請點擊" onClick="myFun()">
</form>
</body>

圖：

其它文章

閱讀更多 »

[JavaScript-基本類]物件的使用之判斷物件是否存在

[JavaScript-基本類]物件的使用之判斷物件是否存在

說明：
物件的使用之判斷物件是否存在

程式：
<script type="text/javascript">
function myDetails(name,birthday){
this.name = name;
this.birthday = birthday;
}

document.write("物件的使用之判斷物件是否存在<br>");
var ji =new myDetails();
if(ji){
document.write("ji物件存在<br>");
}else{
document.write("ji物件不存在<br>");
}
if(ji.name){
document.write("ji的name物件存在<br>");
}else{
document.write("ji的name物件不存在<br>");
}

</script>

結果：

圖：

其它文章

閱讀更多 »

2014年4月22日星期二

[JavaScript-基本類]物件的使用方式

[JavaScript-基本類]物件的使用方式

說明：
物件的使用

程式：
<script type="text/javascript">
function myDetails(name,birthday){
this.name = name;
this.birthday = birthday;
}

//物件的使用方式一
document.write("物件的使用方式一<br>");
var li = new myDetails("li","1983/01/01");
document.write("name : "+li.name+"<br>");
document.write("birthday : "+li.birthday+"<br>");

//物件的使用方式二
document.write("物件的使用方式二<br>");
var je =new myDetails();
je.name="je";
je.birthday="1980/02/01";
document.write("name : "+je.name+"<br>");
document.write("birthday : "+je.birthday+"<br>");
</script>
結果：

圖：

其它文章

閱讀更多 »

[JavaScript-基本類]按鈕的使用onClick-點擊按鈕時呼叫多個函數

[JavaScript-基本類]按鈕的使用onClick-點擊按鈕時呼叫多個函數

說明：

例：
寫一個函數，使用input的button，
點擊按鈕使用onClick呼叫函數1及函數2
用逗號, 或 ;分號
onClick="myFun(),myFun2()"
onClick="myFun();myFun2()"
程式：
<body>
<script type="text/javascript">
function myFun(){
alert("點擊按鈕時呼叫函數1" + "<br>");
}
function myFun2(){
alert("點擊按鈕時呼叫函數2" + "<br>");
}
</script>
<input type="button" value="請點擊" onClick="myFun(),myFun2()">
</body>
結果：

圖：

其它文章

閱讀更多 »

[JavaScript-基本類]按鈕的使用onClick-點擊按鈕時呼叫函數

[JavaScript-基本類]按鈕的使用onClick-點擊按鈕時呼叫函數

說明：

例：
寫一個函數，使用input的button，
點擊按鈕使用onClick呼叫函數

程式：
<body>
<script type="text/javascript">
function myFun(){
alert("[JavaScript-基本類]按鈕的使用onClick-點擊按鈕時呼叫函數" + "<br>");
}
</script>
<input type="button" value="請點擊" onClick="myFun()">
</body>
結果：

圖：

其它文章

閱讀更多 »

[JavaScript-基本類]流程控制-使用switch-case

[JavaScript-基本類]流程控制-使用switch-case

說明：
switch (變數) {
case 變數值 :
程序區塊
使用離開此區break;
default:
預設的程序區塊
break;
}
例：
寫一個選擇的訊息的函數，
利用switch流程控制來傳回不同的訊息。
程式：
<script type="text/javascript">
function chooseFun(number){
var message="";
switch (number) {
case "1" :
message ="你選擇的是1:汽車";
break;
case "2" :
message ="你選擇的是2:房子";
break;
case "3" :
message ="你選擇的是3:電腦";
break;
case "4" :
message ="你選擇的是4:電視";
break;
default:
message ="你選擇"+number+"的不在選項內";
break;
}
return message;
}

document.write(chooseFun("1") + "<br>");
document.write(chooseFun("2") + "<br>");
document.write(chooseFun("5") + "<br>");
</script>
結果：

圖：

其它文章

閱讀更多 »

[JavaScript-基本類]使用宣告自己定義的函數方法

[JavaScript-基本類]使用宣告自己定義的函數方法

說明：
寫一個加總的函數

程式：
<script type="text/javascript">
function sum(number){
var temp=0
for(var i =1 ; i <=number ; i++){
temp+=i;
}
return temp;
}
document.write("50加總為："+sum(50)+"<br>");

</script>
結果：

圖：

其它文章

閱讀更多 »

2014年4月19日星期六

[JavaScript-基本類]流程控制for迴圈的用法

[JavaScript-基本類]流程控制for迴圈的用法

使用for的用途是在於重複執行某件事。

說明：
for (初值宣告; 條件; 計數) {
內容
}

例：顯示測試1 到測試10 的字樣
程式：
<script type="text/javascript">
str = "[JavaScript-基本類]流程控制for迴圈";

for (i = 0; i <= 10; i++) {
document.write("測試"+i+"<br>");
}
</script>
結果：

圖：

其它文章

閱讀更多 »

2014年4月12日星期六

[JavaScript-String類]String字串搜尋indexOf()

[JavaScript]字串搜尋indexOf()

indexOf()方法，
第一個位置為 0
如果沒搜尋到為 -1

程式
<script type ="text/javascript">
str = "[JavaScript]字串搜尋indexOf()";
document.write("測試的字串為:"+str+"<br>");
search="S";
returnData=str.indexOf(search);
if(returnData != -1){
document.write("字串搜尋("+search+")的位置為："+returnData+"<br>");
}else{
document.write("字串搜尋不到("+search+")位置為："+returnData+"<br>");
}
search="z";
returnData=str.indexOf(search);
if(returnData != -1){
document.write("字串搜尋("+search+")的位置為："+returnData);
}else{
document.write("字串搜尋不到("+search+")位置為："+returnData+"<br>");
}
</script>

結果

結果圖

其它文章

閱讀更多 »

2014年1月14日星期二

[JavaScript-Date物件]Date物件，取得日期的年getFullYear、月getMonth、日getDate

[JavaScript-Date物件]Date物件，取得日期的年getFullYear、月getMonth、日getDate

用途：

取得日期的年

取得日期的月

取得日期的日

說明：

取得日期的年 getFullYear

取得日期的月 getMonth

取得日期的日 getDate

程式範例：

<script type ="text/javascript">

//宣告一個日期的變數，並取得現在日期。

var d = new Date();

//將現在日期顯示在頁面上

document.write("日期/時間：");

document.write(d.getFullYear()+"年");

document.write(d.getMonth()+1,"月");

document.write(d.getDate()+"日");

</script>

測試結果：

其它文章

閱讀更多 »

訂閱：文章 (Atom)