Introduction

CSS Selectors(web)

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

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>

w3school(web)

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

w3school(web)

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

w3school(web)

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>

</body>
</html>

w3school(web)

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}

p.large {
font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>

</body>
</html>

w3school(web)

<!DOCTYPE html>
<html>
<head>
<title>Javascript example</title>
</head>
<body>
<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.
</button>

<p id="demo"></p>

</body>
</html>

W3School(web)

<!DOCTYPE html>
<html>
<head>
<title>CSS & javascript Example</title>
<style>
body {
background-color: lightblue;
}
p {
color: red;
font-size: 20px;
}
</style>
</head>

<body>

<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>

JavaScript accepts both double and single quotes.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>

<h2>Center Text</h2>

<div class="center">
<h1>This text is centered.</h1>
<button>Button</button>
</div>

</body>
</html>

W3School(web)(javascript)

#include <ESP8266WebServer.h>
#define ssid   "myEsp"//自訂 SSID CSggx
#define pw    "12345678" //自訂密碼至少8個字
#define port 80
String s = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>CSS & javascript Example</title>
<style>
body {
background-color: lightblue;
}
p {
color: red;
font-size: 20px;
}
</style>
</head>

<body>

<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>
)=====";
ESP8266WebServer server(port);
void handleRoot() {
server.send(200, "text/html", s);
}
void setup(void){
WiFi.softAP(ssid, pw);
server.on("/", handleRoot);
server.begin();

}

void loop(void){
server.handleClient();
}

上傳至ESP8266
連線至ssid:myEsp pwd:12345678
於瀏覽器連至 192.168.4.1

#include <ESP8266WebServer.h>
#define ssid   "asusTony"//寬頻分享器 SSID
#define pw    "123456789A" //寬頻分享器密碼
#define port 80
String s = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<meta charset='utf-8'>
<title>CSS & javascript Example</title>
<style>
body {
background-color: lightblue;
}
p {
color: red;
font-size: 20px;
}
</style>
</head>

<body>

<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>
)=====";
ESP8266WebServer server(port);
void handleRoot() {
server.send(200, "text/html", s);
}
void setup(void){
WiFi.begin(ssid, pw);
while (!(WiFi.status() == WL_CONNECTED)) {
    delay(1000);
}
WiFi.mode(WIFI_AP_STA);
WiFi.softAP(String("IP-"+ String((WiFi.localIP().toString()))),"");
server.begin();
server.on("/", handleRoot);
}

void loop(void){
server.handleClient();
}

上傳至ESP8266
手機連至寬頻分享器
搜尋WiFi IP-192.168.xxx.xxx
開啟瀏覽器連至 IP-192.168.xxx.xxx

使用button onclick
HTML DOM: location.href
w3school(web)

include <ESP8266WebServer.h>
#define ssid   "asusTony"//寬頻分享器 SSID
#define pw    "123456789A" //寬頻分享器密碼
#define port 80
#define led 2
String s = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<meta charset='utf-8'>
<title>Button javascript Example</title>
</head>
<body>
<h2>LED Control</h2>
<button type="button" onclick="location.href = '/1'">
開燈</button>
<button type="button" onclick="location.href = '/0'">
關燈</button>
</body>
</html>
)=====";
ESP8266WebServer server(port);
void handleRoot() {
server.send(200, "text/html", s);
}
void ledON() {
digitalWrite(led, LOW);
//server.send(200, "text/plain", String("ON"));
server.sendHeader("Location","/");
server.send(303);

}

void ledOFF() {
digitalWrite(led, HIGH);
// server.send(200, "text/plain", String("OFF"));
server.sendHeader("Location","/");
server.send(303);

}

void setup(void){
WiFi.begin(ssid, pw);
pinMode(led,OUTPUT);
while (!(WiFi.status() == WL_CONNECTED)) {
    delay(1000);
}
WiFi.mode(WIFI_AP_STA);
WiFi.softAP(String("IP-"+ String((WiFi.localIP().toString()))),"");
server.begin();
server.on("/", handleRoot);
server.on("/1", ledON);
server.on("/0", ledOFF);
}

void loop(void){
server.handleClient();
}

使用javascript function

include <ESP8266WebServer.h>
#define ssid   "asusTony"//寬頻分享器 SSID
#define pw    "123456789A" //寬頻分享器密碼
#define port 80
#define led 2 //ESP-01S
String s = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<meta charset='utf-8'>
<title>Button javascript Example</title>
<script>
    function fledON() {
      location.href = '/1';
    }
    function fledOFF() {
      location.href = '/0';
    }
</script>
</head>
<body>

<h2>LED Control</h2>

<button type="button" onclick="fledON()">
開燈</button>
<button type="button" onclick="fledOFF()">
關燈</button>
</body>
</html>
)=====";
ESP8266WebServer server(port);
void handleRoot() {
server.send(200, "text/html", s);
}
void ledON() {
digitalWrite(led, LOW);
//server.send(200, "text/plain", String("ON"));
server.sendHeader("Location","/");
server.send(303);

}

void ledOFF() {
digitalWrite(led, HIGH);
// server.send(200, "text/plain", String("OFF"));
server.sendHeader("Location","/");
server.send(303);

}

void setup(void){
WiFi.begin(ssid, pw);
pinMode(led,OUTPUT);
while (!(WiFi.status() == WL_CONNECTED)) {
    delay(1000);
}
WiFi.mode(WIFI_AP_STA);
WiFi.softAP(String("IP-"+ String((WiFi.localIP().toString()))),"");
server.begin();
server.on("/", handleRoot);
server.on("/1", ledON);
server.on("/0", ledOFF);
}

void loop(void){
server.handleClient();
}

使用form-input控制

#include <ESP8266WebServer.h>
ESP8266WebServer server(80);
void handleRoot() {
String s = R"=====(
<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
      <title>LED Control</title>
    </head>
<body>
     <h1>
    <center>
            <p>LED 控制<br></p>
            <form>
            <input type="submit" formaction="/1" value="ON" style="width:300px;height:100px;font-size:48px">
            <input type="submit" formaction="/0" value="OFF" style="width:300px;height:100px;font-size:48px">
            </form>
    </center>
    </h1>
</body>
</html>
)=====";
server.send(200, "text/html", s);
}

void ledON() {
digitalWrite(2, LOW);
server.sendHeader("Location","/");
server.send(303);

}

void ledOFF() {
digitalWrite(2, HIGH);
server.sendHeader("Location","/");
server.send(303);

}
void setup() {

pinMode(2, OUTPUT);

digitalWrite(2, HIGH);
WiFi.begin("asusTony", "123456789A");
while (!(WiFi.status() == WL_CONNECTED)) {
    delay(1000);
}
WiFi.mode(WIFI_AP_STA);

WiFi.softAP(String("IP-"+ String((WiFi.localIP().toString()))),"");
   digitalWrite(2,LOW);
server.begin();
server.on("/", handleRoot);
server.on("/1", ledON);
server.on("/0", ledOFF);
}
void loop() {
server.handleClient();
}

HTTP 303 ，自 RFC 2616 (HTTP 1.1)起，用於在收到HTTP POST請求之後，進行URL重定向的操作。