Web Technology Overview with a focus on JavaScript-based technologies Lawrence Yao

Slides:



Advertisements
Similar presentations
1/7 ITApplications XML Module Session 8: Introduction to Programming with XML.
Advertisements

HTTP Request/Response Process 1.Enter URL ( in your browser’s address bar. 2.Your browser uses DNS to look up IP address of server.com.
Understand Web Page Development Software Development Fundamentals LESSON 4.1.
AJAX Presented by: Dickson Fu Dimas Ariawan Niels Andreassen Ryan Dial Jordan Nielson CMPUT 410 University of Alberta 2006.
IS 360 Course Introduction. Slide 2 What you will Learn (1) The role of Web servers and clients How to create HTML, XHTML, and HTML 5 pages suitable for.
Cloud Computing Lecture #7 Introduction to Ajax Jimmy Lin The iSchool University of Maryland Wednesday, October 15, 2008 This work is licensed under a.
Dynamic Web Pages Bert Wachsmuth. Review  Internet, IP addresses, ports, client-server, http, smtp  HTML, XHTML, XML  Style Sheets, external, internal,
E-Commerce The technical side. LAMP Linux Linux Apache Apache MySQL MySQL PHP PHP All Open Source and free packages. Can be installed and run on most.
INTRO TO MAKING A WEBSITE Mark Zhang.  HTML  CSS  Javascript  PHP  MySQL  …That’s a lot of stuff!
ITM352 Javascript and Dynamic Web Pages: Client Side Processing.
Quick Tour of the Web Technologies: The BIG picture LECTURE A bird’s eye view of the different web technologies that we shall explore and study.
It’s World Wide! I NTRODUCTION TO T HE WEB 1 Photo courtesy:
PHP and MySQL Week#1  Course Plan.  Introduction to Dynamic Web Content.  Setting Up Development Server Eng. Mohamed Ahmed Black 1.
Agenda What is AJAX? What is jQuery? Demonstration/Tutorial Resources Q&A.
Presented by…. Group 2 1. Programming language 2Introduction.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
Ajax, XSLT and SVG Displaying ATLAS conditions data with new web technologies Shaun Roe 1Ajax, XSLT & SVG (Shaun Roe, Atlas)CHEP'09 Prague.
Introduction to AJAX AJAX Keywords: JavaScript and XML
Architecture Of ASP.NET. What is ASP?  Server-side scripting technology.  Files containing HTML and scripting code.  Access via HTTP requests.  Scripting.
JavaScript & jQuery the missing manual Chapter 11
CS 4720 RESTfulness and AJAX CS 4720 – Web & Mobile Systems.
Philly.NET Hands-on Labs JAVASCRIPT SERIES. July 9: JavaScript Syntax Visual Studio ◦Projects ◦Editors ◦Debugging ◦Script blocks ◦Minification and bundling.
Copyright © cs-tutorial.com. Introduction to Web Development In 1990 and 1991,Tim Berners-Lee created the World Wide Web at the European Laboratory for.
JavaScript Teppo Räisänen LIIKE/OAMK HTML, CSS, JavaScript HTML defines the structure CSS defines the layout JavaScript is used for scripting It.
Languages in WEB Presented by: Jenisha Kshatriya BCM SS09.
May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Build Great Web Application 'Fast and Easy'
Ruth Betcher Ruth Christie
Course review BTM 395: Internet Programming. What you have learnt in this course.
JavaScript, Fourth Edition Chapter 12 Updating Web Pages with AJAX.
JavaScript is a client-side scripting language. Programs run in the web browser on the client's computer. (PHP, in contrast, is a server-side scripting.
AJAX Making Dynamic Web pages more Dynamic Jim Hendricks April 25th, 2006.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
06/10/2015AJAX 1. 2 Introduction All material from AJAX – what is it? Traditional web pages and operation Examples of AJAX use Creating.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
Building Rich Web Applications with Ajax Linda Dailey Paulson IEEE – Computer, October 05 (Vol.38, No.10) Presented by Jingming Zhang.
Dynamic web content HTTP and HTML: Berners-Lee’s Basics.
Lecture 9: AJAX, Javascript review..  AJAX  Synchronous vs. asynchronous browsing.  Refreshing only “part of a page” from a URL.  Frameworks: Prototype,
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
Web Programming Brian Toone 8/27/2014. Outline for today 1.Understanding the architecture of the web 2.Overview of programming languages – Client-side.
Web Architecture Introduction
Event Handling & AJAX IT210 Web Systems. Question How do we enable users to dynamically interact with a website? Answer: Use mouse and keyboard to trigger.
Dave Salinas. What is XML? XML stands for eXtensible Markup Language Markup language, like HTML HTML was designed to display data, whereas XML was designed.
It’s World Wide! I NTRODUCTION TO T HE WEB 1 Photo courtesy:
AJAX – Asynchronous JavaScript And XML By Kranthi Kiran Nuthi CIS 764 Kansas State University.
Introduction to JavaScript MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/2/2016.
Overview Web Technologies Computing Science Thompson Rivers University.
IN THIS LESSON WE WILL REVIEW THE STRUCTURE OF THE INTERNET AND HOW BROWSERS ASSEMBLE WEBSITES BASED ON INSTRUCTIONS THEY RECEIVE FROM SERVERS. Internet.
1/7/2016www.infocampus.co.in1. 1/7/2016www.infocampus.co.in2 Web Development training gives you and all-round training in both the design and the development.
X2R Spec 1. Change log DateVersionPeopleNote 2013/11/01V0.0.1Chien-Wei Yu, Anderson Ou First draft, add X2R files spec. 2013/12/16V0.0.2Anderson Ou, Doc.
CSCI 3100 Tutorial 5 JavaScript & Ajax Jichuan Zeng Department of Computer Science and Engineering The Chinese University of Hong.
Web Technology Overview with a focus on JavaScript-based technologies Lawrence Yao
Web Development. Agenda Web History Network Architecture Types of Server The languages of the web Protocols API 2.
DHTML.
Web Technologies Computing Science Thompson Rivers University
Javascript and Dynamic Web Pages: Client Side Processing
JavaScript and Ajax (Ajax Tutorial)
Human Computer Interaction
Application with Cross-Platform GUI
Asynchronous Java script And XML Technology
AJAX.
Prepared for Md. Zakir Hossain Lecturer, CSE, DUET Prepared by Miton Chandra Datta
IS 360 Course Introduction
Secure Web Programming
Web Technology Overview with a focus on JavaScript-based technologies
CIS 133 mashup Javascript, jQuery and XML
BOF #1 – Fundamentals of the Web
Web Technologies Computing Science Thompson Rivers University
Web Client Side Technologies Raneem Qaddoura
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

Web Technology Overview with a focus on JavaScript-based technologies Lawrence Yao

Slide 2 Who am I? Lawrence Yao UNSW casual staff Developer Analyst at YTML Consulting me if you need technical help or suggestions for your SENG project.

Slide 3 Continuing education Employers will ask: What is exciting? Your response:

Slide 4 Web Technology Architecture From:

Slide 5 Web Browser Technology Architecture From:

Slide 6 JavaScript Highly recommended!!! Online access through UNSW library Learn all about the JavaScript programming language JavaScript: The Definitive Guide, 6th ed. By: David FlanaganDavid Flanagan Publisher: O'Reilly Media, Inc. Pub. Date: May 3, 2011

Slide 7 JavaScript on client and server Server-side JavaScript Web server with Node.js Client-side JavaScript within Chrome, Firefox, Internet Explorer… Internet (the Cloud)

Slide 8 Companion Web application Mash: The “supported” Web application – –Covers all technologies discussed –Study it in your own time –Ask me any questions about it via

Slide 9 Server-side JavaScript

Slide 10 This simple web server written in Node responds with “Hello World” for every request.

Slide 11 Node.js How does it work? Read these tutorials – Highly recommended, but not entirely free Provides enough knowledge to understand MASH – youll-learn-node-js--net-19448http://code.tutsplus.com/tutorials/this-time- youll-learn-node-js--net Outdated (v0.4.5) Official API –

Slide 12 Classic LAMP stack Linux (operating system) MySQL (database) Apache Httpd (Web server) PHP (server-side programming)

Slide 13 From LAMP to Node.js Linux (operating system) MySQL (database) Apache Httpd (Web server) PHP (server-side programming)

Slide 14 From LAMP to Node.js Linux (operating system) MySQL (database) Apache Httpd (Web server) PHP (server-side programming)

Slide 15 Node.js architecture JavaScript Engine (Google V8) Event Loop Library Based on slides from: Thread Pool Library HTTP Parser DNS Resolver Stream Socket Library Linux (operating system) MySQL (database) User developed modules… Third party modules…

Slide 16 Client-side JavaScript

Slide 17 HTML DOM To see the Document Object Model (DOM) –Open Web browser –Go to any Web page –Press F12 on keyboard to bring up the “Web Developer Tools” (works for Firefox and IE) –(IE10) Don’t forget to refresh DOM –Type JavaScript directly in the Console DOM can be changed without reloading entire Web page –Manually: Web Developer Tools –Programmatically: JavaScript

Slide 18 Cascading Style Sheets HTML: content; CSS: formatting Colour, margin, position, animation, etc… Specified in-line or in a separate.css file CSS can be changed without reloading –Manually: Web Developer Tools –Programmatically: JavaScript HTML5 and CSS3 Elizabeth Castro and Bruce Hyslop 7th ed. Berkeley, Calif. : Peachpit, c2012 Checked out at Main Library Level 3 (006.74/5)

Slide 19 CSS selectors

Slide 20 CSS selectors Tag: Select all DOM elements with –“p”, “h1” Tag#ID: Selects a unique elem with the given ID –“p#para”, “p#para2” Tag.Class: Selects all elems with the given Class –“h1.special”, “p.special” #ID: Selects a unique element (any tag) with the given ID –“#para”, “#para2”.Class: Selects all elements having the given Class –“.special”

Slide 21 CSS style sheet (.css) body { line-height:1; text-align:left; text-align:start } menu.small,ol,ul { list-style:none }.yt-embed-thumbnail { width:100%; height:100%; cursor:pointer; background-size:cover; background-repeat:no- repeat; background-position:center }

Slide 22 JavaScript Guide: W3C DOM specification:

Slide 23 Web browser Provides an environment to run JavaScript –The JavaScript code changes the DOM/CSS –DOM/CSS changes >> dynamic Web page Ties things together –Reads HTML and CSS, creates DOM, applies CSS, executes JavaScript, interprets result as the final Web page

Slide 24 Ajax Asynchronous JavaScript and XML Partially update a Web page in reaction to some event –No need to refresh entire Web page –Smoother user experience (less disruptive) Relies on Web browser functionality –Exposed as XMLHttpRequest (XHR) API Usually send/receive JSON in background –JSON data format:

Slide 25 Front-End Frameworks A compilation of complementary display elements that works like a theme –Focus on responsive design Bootstrap: –A popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web Foundation: Demo Grid system:

Slide 26 jQuery JavaScript library W3C DOM API is tedious and verbose jQuery is succinct and convenient Defines a global variable $ (or jQuery)

Slide 27 jQuery API Doc: Cook book: Let’s play –JSFiddle –Don’t forget to View Source on the Result frame

Slide 28 JSFiddle

Slide 29 SVG Scalable Vector Graphics (SVG) –Vector graphics in XML –Specification:

Slide 30 SVG in JSFiddle

Slide 31 Web graphics Great graphics = HTML + CSS + SVG –View in any browser, always sharp, quick to load –But static!! Great visualisation needs interactivity Great visualisations = HTML + CSS + SVG + JavaScript (D3.js)

Slide 32 Data-Driven Documents D3.js JavaScript library: Data + HTML + CSS + SVG JavaScript Great Visualisation

Slide 33 D3.js How does D3 work? Find out here In particular: –Three Little Circles –D3 Tutorials – Scott Murray –Example gallery

Slide 34 Web Browser Technology Architecture From:

Slide 35 Putting Everything Together Mash: A “supported” Web application – –Study it in your own time –Ask me any questions about it via –Bug fixes welcome (submit pull requests) Mash uses: –Client-side: HTML + CSS + SVG + JavaScript + Ajax (D3.js, jQuery, Bootstrap) –Server-side: Node.js –Use it as a template for your project!

Slide 36 Thank You Questions? me: Remember When learning coding, be brave Acknowledgments Lecture notes from Kenny Sabir