R 语言，Web Programming Language
1. 环境配置
可以在github的仓库中下载Pdf和exercises.Rmd代码：
Warning in (function (file = "", n = NULL, text = NULL, prompt = "?", keep.source = getOption("keep.source"), :
argument encoding="UTF-8" is ignored in MBCS locales
参考此评论，换成3.6.3版本的R语言试一下，运行成功，没有警告，能够正常显示图片，如下所示
python ggplot 参考此
单张图片可以显示，例如此中的：
代码如下：
from plotnine.data import mtcars
import pandas as pd
import numpy as np
from plotnine import *
from plotnine.data import mpg
import matplotlib.pyplot as plt
from matplotlib import gridspec
theme_set(theme_bw(base_family = "STKaiti"))
# p = (ggplot(mtcars, aes('wt', 'mpg', color='factor(gear)'))
# + geom_point()
# + stat_smooth(method='lm')
# + facet_wrap('~gear'))
from plotnine.data import economics_long
from plotnine import ggplot, aes, geom_line
p = (
ggplot(economics_long, aes(x='date', y='value01', color='variable'))
+ geom_line()
)
## 使用q－q图检测数据的分布
p1 = (ggplot(mpg,aes(sample="displ"))
+geom_qq(colour = "blue")+geom_qq_line(colour = "red")
+ggtitle("geom_qq+geom_qq_line")
)
## 可视化添加了误差线的条形图，数据准备
mpgclass = pd.value_counts(mpg["class"]).reset_index()
mpgclass.columns=["car_type","Freq"]
## 误差线的上下界
mpgclass["ymin"] = mpgclass["Freq"] - [1,5,4,2,3,3,2]
mpgclass["ymax"] = mpgclass["Freq"] + [1,5,4,2,3,3,6]
## 可视化图像
p2 = (ggplot(mpgclass,aes(x = "car_type" ,y = "Freq"))
+geom_bar(stat = "identity",fill = "red",alpha = 0.6)
+geom_errorbar(aes(ymin = "ymin",ymax="ymax"),width=0.5,colour = "blue")
+ggtitle("geom_bar+geom_errorbar")+labs(x = "")+coord_flip()
)
## 可视化小提琴图和抖动的散点图
p3 = (ggplot(mpg,aes(x="drv",y = "displ",group = "drv",fill = "drv"))
+geom_violin(weight = 0.5,alpha = 0.5)+geom_jitter(width = 0.2)
+theme(legend_position = "none")+labs(x = "驱动方式")
+ggtitle("geom_violin+geom_jitter")
)
## 可视化直方图分析变量的分布
p4 = (ggplot(mpg,aes("displ"))+
geom_histogram(aes(y = "stat(density)"),position = "identity",
binwidth = 0.25,fill = "red",alpha = 0.5)
+geom_density(alpha = 0.2,colour = "blue")
+ggtitle("geom_histogram+geom_density")
)
## 二维封箱的热力图
p5 = (ggplot(mpg,aes(x="displ",y = "cty"))
+geom_bin2d(bins = 20)+geom_density_2d(colour = "red")
+theme(legend_position = "none")+ggtitle("geom_bin2d+geom_density2d")
)
## 面积填充图可视化
## 生成数据
np.random.seed(12)
huron = pd.DataFrame(data = {"year": np.arange(1875,1973), "level": 100*np.random.rand((1973-1875))})
huron["ymin"] = huron["level"]-20
huron["ymax"] = huron["level"]+20
p6 = (ggplot(huron, aes("year"))
+geom_ribbon(aes(ymin = "ymin", ymax = "ymax"), fill = "lightblue")
+geom_line(aes(y = "level"),color = "red")+ggtitle("geom_ribbon+geom_line")
)
## 将多个图像重新分配窗口可视化
fig = (ggplot()+geom_blank(data=mpg)+theme_void()).draw()
gs = gridspec.GridSpec(1,1) ## 初始化多个窗口
ax1 = fig.add_subplot(gs[0,0])
# ax2 = fig.add_subplot(gs[0,1])
# ax3 = fig.add_subplot(gs[0,2])
# ax4 = fig.add_subplot(gs[1,0])
# ax5 = fig.add_subplot(gs[1,1])
# ax6 = fig.add_subplot(gs[1,2])
## 为多个窗口绘图
_ = p._draw_using_figure(fig,[ax1])
# _ = p2._draw_using_figure(fig,[ax2])
# _ = p3._draw_using_figure(fig,[ax3])
# _ = p4._draw_using_figure(fig,[ax4])
# _ = p5._draw_using_figure(fig,[ax5])
# _ = p6._draw_using_figure(fig,[ax6])
plt.tight_layout()
plt.show()
多张图片，例如此，暂不知道怎么显示
2. 课程内容
Required reading (by Thomas Lin Pedersen):
- ggplot2 workshop part 1 ，两个半小时，也可以看这个
- ggplot2 workshop part 2，两个小时
ABOUT ME
- Thomas Lin Pedersen
- Software Engineer at RStudio
- Once a bioinformatician
- Focus on graphics
ABOUT today
- The Grammar of Graphics … on why a theoretical foundation fixes everything
- The ggplot2 API … where we learn that every benefit has costs
- Beyond ggplot2 … any glass ceiling can be shattered
- Drawing anything … in which we see that the benefits far outweighs the cost
Workshop GitHub repository:
- https://github.com/thomasp85/ggplot2_workshop
I will live-code the exercises instead of giving you time to do them.
- You can mute me and solve them asynchronously if you wish
3. Web Programming
要求：If you know nothing about HTML, CSS, and javascript, follow the videos CS50’s Web Programming with Python and JavaScript，也可以看b站
submit your recapped code on web-learning.
3.1 HTML
Hyper Text Markup Language,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Headings</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
<h6>Smallest heading</h6>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lists</title>
</head>
<body>
An Ordered List:
<ol>
<li>First Item</li>
<li>Seconf Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lists</title>
</head>
<body>
An Unorder List:
<ul>
<li>One Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>
An Ordered List:
<ol>
<li>First Item</li> <!--list item-->
<li>Seconf Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image</title>
</head>
<body>
<img src="cat.png" alt="Cat" width="300">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link</title>
</head>
<body>
<!-- Also can used to link to another .html-->
<a href="https://www.tsinghua.edu.cn/">Click Here</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Ocean</th>
<th>Average Dpeth</th>
<th>Maximum Dpeth</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pacific Ocean</td>
<td>4,280 m</td>
<td>10,911 m</td>
</tr>
<tr>
<td>Atlantic Ocean</td>
<td>3,646 m</td>
<td>8,486 m</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<form>
<input type="text" placeholder="Full Name" name="name">
<input type="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
</head>
<body>
<form>
<div>
<input name="name" type="text" placeholder="Name">
<input name="password" type="password" placeholder="Password">
</div>
<div>
Favorite color?
<input name="color" type="radio" value="red"> Red
<input name="color" type="radio" value="green"> Green
<input name="color" type="radio" value="blue"> Blue
<input name="color" type="radio" value="other"> Other
</div>
<div>
<input name="country" list="countries" placeholder="Country">
<datalist id="countries">
<option value="Afghanistan">
<option value="Albania">
<option value="Algeria">
<option value="Andorra">
<option value="Angola">
<option value="Antigua & Deps">
<option value="Argentina">
<option value="Armenia">
<option value="Australia">
<option value="Austria">
<option value="Azerbaijan">
<option value="Bahamas">
<option value="Bahrain">
<option value="Bangladesh">
<option value="Barbados">
<option value="Belarus">
<option value="Belgium">
<option value="Belize">
<option value="Benin">
<option value="Bhutan">
<option value="Bolivia">
<option value="Bosnia Herzegovina">
<option value="Botswana">
<option value="Brazil">
<option value="Brunei">
<option value="Bulgaria">
<option value="Burkina">
<option value="Burundi">
<option value="Cambodia">
<option value="Cameroon">
<option value="Canada">
<option value="Cape Verde">
<option value="Central African Rep">
<option value="Chad">
<option value="Chile">
<option value="China">
<option value="Colombia">
<option value="Comoros">
<option value="Congo">
<option value="Congo {Democratic Rep}">
<option value="Costa Rica">
<option value="Croatia">
<option value="Cuba">
<option value="Cyprus">
<option value="Czech Republic">
<option value="Denmark">
<option value="Djibouti">
<option value="Dominica">
<option value="Dominican Republic">
<option value="East Timor">
<option value="Ecuador">
<option value="Egypt">
<option value="El Salvador">
<option value="Equatorial Guinea">
<option value="Eritrea">
<option value="Estonia">
<option value="Ethiopia">
<option value="Fiji">
<option value="Finland">
<option value="France">
<option value="Gabon">
<option value="Gambia">
<option value="Georgia">
<option value="Germany">
<option value="Ghana">
<option value="Greece">
<option value="Grenada">
<option value="Guatemala">
<option value="Guinea">
<option value="Guinea-Bissau">
<option value="Guyana">
<option value="Haiti">
<option value="Honduras">
<option value="Hungary">
<option value="Iceland">
<option value="India">
<option value="Indonesia">
<option value="Iran">
<option value="Iraq">
<option value="Ireland {Republic}">
<option value="Israel">
<option value="Italy">
<option value="Ivory Coast">
<option value="Jamaica">
<option value="Japan">
<option value="Jordan">
<option value="Kazakhstan">
<option value="Kenya">
<option value="Kiribati">
<option value="Korea North">
<option value="Korea South">
<option value="Kosovo">
<option value="Kuwait">
<option value="Kyrgyzstan">
<option value="Laos">
<option value="Latvia">
<option value="Lebanon">
<option value="Lesotho">
<option value="Liberia">
<option value="Libya">
<option value="Liechtenstein">
<option value="Lithuania">
<option value="Luxembourg">
<option value="Macedonia">
<option value="Madagascar">
<option value="Malawi">
<option value="Malaysia">
<option value="Maldives">
<option value="Mali">
<option value="Malta">
<option value="Marshall Islands">
<option value="Mauritania">
<option value="Mauritius">
<option value="Mexico">
<option value="Micronesia">
<option value="Moldova">
<option value="Monaco">
<option value="Mongolia">
<option value="Montenegro">
<option value="Morocco">
<option value="Mozambique">
<option value="Myanmar, {Burma}">
<option value="Namibia">
<option value="Nauru">
<option value="Nepal">
<option value="Netherlands">
<option value="New Zealand">
<option value="Nicaragua">
<option value="Niger">
<option value="Nigeria">
<option value="Norway">
<option value="Oman">
<option value="Pakistan">
<option value="Palau">
<option value="Panama">
<option value="Papua New Guinea">
<option value="Paraguay">
<option value="Peru">
<option value="Philippines">
<option value="Poland">
<option value="Portugal">
<option value="Qatar">
<option value="Romania">
<option value="Russian Federation">
<option value="Rwanda">
<option value="St Kitts & Nevis">
<option value="St Lucia">
<option value="Saint Vincent & the Grenadines">
<option value="Samoa">
<option value="San Marino">
<option value="Sao Tome & Principe">
<option value="Saudi Arabia">
<option value="Senegal">
<option value="Serbia">
<option value="Seychelles">
<option value="Sierra Leone">
<option value="Singapore">
<option value="Slovakia">
<option value="Slovenia">
<option value="Solomon Islands">
<option value="Somalia">
<option value="South Africa">
<option value="South Sudan">
<option value="Spain">
<option value="Sri Lanka">
<option value="Sudan">
<option value="Suriname">
<option value="Swaziland">
<option value="Sweden">
<option value="Switzerland">
<option value="Syria">
<option value="Taiwan">
<option value="Tajikistan">
<option value="Tanzania">
<option value="Thailand">
<option value="Togo">
<option value="Tonga">
<option value="Trinidad & Tobago">
<option value="Tunisia">
<option value="Turkey">
<option value="Turkmenistan">
<option value="Tuvalu">
<option value="Uganda">
<option value="Ukraine">
<option value="United Arab Emirates">
<option value="United Kingdom">
<option value="United States">
<option value="Uruguay">
<option value="Uzbekistan">
<option value="Vanuatu">
<option value="Vatican City">
<option value="Venezuela">
<option value="Vietnam">
<option value="Yemen">
<option value="Zambia">
<option value="Zimbabwe">
</datalist>
</div>
</form>
</body>
</html>
3.2 CSS
Cascading Style Sheets
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Welcome to My Web Page!</h1>
<p>Hello, world! This is a paragraph of text.</p>
<p>This is another paragraph!</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to My Web Page!</h1>
<p>Hello, world! This is a paragraph of text.</p>
<p>This is another paragraph!</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Web Page!</h1>
<p>Hello, world! This is a paragraph of text.</p>
<p>This is another paragraph!</p>
</body>
</html>
h1 {
color: blue;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<style>
div {
background-color: orange;
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
}
</style>
</style>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<style>
div {
font-family: Arial, sans-serif;
font-size: 28px;
font-weight: bold;
}
</style>
</style>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<style>
div {
border: 3px solid blue;
}
</style>
</style>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<style>
.foo {
color: blue;
}
</style>
</head>
<body>
<p class="foo">This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p class="foo">This is the third paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<style>
ol li {
color: red;
}
</style>
</head>
<body>
<ol>
<li>list item one</li>
<li>list item two</li>
<ul>
<li>sublist item one</li>
<li>sublist item two</li>
</ul>
<li>list item three</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<style>
ol > li {
color: red;
}
</style>
</head>
<body>
<ol>
<li>list item one</li>
<li>list item two</li>
<ul>
<li>sublist item one</li>
<li>sublist item two</li>
</ul>
<li>list item three</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<style>
a {
color: blue;
}
a[href="https://facebook.com"] {
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="https://google.com">Google</a></li>
<li><a href="https://facebook.com">Facebook</a></li>
<li><a href="https://amazon.com">Amazon</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<style>
button {
width: 200px;
height: 50px;
font-size: 24px;
background-color: green;
}
button:hover {
background-color: orange;
}
</style>
</head>
<body>
<button>Click me!</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media (min-width: 600px) {
body {
background-color: red;
}
}
@media (max-width: 599px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<h1>Welcome to My Web Page!</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
background-color: springgreen;
font-size: 20px;
margin: 20px;
padding: 20px;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<div>1. This is some sample text inside of a div to demo Flexbox.</div>
<div>2. This is some sample text inside of a div to demo Flexbox.</div>
<div>3. This is some sample text inside of a div to demo Flexbox.</div>
<div>4. This is some sample text inside of a div to demo Flexbox.</div>
<div>5. This is some sample text inside of a div to demo Flexbox.</div>
<div>6. This is some sample text inside of a div to demo Flexbox.</div>
<div>7. This is some sample text inside of a div to demo Flexbox.</div>
<div>8. This is some sample text inside of a div to demo Flexbox.</div>
<div>9. This is some sample text inside of a div to demo Flexbox.</div>
<div>10. This is some sample text inside of a div to demo Flexbox.</div>
<div>11. This is some sample text inside of a div to demo Flexbox.</div>
<div>12. This is some sample text inside of a div to demo Flexbox.</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid {
background-color: green;
display: grid;
padding: 20px;
grid-column-gap: 20px;
grid-row-gap: 10px;
grid-template-columns: 200px 200px auto;
}
.grid-item {
background-color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
</body>
</html>
bootstrap，将样式表<link>复制粘贴到你的<head>中，在所有其他样式表之前加载我们的CSS。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head>
<body>
<div class="container">
<h1>Hello, world!</h1>
</div>
<div class="alert alert-primary" role="alert">
A simple primary alert-check it out!
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
.row > div {
padding: 20px;
background-color: teal;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3">
This is a section.
</div>
<div class="col-3">
This is another section.
</div>
<div class="col-3">
This is a third section.
</div>
<div class="col-3">
This is a fourth section.
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
.row > div {
padding: 20px;
background-color: teal;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3">
This is a section.
</div>
<div class="col-6">
This is another section.
</div>
<div class="col-3">
This is a third section.
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
.row > div {
padding: 20px;
background-color: teal;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
This is a section.
</div>
<div class="col-lg-3 col-sm-6">
This is another section.
</div>
<div class="col-lg-3 col-sm-6">
This is a third section.
</div>
<div class="col-lg-3 col-sm-6">
This is a fourth section.
</div>
</div>
</div>
</body>
</html>
HTML只认识CSS不认识SCSS文件variables.scss，需要把SCSS编译一下
<!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="variables.css">
</head>
<body>
Unordered List
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
Ordered List
<ol>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ol>
</body>
</html>
nesting.scss
div { font-size: 18px;
p {
color: blue;
}
ul {
color: green;
}
}
<!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="nesting.css">
</head>
<body>
<div>
<p>This is a paragraph inside the div.</p>
List inside the div:
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
</div>
<p>This is a paragraph outside the div.</p>
List outside the div:
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
</body>
</html>
inheritance.scss
%message {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
border: 1px solid black;
padding: 20px;
margin: 20px;
}
.success {
@extend %message;
background-color: green;
}
.warning {
@extend %message;
background-color: orange;
}
.error {
@extend %message;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="inheritance.css">
</head>
<body>
<div class="success">This is a success message.</div>
<div class="warning">This is a warning message.</div>
<div class="error">This is an error message.</div>
</body>
</html>
3.3 JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<script>
alert('Hello, world!');
</script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Count</title>
<script>
let counter = 0;
function count() {
counter++;
alert(counter);
}
</script>
</head>
<body>
<button onclick="count()">Count</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<script>
function hello() {
document.querySelector('h1').innerHTML = 'Goodbye!';
}
</script>
</head>
<body>
<h1>Hello!</h1>
<button onclick="hello()">Click Here</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<script>
function hello() {
const heading = document.querySelector('h1');
if (heading.innerHTML === 'Hello!') {
heading.innerHTML = 'Goodbye!';
} else {
heading.innerHTML = 'Hello!';
}
}
</script>
</head>
<body>
<h1>Hello!</h1>
<button onclick="hello()">Click Here</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Count</title>
<script>
let counter = 0;
function count() {
counter++;
document.querySelector('h1').innerHTML = counter;
}
</script>
</head>
<body>
<h1>0</h1>
<button onclick="count()">Count</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Count</title>
<script>
let counter = 0;
function count() {
counter++;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`);
}
document.querySelector('h1').innerHTML = counter;
}
</script>
</head>
<body>
<h1>0</h1>
<button onclick="count()">Count</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Count</title>
<script>
let counter = 0;
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').onclick = count;
});
function count() {
counter++;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`);
}
document.querySelector('h1').innerHTML = counter;
}
</script>
</head>
<body>
<h1>0</h1>
<button>Count</button>
</body>
</html>
counter.js:
let counter = 0;
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').onclick = count;
});
function count() {
counter++;
if (counter % 10 === 0) {
alert(`Count is now ${counter}`);
}
document.querySelector('h1').innerHTML = counter;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Count</title>
<script src="counter.js"></script>
</head>
<body>
<h1>0</h1>
<button>Count</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').onsubmit = function() {
const name = document.querySelector('#name').value;
alert(`Hello, ${name}!`);
};
});
</script>
</head>
<body>
<h1>Hello!</h1>
<form>
<input autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Change font color to red
document.querySelector('#red').onclick = function() {
document.querySelector('#hello').style.color = 'red';
};
// Change font color to blue
document.querySelector('#blue').onclick = function() {
document.querySelector('#hello').style.color = 'blue';
};
// Change font color to green
document.querySelector('#green').onclick = function() {
document.querySelector('#hello').style.color = 'green';
};
});
</script>
<title>Colors</title>
</head>
<body>
<h1 id="hello">Hello!</h1>
<button id="red">Red</button>
<button id="blue">Blue</button>
<button id="green">Green</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Have each button change the color of the heading
document.querySelectorAll('.color-change').forEach(function(button) {
button.onclick = function() {
document.querySelector('#hello').style.color = button.dataset.color;
};
});
});
</script>
<title>Colors</title>
</head>
<body>
<h1 id="hello">Hello!</h1>
<button class="color-change" data-color="red">Red</button>
<button class="color-change" data-color="blue">Blue</button>
<button class="color-change" data-color="green">Green</button>
</body>
</html>
可以把三个类似的函数利用"data-color"和“querySelectorAll”整合成一个，能够实现与上面一样的效果
<!DOCTYPE html>
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Have each button change the color of the heading
document.querySelectorAll('.color-change').forEach(button => {
button.onclick = () => {
document.querySelector('#hello').style.color = button.dataset.color;
};
});
});
</script>
<title>Colors</title>
</head>
<body>
<h1 id="hello">Hello!</h1>
<button class="color-change" data-color="red">Red</button>
<button class="color-change" data-color="blue">Blue</button>
<button class="color-change" data-color="green">Green</button>
</body>
</html>
用"=“和”>"同样能够实现与上面一样的效果
<!DOCTYPE html>
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Change the color of the heading when dropdown changes
document.querySelector('#color-change').onchange = function() {
document.querySelector('#hello').style.color = this.value;
};
});
</script>
<title>Colors</title>
</head>
<body>
<h1 id="hello">Hello!</h1>
<select id="color-change">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</body>
</html>
没有按钮，而是下拉菜单的形式
<!DOCTYPE html>
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('form').onsubmit = () => {
// Create new item for list
const li = document.createElement('li');
li.innerHTML = document.querySelector('#task').value;
// Add new item to task list
document.querySelector('#tasks').append(li);
// Clear input field
document.querySelector('#task').value = '';
// Stop form from submitting
return false;
};
});
</script>
<title>Tasks</title>
</head>
<body>
<h1>Tasks</h1>
<ul id="tasks">
</ul>
<form>
<input id="task" autocomplete="off" autofocus placeholder="New Task" type="text">
<input type="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
// By default, submit button is disabled
document.querySelector('#submit').disabled = true;
// Enable button only if there is text in the input field
document.querySelector('#task').onkeyup = () => {
document.querySelector('#submit').disabled = false;
};
document.querySelector('form').onsubmit = () => {
// Create new item for list
const li = document.createElement('li');
li.innerHTML = document.querySelector('#task').value;
// Add new item to task list
document.querySelector('#tasks').append(li);
// Clear input field and disable button again
document.querySelector('#task').value = '';
document.querySelector('#submit').disabled = true;
// Stop form from submitting
return false;
};
});
</script>
<title>Tasks</title>
</head>
<body>
<h1>Tasks</h1>
<ul id="tasks">
</ul>
<form>
<input id="task" autocomplete="off" autofocus placeholder="New Task" type="text">
<input id="submit" type="submit">
</form>
</body>
</html>
默认提交按钮为"False"
<!DOCTYPE html>
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
setInterval(count, 1000);
});
let counter = 0;
function count() {
counter++;
document.querySelector('#counter').innerHTML = counter;
}
</script>
<title>Intervals</title>
</head>
<body>
<h1 id="counter">0</h1>
</body>
</html>
每秒+1的计数，每次刷新网页的时候都会重新从0开始计数
<!DOCTYPE html>
<html lang="en">
<head>
<script>
// Set starting value of counter to 0
if (!localStorage.getItem('counter'))
localStorage.setItem('counter', 0);
// Load current value of counter
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#counter').innerHTML = localStorage.getItem('counter');
// Count every time button is clicked
document.querySelector('button').onclick = () => {
// Increment current counter
let counter = localStorage.getItem('counter');
counter++;
// Update counter
document.querySelector('#counter').innerHTML = counter;
localStorage.setItem('counter', counter);
}
});
</script>
<title>Local Storage</title>
</head>
<body>
<h1 id="counter"></h1>
<button>Click Here!</button>
</body>
</html>
点击"Click Here!"的时候会+1，而且利用"localStorage.getItem"和"localStorage.setItem"刷新网页之后会保存之前的内容
<!DOCTYPE html>
<html lang="en">
<title>Currency</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch("https://api.exchangeratesapi.io/latest?base=USD&access_key=ACCESS_KEY")
.then(response => response.json())
.then(data => {
console.log(data);
// const rate = data.rates.EUR;
// document.querySelector('body').innerHTML = rate;
})
.catch(error => {
console.log('Error:', error);
});
});
</script>
<body>
</body>
</html>
“https://api.exchangeratesapi.io/latest?base=USD&access_key=ACCESS_KEY”，
// console.log(data);
const rate = data.error.info;
document.querySelector('body').innerHTML = rate;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
