網頁Web-Javascript-基礎篇

  • 4101
  • 0
  • Web
  • 2021-04-19

1.彈窗

2.運算式

3.開發者模式下看的提示訊息 (F12 -> console)

4.改變標籤中的文字

5.按下按鈕後才改變標籤的文字

6.javascript執行先後順序

7.引入javascript檔案

8.使用javascript寫html

 

1.彈窗

<script>
	alert("文字");
</script>

可以放在<body>上方、或者</body>下方

#彈窗
<html>
	<head>
		<title>MyPage</title>
    </head>
<script>
	alert("文字");
</script>
<body>
123
</body>

</html>

 


2.運算式

#運算

alert(3+3);

#字串連結"+"

alert("3+3="+(3+3));

<script>
	alert("3+3="+(3+3));
</script>

 


3.開發者模式下看的提示訊息 (F12 -> console)

console.log(5 + 6);


4.改變標籤中的文字

注意:

如果<script></script>放置<body></body>上,

因執行順序關係,會找不到HTML標籤的元素

因此會把<script></script>放置<body></body>下

<html>
	<head>
		<title>MyPage</title>
        </head>
<body>

<h2>Hello,Javascript</h2>
<p id="welcome"></p>

</body>

<script>
	document.getElementById("welcome").innerHTML = "Hi,Hello";
</script>

</html>

 


5.按下按鈕後才改變標籤的文字

<p id="welcome">HI,JS.</p>
<button onclick="document.getElementById('welcome').innerHTML = 'Hello JavaScript!'">Click Me!

完整程式碼:

<html>
	<head>
		<title>MyPage</title>
        </head>
<body>

<h2>Hello</h2>
<p id="welcome">HI,JS.</p>
<button onclick="document.getElementById('welcome').innerHTML = 'Hello JavaScript!'">Click Me!

</button>

</body>
</html>

 


6.javascript執行先後順序

<html>

<head>
</head>

<script>
	alert(123); //順序:1
</script>

<body>
ABC <!--順序:3-->
<script>
	alert('ABC'); //順序:2
</script>

</body>
</html>

<script>
	alert('987');//順序:4
</script>


7.引入javascript檔案

#引入外部JS
"""
在網站資料夾裡建立"javascript"資料夾
在"javascript"資料夾,再建立一個"page.js"
把js的程式碼放到"page.js"
page.html 要使用時再引入page.js
"""
 

<script src="../javascript/page4.js"></script>

 


javascript/page4.js

function myFunction() {
    document.getElementById("welcome").innerHTML = "hi,hello";
}

page/page4.html

<html>
    <head>
        <title>MyPage</title>
        <script src="../javascript/page4.js"></script>
    </head>
    
<body>

<h1> Hello,Javascript </h1>
<p id="welcome"> hihi</p>
<!--點選按鈕時呼叫function()-->
<button onclick="myFunction()">改變文字</button>

</body> 
</html>

8.使用javascript寫html

<html>
	<head>
		<title>MyPage</title>
	</head>
	
<body>

</body> 
</html>

<script>
	document.write("HI,Hello<B>ABC</B>");
</script>

 

YiruAtStudio - 關於我 - 意如