---
tags: 網站
---
# 網站設計進階 week2 筆記
---
**json.js**
```jsonld
var p1 = {
name: 'ccc',
age: 50
}
console.log('p1=', p1)
var p1text = json.stringify(p1)
console.log('p1text=', p1text)
var p1text2 = json.stringify(p1, null, 2)
console.log('p1text2=', p1text2)
var p2 = json.parse(p1text)
console.log('p2=', p2)
```
### json.stringigy(p1) 將p1轉成json格式
` p1text= {"name":"ccc","age":50} `
### json.stringify(p1, null, 2) 設定引數 將結果加入換行
``` p1text2= {
"name": "ccc",
"age": 50
}
```
### json.parse(p1text) 把json轉回物件的格式
` p2= { name: 'ccc', age: 50 } `
---
**oakHello.js**
```javascript=
import { Application } from "https://deno.land/x/oak/mod.ts";
const app = new Application();
app.use((ctx) => {
ctx.response.body = "Hello World!";
});
console.log('start at : http://127.0.0.1:8000')
await app.listen({ port: 8000 });
/*
5~7行 可以寫成
app.use(function(ctx) {
ctx.response.body = "Hello World!"
})
*/
```
> $ deno run --allow-net oakHello.js
---
**oakHelloArg.js**
```javascript
// 自行設定要使用port
import { Application } from "https://deno.land/x/oak/mod.ts";
const app = new Application();
app.use((ctx) => {
ctx.response.body = "Hello World!";
});
let port = parseInt(Deno.args[0])
console.log('start at : http://127.0.0.1'+port)
await app.listen({ port: port });
```
> $ deno run -A oakHelloArg.js 8001
// 用 -A 方便測試用 有安全性疑慮
---
**oakHtml.js**
```javascript=
import { Application } from "https://deno.land/x/oak/mod.ts";
const app = new Application();
app.use((ctx) => {
// ctx.response.type = 'text/plain'
// ctx.response.type = 'text/html'
ctx.response.body = `
<html>
<body>
<h1> my website </h1>
<a href="https://tw.youtube.com">YouTube</a>
</body>
</html>`
});
console.log('start at : http://127.0.0.1:8000')
await app.listen({ port: 8000 });
```
> deno run -A oakHtml.js
### 只要在 ctx.response.body = \` \` 裡面輸入html程式碼就可以直接輸出網頁了
### 第6行取消註解的話 就會變成輸出純文字
---
**oakinfo.js**
```javascript
import { Application } from "https://deno.land/x/oak/mod.ts";
const app = new Application();
app.use((ctx) => {
console.log('ctx=', ctx)
console.log('ctx.request=', ctx.request)
console.log('url=', ctx.request.url)
ctx.response.body = `
method=${ctx.request.method}
url=${ctx.request.url.href}
protocol=${ctx.request.url.protocol}
hostname=${ctx.request.url.hostname}
pathname=${ctx.request.url.pathname}
hash=${ctx.request.url.hash}
search=${ctx.request.url.search}
searchParams=${ctx.request.url.searchParams}
searchParams.get('name')=${ctx.request.url.searchParams.get('name')}
headers=${JSON.stringify(Object.fromEntries(ctx.request.headers))}
`;
});
console.log('start at : http://127.0.0.1:8000')
await app.listen({ port: 8000 });
```
### 透過修改網址 可以轉到指定的頁面 或用GET或POST方法傳參數給網頁
---
Sign in with Wallet
Connect another wallet