語法格式
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
邏輯 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
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;
}
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>
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>
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>
效果:將字串替換
學習重點:
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>
希望每天可以練到三個javascript及css
聽三則英文、背20個單字或句字
一天登入fb最多只能兩次
背國文佳句3句
按下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 函數名稱()
{
設定輸出字串
}
後記:
真是殘念
本以為很簡單
結果自己從無到有打過一遍
錯一堆
紅色標註我錯的地方
下次要記得
程式記錄 (2)