HTML, Javascript and AJAX
Download as PPTX, PDF0 likes134 views
This document summarizes key concepts related to HTML, JavaScript, Ajax, XML, JSON, and DOM. It discusses: - The basics of front-end and back-end web development - Common web technologies like HTML, CSS, JavaScript, XML, and JSON - How Ajax uses asynchronous JavaScript and XML to retrieve data from servers without page refreshes - How JSON became popular for data transmission due to being more compact than XML - The Document Object Model (DOM) and how JavaScript manipulates the DOM tree
![JSON
{ “name” : [
{“firstname”: “Bob”, “lastname”: “Foo”},
{“firstname” : “Chris”, “lastname”: “Bar”}
]
}](https://image.slidesharecdn.com/htmljavascriptandajax-210714204311/85/HTML-Javascript-and-AJAX-40-320.jpg)
HTML, Javascript and AJAX
- 1. HTML, Javascript and Ajax By wanleung (20th Feb, 2021)
- 2. Web Technology - BackEnd - FrontEnd
- 3. Backend - Web servers - HTML Pages, Data, etc from the web server. - HTTP protocol (GET, POST) - Web services, CGI, SOAP, API, Restful API…. - Php, Perl, Javascript (nodejs), Python, Java, Ruby, Go, Rust, C# …...
- 4. Frontend - Web Browser - HTML, CSS, Javascript, XML, json - Ajax. - (old) jQuery, Prototype…. - (latest) ReactJS, AnglurJS, Vue.
- 5. HTML HyperText Markup Language Sir Timothy John Berners-Lee (TimBL) 1993 1st release. Concept in 1989, inspire from SGML (Standard Generalized Markup Language, 1986) and IBM GML from 60s.
- 6. HTML HTML Tags <html> <head><title>Testing</title></head> <body></body> <h1>Hello</h1> <p>I am 1st line. <br /> I am 2nd line</p> </html>
- 7. HTML <span></span> - is an inline container used to mark up a part of a text, or a part of a document. <div></div> - defines a division or a section in an HTML document.
- 8. HTML
- 9. HTML5 Canvas Drag and Drop Media support WebRTC WebStoarge etc...
- 10. XML Extensible Markup Language 1996. Inspire from the simplicity of HTML. For Data. Human readable.
- 13. DOM Document Object Model Data Structure - Tree
- 14. DOM
- 15. CSS Cascading Style Sheet In a much easier way to control web layout and style such as colour, margin, padding, font type and side.
- 16. CSS
- 17. CSS
- 18. CSS
- 19. CSS . = class # = id
- 21. Javascript Javascript is a scripting language run on browsers. developed by Netscape 1995. Javascript is not Java. Microsoft reverse engineering on Netscape and developed JSscript and CSS on IE in 1996. As the browser war, Javascript and JSscript although the syntax are almost the same, they are not fully compatible between different browsers.
- 22. Javascript Netscape fight back: Standardization Submitted Javascript to ECMA International in 1996, becoming ECMAScript 1.0 in 1997. ECMAScript 2.0 in 1998, ECMAScript 3.0 in 1999, ECMAScript 4.0 in 2000. But as IE had a market share 95% in 2000s, JSscript was the de facto standard, and not very helpful on the working of standardization. It was the nightmare at the time. During the time Microsoft was pushing its VBscript. Adobe was pushing its Actionscript.
- 23. Javascript Turning Point: 2005 Jesse James Garrett release a white paper on the concept of AJAX. Asynchronous Javascript and XML Using the benefit of ECMAScript4 (ES4), XML and other technology on browser, such as DOM, to handling the GET / POST call and data processing at the background. So, user will no longer recognize the page refreshing whole page when updating data.
- 24. Javascript A lot of opensource communities supporting the new technology AJAX. jQuery, Prototype, Dojo. Firefox and Webkit (Safari) Google was working on the new browser Chromium release the V8 Javascript engine in 2008.
- 25. Javascript Finally, all the parties had a conference in Oslo 2008. This led to the eventual agreement in early 2009 to combine all relevant work and drive the language forward. The result was the ECMAScript 5 standard, released in December 2009, which we also called it as ES5. ECMAScript 6 (ES6) in 2015.
- 26. Javascript But at the moment, it is still not every browsers implement to support HTML5, CSS3 and ES6. There are still a very little part that the output is not the same in every browsers with the same code. But it is far better before 2008 and becoming better.
- 27. AJAX Asynchronous JavaScript and XML - is a set of web development techniques using many web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page.
- 28. AJAX Using Javascript to handle the DOM tree. And use XML as the format of the data transmission via HTTP protocol.
- 29. AJAX
- 30. DOM
- 31. XML Problem: Network traffic need cost. <tag></tag> format wastes too much traffic Slim down data traffic solution: JSON
- 33. JSON
- 34. JSON
- 35. JSON
- 36. JSON
- 37. JSON
- 38. JSON
- 40. JSON { “name” : [ {“firstname”: “Bob”, “lastname”: “Foo”}, {“firstname” : “Chris”, “lastname”: “Bar”} ] }
- 43. Coding Click to open the extension tab
- 44. Coding Search “Live Server”, “Browser Preview” and “open in browser” and install
- 46. Download http://office.ben7.net/javascript-test.zip
- 47. Editing HTML Right click the editor, and then choose “open with live server”
- 48. AJAX JSON TEST URL http://office.ben7.net/1823_statistic.json