前端开发基础

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端开发基础</title>
    <style>
        .world {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <h1>Web开发基础</h1>
    <p class="world">Hello world</p>
</body>
</html>

笔记：

参考：

JavaScript

1
2
3
4
5
6
7
const sayHi = "Hello JavaScript";
document.write("<h1>这是一个标题</h1>");
function say() {  //定义函数
    console.log(sayHi)
}
say()
window.alert(sayHi);

笔记：

参考：

框架前置知识

1
2
3
4
5
6
7
8
9
const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
    res.setHeader('Content-type', 'text/plain;charset=utf-8')
    res.end('欢迎使用 Node.js 和 http 模块创建的 Web 服务')
})
server.listen(3000, () => {
    console.log('Web服务启动成功')
})

笔记：

参考：

Vue

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
    {{ msg }}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: 'Hello Vue'
        }
    })
</script>

笔记：

参考：

React

1
2
3
4
5
6
7
8
9
10
11
const message = 'this is message'
function App() {
    return (
        <div className="App">
            Hello React!
            <br/>
            {message}
        </div>
    );
}
export default App;

笔记：

参考：

TypeScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function add(num1: number, num2: number): number {
  return num1 + num2
}
console.log(add(1, 3))

interface Person {
    name: string
    age: number
    sayHi(): void
}
  
let handsomeBoy: Person = {
    name: 'Alien',
    age: 18,
    sayHi() {
        console.log('Hello, I\'m', this.name);
    }
}
handsomeBoy.sayHi()

笔记：

参考：

鸿蒙HarmonyOS应用开发

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Entry
@Component
struct Index {
    @State message: string = 'Hello World'

    build() {
        Row() {
            Column() {
                Text(this.message)
                .fontSize(50)
                .fontWeight(FontWeight.Bold)
            }
            .width('100%')
        }
        .height('100%')
    }
}

笔记：

参考：

面试知识点

笔记：

参考：