ESP8266 Web Server using CSS and JavaScript

in this video javascript programming will be integrated in a web page served by the esp8266 microcontroller javascript will enhance the functionality of the web page by adding interactive elements to develop a website three programming tools are required html which stands for hypertext markup language css which stands for cascading style sheets and javascript html defines the structure of a web page in terms of content such as text images and links while css defines the style in which the content is displayed javascript is an object-oriented programming language that enhances the functionality of the web page by adding interactive components into the website once the website has been developed a server will then send the web pages to a requesting client in this project the esp8266 is programmed as a web server sending this web page to the browser the web page is designed using html css and javascript the buttons have been designed using css and each button is clickable when clicked will execute a javascript let's have a look at the program used in this project we need to include these two libraries which enable the 8266 to use wifi and to become a web server i have created this header file called web page code which is this part here which is used to design the web page using html css and javascript server pointer is declared which enables the 8266 to connect with the browser using port 80. these two pointers store the network credentials this function web page is executed whatever the client requests service from the 8266 and the 8266 will respond by sending the code needed to build construct the web page within the setup function this part of the code will use the network credentials to connect with the router and then generate the local ip address server on and server begin initializes the 8266 as a web server and within the loop function server handle client will continuously listen to any requests from the client side the code needed to construct the web page is stored in this string variable and inside this string variable we have css code html code and javascript code before i begin explaining the web page code i highly recommend building the code outside the arduino ide using microsoft's visual studio code which allows you to execute the code on the browser and when you are satisfied with the code you can then copy it into the arduino ide sketch css code is contained within the style tags which are contained within the head tags of the html code this part of the css defines the format in which the buttons appear on the web page in terms of color orientation size text and so on while this part of the css defines the format of the main title page in terms of font type font color and background color and so on the html part of the code is contained within the header1 tags inside the body tags this part of the html code displays the main title page on the web page while these three html commands show the three clickable buttons on the web page the javascript code is contained within the script tags which is inside the head tag when the user clicks on the first button this function is executed which will display a text message the second button will execute this function which will prompt the user to enter their name and then it will respond with a message and finally this third function is executed when the third button is clicked which will ask the user for a positive integer number and then it will return the factorial of that number as you can see the programming syntax of javascript code is very similar to c plus plus and now for a quick demonstration in future videos more web development tools will be used and demonstrated such as ajax and web sockets which are tools used for asynchronous web applications thank you for watching you

Channel: Anas Kuzechie

Views: 47,076

Keywords:

Id: eHxkZ7poKHc

Length: 6min 21sec (381 seconds)

Published: Sat Dec 19 2020