目前分類：javascript (20)

瀏覽方式： 標題列表 簡短摘要

<script>
var x = "Hello I am cho, my husband ping.<br>";
document.write(x);
document.write(x.length+"<br>"); //會計算文字長度
document.write(x.big()); //字體放大
document.write(x.small()); //字體縮小
document.write(x.match("llo")+"<br>"); //找出相同字串，就秀出llo
document.write(x.match("lloo")+"<br>"); //找不出相同字串，就秀出null
document.write(x.indexOf("llo")+"<br>"); //找llo是在x變數的字串內第幾個字，結果為2，因為字串陣列從0開始算
document.write(x.replace("ping","hlb-ping")); //將cho取代ping
document.write(x.toLowerCase()); //大小寫均改成小寫
document.write(x.toUpperCase()); //大小寫均改成大寫
document.write(x.fontcolor("ff0000")); //字體為紅色
document.write(x.link("http://tw.yahoo.com")); //文字給予連結

</script>

執行結果如下

javascript

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

<html>
<body>

<h1>My First JavaScript</h1>
<p>Click the button to display the date.</p>
<p id="demo"></p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
try
{
Alert("This is Alert.");
}
catch(err)
{
document.getElementById("demo").innerHTML=err
}
}
</script>

</body>
</html>

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

<html>
<body onload="myFun(1)" onunload="myFun(2)">

<p id="demo">My First JavaScript</p>
name:
<input onfocus="myFun(1)" onblur="myFun(2)" onchange="myfun(3)" onmouseover="myFun(4)">               //輸入的文字方框語法，並呼叫函數內的動作
</input>

<script>
function myFun(x)
{
var str=""; //設定str為字串變數
switch(x)
{
case 1:
str="GetFocus";                  //滑鼠點選文字框，則會出現該字串
break;
case 2:
str="loseFocus";                //滑鼠在文字框外點選一點，則會出現該字串(離開文字框的距焦點)
break;
case 3:
str="datachange";             //文字框輸入文字後按enter，則會出現該字串
break;
case 4:
str="mouseover";               //將滑鼠移到文字框處，則會出現該字串
break;
}
document.getElementById("demo").innerHTML=str;
}

</script>

</body>
</html>

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

<html>
<body onload="myFun(1)" onunload="myFun(2)">

<p id="demo">My First JavaScript</p>

<script>
function myFun(x)
{
if(x==1)
{
alert("Loading...");       //進入該頁面出現的對話框
}
else
{
alert("Unloading...");   //離開該頁面出現的對話莀
}
}

</script>

</body>
</html>

 

 

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

<html>
<body>


<p id="demo">My First JavaScript</p>

<button type="button" onclick="myFunc()">Try it</button>

<script>
function myFunc()
{
var x=0;
for(i=0;i<=100;i++)
{
if(i==11)continue;                          //continue要放在計算的上面;運行方式為當i=11時跳下個迴圈，同等不加11，5050-11=5039
x+=i;
}
document.getElementById("demo").innerHTML=x;
}

</script>

</body>
</html>

 

結果為5039

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

<html>
<body>
<p id="dome">My first JavaScript.</p>

<button onclick="myFun()">
Push me
</button>

<script>
function myFun()
{
var x=0;
for(i=0;i<=100;i++)
{
x+=i;
if(i==11) break;          //計算到11時強制跳出(1+11)11)/2=66
}
document.getElementById("dome").innerHTML=x;
}
</script>
</body>
</html>

 

結果得出x=66

 

<html>
<body>


<p id="demo">My First JavaScript</p>

<button type="button" onclick="myFunc()">Try it</button>

<script>
function myFunc()
{
var x=0;
for(i=0;i<=100;i++)
{
if(i==11)break;              //計算到10時，還沒計算就強制跳出(1+10)10)/2=55
x+=i;

}
document.getElementById("demo").innerHTML=x;
}

</script>

</body>
</html>

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

<html>
<body>

<p id="demo">My First JavaScript</p>

<button type="button" onclick="myFunc()">Try it</button>

