LMS行政E化暨班級社群教職員工數位歷程檔線上手冊Login
Position: 王文良 > 專題製作
JavaScript examples
by 王文良 2019-04-02 10:07:45, Reply(0), Views(375)
Ex1:

<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>
<script>
function test(id){
  id.innerHTML="abc";
}
</script>

<p id="demo" onclick="test(this)">def</p>

</body>
</html> 

Ex2:

<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>
<script>
function test(id){
  id.innerHTML="abc";
  id.style.color="blue";
  id.style.fontSize="250%";
}
</script>

<p id="demo" onclick="test(this)">def</p>

</body>
</html> 

Ex3:
<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>
<script>

function test(id){
  var degree=0;
  id.innerHTML="abc";
  id.style.color="blue";
  id.style.fontSize="250%";
  setInterval(function(){
    id.style.transform = "rotate("+ ++degree+"deg)";
    },10);
}
</script>

<p id="demo" onclick="test(this)">def</p>

</body>
</html> 

ex4:
<!DOCTYPE html>
<html>
<head>
<script>
function test(id){
        var size;
            size=document.getElementById("input1").value;            
  id.style.width=size+"px";
 
}
</script>
</head>
<body>

<h2>調整相片大小</h2>

<input id="input1" type="range" min="100" max="1000"  onchange="test(demo1)"></input>
<br>
<br>

<img id="demo1" src="https://www.nownews.com/wp-content/uploads/2018/11/1542172486-a3c168017804816f60f51d61759979d9-696x463.jpg" />

</body>
</html> 

ex5: Node, Express
參考網址: http://www.runoob.com/nodejs/nodejs-express-framework.html
塗鴉板: http://code-and.coffee/post/2015/collaborative-drawing-canvas-node-websocket/
操作步驟: 
Step1: 下載nodejs並且安裝
Step2: 在C碟根目錄下新增一個nodejs資料夾
Step3:打開Visual Studio Code, 開啟nodejs資料夾, 然後到 檢視/主控台/終端機
Step3: npm init
Step4: npm install express --save, npm install socket.io --save 
Step5: 寫一個express 後端程式
Step6: 執行該程式, node index.js
Step7: 打開瀏覽器, 讀取127.0.0.1:3000; localhost:3000; 用ipconfig查詢IP位置, 然後再讀取192.168.151.95:3000

Arduino範例程式:
 
Node.js程式範例: 

var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World');
})

app.get('/contact', function (req, res) {
res.send('請跟我們連絡');
})

app.get('/index.html', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
})
var server = app.listen(3000, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例,访问地址为 http://%s:%s", host, port)
})
Reply