xia的小窩

一起來coding和碼字吧

0%

js-第一個應用程式

發表於 更新於 分類於
文章字數： 207 所需閱讀時間 ≈ 1 分鐘

我們先看看註解的部分

1
2
3
4
/*
...
...
*/

html 跟 css 則是……

1
<!--anyword-->

看起來有點笨重，沒關係，我們先來隨便用一個小東西好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- index.heml -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>Documents</title> 
</head>
<body>

</body>
</html>

這個時候我們打開來看應該會是空白的

現在我們來看 js 的部分

1
2
// main.js
console.log("main.js is loaded")

並用 node main.js 確認是否能動

引用 jquery

1
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

引用 main.js

1
<script sr="main.js"></script>

引用 Canvas 元素

注意 : 每個 html 都只能擁有一個獨一無二的 ID

1
<canvas id="mainCanvas"></canvas>

點開 main.css

1
2
3
4
5
6
#mainCanvas{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    background-color:lightblue;
}

這樣應該會就看的到黑邊了 ~~