<script>
function myFunc()
{
var x=0, i=0;
do                    //無論如何都先做一次
{
//x=x+i;
x +=i;
i++;               //於for迴圈的表示法為for(i=0;i<=10;i++)，此i++放置於要跳出迴圈之前
}while(i<=10);
document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

<html>
<body>

<p id="demo">My First JavaScript</p>

<button type="button" onclick="myFunc()">Try it</button>

<script>
function myFunc()
{
var x=0, i=0;
while(i<=10)  //條件成成立後進入{}內
{
//x=x+i;
x +=i;
i++;
}
document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

<html>
<body>

<p id="demo">My First JavaScript</p>

<button type="button" onclick="myFunc()">Try it</button>

<script>
function myFunc()
{
var x=0;
for(i=0;i<=10;i++)
{
x=x+i;
}
document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

 

執行結果:55

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

function

1 function myFun(){}
2 function myFun(var1, var2){}
3 var rtn = myFun(var1,var2);

 

function myFun(){}

<html>
<body>
<p id="demo">This is paragraph.</p>

<button onclick="myFun(3,4)">   //此以數字為例
Push me
</button>

<script>
function myFun(var1, var2)
{
var x;
x = var1 + var2;
document.getElementById("demo").innerHTML=x;
}

</script>

</body>
</html>

結果為7

 

<html>
<body>
<p id="demo">This is paragraph.</p>

<button onclick="myFun('This is ', 'Javascript prctice')">   //此以字串為例..記得這的字串需用單引號'，為了防止誤判
Push me
</button>

<script>
function myFun(var1, var2)
{
var x;
x = var1 + var2;
document.getElementById("demo").innerHTML=x;
}

</script>

</body>
</html>

結果為'This is Javascript prctice

 

傳回值的function

<html>
<body>
<p id="demo">This is paragraph.</p>

<button onclick="myFun()">
Push me
</button>

<script>
function myFun()
{
var x;
x = myFun2(3,4);
document.getElementById("demo").innerHTML=x;
}
function myFun2(var1, var2)
{
return var1 * var2;
}

</script>

</body>
</html>

結果為12

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

彈出式對話框
alert("This is alert!") //單一對話框
confirm("Are you sure?") //有選項的對話框
prompt("Your name: ", "default value") //可輸入文字的對話框

 

alert範例

<html>
<body>
<p id="demo">This is paragraph.</p>

<button onclick="myFun()">
Push me
</button>

<script>
function myFun()
{
  alert("WOW"); //單一彈跳式視窗
}
</script>

</body>
</html>

 

confirm範例

<html>
<body>
<p id="demo">This is paragraph.</p>

<button onclick="myFun()">
Push me
</button>

<script>
function myFun()
{
  var x;
  x = confirm("Are you sure?"); //有選項的對話框
  document.getElementById("demo").innerHTML=x;
}

</script>

</body>
</html>

 

prompt範例

<html>
<body>
<p id="demo">This is paragraph.</p>

<button onclick="myFun()">
Push me
</button>

<script>
function myFun()
{
  var x;
  x = prompt("Your name:", "cho"); //有選項的對話框...出現的對話框可再行輸入，輸出會顯示輸入的文字
  document.getElementById("demo").innerHTML=x;
}

</script>

</body>
</html>

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

語法格式

switch()

{

  case0:

    break;

 case1:

   break;

 case2:

  break;

 default;

}

 

 

<html>

<body>

<p id="demo">This is paragraph.</p>

<button type="button" onclick="myFunc()">

Push me!

</button>

<script>

function myFunc()

{

var x, y=4;

switch(y)

{

case 4:

x="A";

break;

case 3:

x="B";

break;

default:

x="C";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</body>

</html>

 

輸出結果為A

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

邏輯 if-else指令

1 if () {}
2 if () {} else {}
3 if () {} else if () {} else {}

<html>

<body>

<p id="demo">This is paragraph.</p>

<button type="button" onclick="myFunc()">
Push me!
</button>

<script>

function myFunc()
{
var x, y=4;
if(y==3)
{
x="A";
}
else if(y==4)
{
x="B";
}
else
{
x="C";
}

document.getElementById("demo").innerHTML=x;

}

</script>

</body>

</html>

執行結果為b

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

12/18 Javascript筆記

一
字串輸出
函數宣告於head內宣告
function myFun()
{
document.write("My first JavaScript");
}

body內宣告對應的元件，如按鈕
<button type="button" onclick="myFun()">
Push me
</button>

二
利用段落設定id，並字串取代函數內的文字
function myFun()
{
document.getElementById("demo").innerHTML="Hello";
}

body內宣告對應的元件，落段設定
<p id="demo">This is paragraph.</p>
<button type="button" onclick="myFun()">
Push me
</button>

三
利用var來宣告變數
function myFun()
{
var x;
x="WOW!"
document.getElementById("demo").innerHTML=x;
}

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

1 == (3=="3")=true 只在乎值是否相同
2 === (3==="3")=flash 除了值一樣，type也要一樣(因一個是數字，另一個字串)
3 !=
4 !==
5 && 前後結果成立，才成立 (1==1)&&(2==2) =true (1==1)&&(3==2) =flase
6 || 其中一個成立，則成立 (true)||(false) = true
7 ! 取相反數 !(true)=false
8 variablename=(condition)?valuel1:value2
x = (3==2)?0:100; //3等於2成立為0;不成立則為100

<html>

<head>

<script>

function myFun()

{

var x, y=3, z="3";
//x = (y==z); //出現true
//x = (y===z); //出現false
//x=(3==2) && (2=2); //出現false
x =(y==3)?100:0;
document.getElementById("demo").innerHTML=x;

}

</script>

</head>

<body>

<p id="demo">This is paragraph.</p>
<button type="button" onclick="myFun()">

Push me!

</button>

</body>

</html>

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

1 +-*/
2 %(取餘數)
3 ++，--
4 +=，-=，*=，-=
5 字串相加
6 數字+字串

<html>

<head>

<script>

function myFun()

{

var x=10, y, z0="str0", z2="str1";

//y=x%4; //y的答案為2

//x -= 1 //x的答案為9

x=z0+z2 //str0str1

document.getElementById("demo").innerHTML=x;

}

</script>

</head>

<body>

<p id="demo">This is paragraph.</p>
<button type="button" onclick="myFun()">

Push me!

</button>

</body>

</html>

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top
  • Dec 18 Wed 2013 13:16

  • 變數

var設定變數函式

scope:local/global

 

<html>

<head>

<script>

var x="ooh!";  //若設在此地，則x為global

function myFun()

{

 var x;  //透過var來宣告變數，於function內的為local

 x="wow!";

 document.getElementById("demo").innerHTML=x;

}

</script>

</head>

<body>

<p id="demo">This is paragraph.</p>

<button type="button" onclick="myFun()">

Push me!

</button>

</body>

</html>

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

效果:將字串替換

學習重點:

1.<p>段落
2.<id>段落指定
3.找某段落:document.getElementByID()
4.document.getElementById().innerHTML

 

<html>

<head>

<script>

function myFun()

{

  document.getElementById("demo").innerHTML="Hello";  //用以設定或存取元素 (element) 的內容，取代This is paragraph文字

}

</script>

</head>

<body>

<p id="demo">This is a paragraph.</p>      //落段設定id

<button type="button" onclick="myFun()">

Push me!

</button>

</body>

</html>

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

按下Push me!出現My first Javascript

 

<html>

<head>

<script>   //script拼錯

function myFun()  //沒打function

{

  document.write("My first Javascript");  //輸出字串的語法，同等於printf  //write拼錯且忘了打;

}

</script>

</head>

<body>

<button type="button" onclick="myFun()">  //onclick去呼叫function的函數

Push me!

</button>

</body>

</html>

 

此單元學到:透過button呼叫函數名稱

函數設定方式:function 函數名稱()

{

設定輸出字串

}

 

 

後記:

真是殘念

本以為很簡單

結果自己從無到有打過一遍

錯一堆

紅色標註我錯的地方

下次要記得

 

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top

http://www.youtube.com/watch?v=xvkKW8VRVME

很不賴的教學資源

 

http://www.w3schools.com/js/default.asp

實作介面

hfnkiki 發表在 痞客邦 留言(0) 人氣()

▲top