Web basic
======
###### tags: `summertrain`
---
## HTML+CSS+Javascript
* HTML: 骨架
* CSS: 皮膚
* JavaScript: 肌肉
---
## HTML
HyperText Markup Language
```html
<tagname attribute>Content</tagname>
```
----
## Try your first HTML
```htmlmixed
<!DOCTYPE html> <!-- tell browser how to interpret this document -->
<html> <!-- other tags should be inside this -->
<head> <!-- meta (non-content) data goes here-->
<meta charset="utf-8">
<title>Title here</title>
</head>
<body> <!-- content goes here-->
<h1>
Heading here
</h1>
<p>Sentence here</p>
<a href="https://www.w3schools.com">Visit W3Schools</a>
</body>
</html>
```
or [Try it](https://www.w3schools.com/html/html_basic.asp)
---
## CSS
Cascading Style Sheets
```htmlmixed
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: blue; font-size: 12px;}
</style>
</head>
<body>
<h1>Heading here</h1>
</body>
</html>
```
----
## Try your first CSS
```htmlmixed
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
or [Try it](https://www.w3schools.com/css/tryit.asp?filename=trycss_default)
---
## JavaScript
Program the behavior of web pages
```htmlmixed
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="displayDateTime()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
<script>
const displayDateTime = () => {
document.getElementById('demo').innerHTML = Date()
}
</script>
</html>
```
----
### 充滿 bug 的語言
[wtfjs](https://github.com/denysdovhan/wtfjs)
[JSFuck](http://www.jsfuck.com/)
----
```javascript=
1 - "1"
1 + "1"
```
(1) 0 , 2
(2) '' , '11'
(3) 0 , '11'
(4) '' , 2
(5) SyntaxError
----
```javascript=
typeof NaN
```
(1) bool
(2) string
(3) number
----
```javascript=
NaN === NaN
```
(1) ture
(2) false
(3) NaN
(4) undefined
----
```javascript=
"Ba" + +"a" + "a"
```
(1) undefined
(2) BaNaNa
(3) Baaa
----
```javascript=
for(var i=0;i<3;i++)
setTimeout(()=>console.log(i), 10)
```
(1) 012
(2) 222
(3) 333
----
```javascript=
for(let i=0;i<3;i++)
setTimeout(()=>console.log(i), 10)
```
(1) 012
(2) 222
(3) 333
----
```javascript=
var x = 10;
{
var x = 2;
}
console.log(x)
var x = 10;
{
let x = 2;
}
console.log(x)
```
----
你的 console.log() 不是你的 console.log()
```javascript=
var obj = {value: 'before'}
console.log('before:', obj)
obj.value = 'after'
console.log('after:', obj)
```
{"metaMigratedAt":"2023-06-14T22:55:14.458Z","metaMigratedFrom":"Content","title":"Web basic","breaks":true,"contributors":"[{\"id\":\"a529c52b-1fc6-4e59-9359-79f803c9692b\",\"add\":5135,\"del\":2459}]"}