Web Programming Lecture Notes PDF

Web Programming By Dr. Mohamed Taha Lecturer, Computer Science Department, Faculty of Computers & Artificial Lecture  Text Book Introduction to Web Programming Ninth Agen da  Importance of Web Development  Web Designer...

Web Programming By Dr. Mohamed Taha Lecturer, Computer Science Department, Faculty of Computers & Artificial Lecture  Text Book Introduction to Web Programming Ninth Agen da  Importance of Web Development  Web Designer Vs. Web Developer  Front End and Back End Web Development  HTML, CSS, and JavaScript –An Overview  Hosting a Web Site  CSS - Introduction 3 IMPORTANCE OF WEB DEVELOPMENT 4  Importance of Web Development  The Internet is ubiquitous – Accessible through mobile and desktop – Customers/users need to find you/your business – Builds trust in your organization and improves your reputation – Your website is your first round-the-clock 5  Importance of Web Development  The Website – Creates first impression of your business – Create it to suit the needs of your target audience – Reflects your expertise and reputation – Can bring business from any part of the world!  You – Call needto Action –Encourage Web thetousers skills to agive create you Development Website!business 6 WEB DESIGNER VS. WEB DEVELOPER 7  Web Designer Vs. Web Developer  A Web Designer – Designs the look and feel of a website (creative side of website) – Decides the layout, fonts, color, images and overall branding – Creates the visual mock-up of the website – Rarely does the development of a website! – A Right-brained (Creative) Person. 8  Web Designer Vs. Web Developer  A Web Developer – Brings the website mock-up to life on the Internet (development side of website) – Develops the website and hosts on a web server – Has Web Development Skills: HTML, CSS, JavaScript, PHP, Perl, Python, Java, Ruby – A Left-brained (Logical) Person  Gain Web Development skills to become a Web Developer! 9 Web Developer Vs. Web Designer 1 0 FRONT END AND BACK END WEB DEVELOPMENT 1 1  Front End and Back End Web Development  Front End Web Development – Defined components on the page with HTML – Make them look pleasing with CSS – Enable interactivity with JavaScript – Enhance productivity with use of 1 2  Front End and Back End Web Development  Back End Web Development – Create the page components and content dynamically on the web server – Send the HTML + CSS + JavaScript to web browser (used by a human user) – Generate pages by programming in Java, JavaScript, PHP, Perl, Python, Ruby 1 – 3 1 4 HTML, CSS, AND JAVASCRIPT –AN OVERVIEW 1 5  HTML, CSS, and JavaScript –An Overview  HTML – Hypertext Markup Language – Structure of Page  JavaScript – Interactivity with User – Dynamic Updates in a Web Page 1 6  HTML, CSS, and JavaScript –An Overview  CSS – Cascading Style Sheets – Presentation/ Styling 1 7  Hypertext - Origins  Hypertext – Text with references (hyperlinks) to other text  “Hyper” -meaning – Greek Origin: “over”, “beyond”  First Idea – Vannevar Bush, USA, in 1945 1 8  A Simple HTML5 Page  Save the following code in a test.html file This is a Web programming Course Welcome to HTML5, CSS3 and JavaScript! 1 9 HOSTING A WEB SITE 2 0  Hosting a Web  Site A Web Site Serves one or more HTML Pages – Default Page: index.html, index.php  Served / Hosted by a Web Server HTTP Web Server — httpd, apache2, Ngnix, inetmgr.exe -Internet Information Server (Microsoft’s) Web Application Server – Apache Tomcat (Open Source), IBM WebSphere (Licensed)  Technologies HTML, HTTP, TCP/IP Protocols Operating Systems: Linux, 2 Windows, MacOS 1  HTML  HTML (Web) Page / Document Page User Interface for the Web (site or application) A plain text file – human readable Transported on HTTP - HyperText Transfer Protocol  Page Types Static – ready-made pages with fixed page content Dynamic – generated on the fly with varying page  File Extension:.html,.htm content  Generated on the Web Server  Interspersed with JavaScript, PHP, JSP, ASP 2 2 CSS - INTRODUCTION 2 3  CSS -  Cascading Style Sheet Introduction Describes the look and formatting of a page Used for Changing Presentation and Styling Can apply to a mark-up language  HTML, XHTML, XML, SVG  Separates Content from  Properties (Attributes) Styled Presentation Layout, Font (Typography), Color, Background Box Properties: Border, Margin, Padding 2 4  CSS Syntax  Style Selector (Contd./-) The HTML elements to which the Style rule should be applied It is a match expression Specified as:  Element’s tag name  h1, p, label - case insensitive  Value of Element’s attribute  id, class - Case Sensitive  Element’s placement in the Document tree  2  Child element A Sibling is nested element within is at the sameParent nesting 5  CSS Syntax (Contd./-)  CSS Declaration Block List of Declarations Enclosed in curly braces {... } Declaration  property : value(s) ; property and value(s) are pre-defined Property name is unique Property value – Specified in multiple formats  keywords (words) or mnemonics (in combination with some symbols like: #, /)  numerical, hexadecimal, or a combination  some values may have units of measure 2 6  New CSS3  New CSS3 Structural Selectors Pseudo-Class Selectors E:first-of-type – Selects the first element of type E for its parent li:first-of-type { color: red; } E:last-of-type - Selects the last element of type E for its parent li:last-of-type { color: yellow; } E:only-child - Selects if E is only the child of its parent li:only-child { color: blue; } E:nth-child(n) - Selects nth child of the element E 2 li:nth-last-child(2) { color: li:nth-child(3) { color: red;} } yellow; 7  CSS3 – 2D Transforms  Transformation Change of position, shape and size of an element  CSS3 Transforms 2-D: Two Dimensions 3-D: Three Dimensions (not covered in this course)  Transform Operations move, scale, spin, stretch and turn elements 2 8  CSS3 – 2D Transforms  (Contd./-) Specified with transform attribute Translation – Movement along X-axis and Y-axis transform: translate( 50px, 100px ); Rotation – in clock-wise direction transform: rotate( 5deg ); Scaling – increase/decrease size along width and height transform: scale( 2, 2 ); Skewing – tilting (turning) in X-axis and Y-axis 2 directions 9  CSS3  Transitions Changing from one style to another (on an event)  CSS property on which the transition effect has to take place  Time Duration over which transition has to take place (smoothly)  Specified in seconds (s) or milliseconds (ms) p { width: 100px; } p:hover { width: 200px; transition: width 2s; }  Transition starts on events  Events: hover, active, checked, focus, enabled, disabled  @media queries, and JavaScript  Specify multiple transitions sets with a comma p { width: 200px; height: 100px; } p:hover { width: 400px; height: 200px; transition: 3 width 2s, height 5s; } 0 JAVASCRIPT - INTRODUCTION 3 1  JavaScript – An Introduction  Mocha, later renamed as LiveScript - Developed by Netscape  Based on ECMAScript 5.1 (Ver. 6.0 is finalized in mid 2015)  LiveScript  JavaScript (due to Java popularity)  Scripting Language for Web Browsers Dynamically Typed Interpreted by JavaScript Engine  Can not Do (for Security Reasons) Unlimited reading/writing of files from client machine’s file system Writing to the files on the Server 3  Microsoft’s version - 2  Document Object Model (DOM) (Contd./-)  Structure and Style of a Page, Access / Update Content  DOM + JavaScript = Dynamic HTML (on client- side)  What JavaScript can do with DOM?  Change an HTML Element  Change an attribute of an HTML Element  Change the CSS style of an HTML Element  Remove an existing HTML element or its attributes  Add new a HTML Element or a new attribute to an Element 3 3  HTML DOM  Methods DOM Methods – Finding HTML Elements getElementById() Method  Gets the HTML Element with specified ID getElementsByClassName() Method  Gets the HTML Elements with specified class name document.getElementsByClassName("middlePara").innerHTML = "Welcome to Edureka!"; document.getElementsByClassName("middlePara").innerHTML = "This is HTML5, CSS3 and JavaScript Course!"; getElementsByTagName() method  Gets the HTML Elements with specified element tag document.getElementsByTagName("p").innerHTML = "Welcome to Edureka!"; document.getElementsByTagName("p").innerHTML = "This is CSS3 and JavaScript Course!"; 3 HTML5, 4  jQuery - Introduction  jQuery Core – a Cross-Platform JavaScript Library Simplifies client-side JavaScript scripting for a web page It is FREE and Open Source Used by about 6,000 most visited websites It uses the familiar HTML DOM model  Latest Versions Version 1.11.3 - has support for IE 6/7/8 Version 2.1.4 - has NO support for IE 6/7/8 Development Version  For use during development of the website 3 5  jQuery -  Why use jQuery? Introduction JavaScript Framework Separates HTML and JavaScript in a web page Eliminates cross-browser incompatibilities Simple/Short, Clean and Easy to read, write and understand  What jQuery can do? Can Select Elements  Has Selectors are similar to CSS Selectors Can Manipulate the Selected Elements Can Modify the Style of the Selected Elements Supports Events, Effects and Animations 3 6  jQuery  Download the latest versionBasics From jquery.com website  Reference it in HTML file Host it on your Web Server and Use it with tag  Google CDN Server CDN – Content Delivery Point to a Public Web  Microsoft CDN Server Server and Use it with tag  MaxCDN CDN Server (moved from MediaTemple, before that Amazon) 3 7 ANGULARJS - INTRODUCTION 3 8  AngularJS -   Developed by Google Introduction Based on MVC Pattern – on Front-End (Browser) side Model – Sourcing and Managing Data Controller – Application Logic – Decides what/when to display View – Presentation of Data – How (Where) to display the data  In AngularJS Model  Represents current state of the application  Stored in Object Properties View  Displays the data in the Page’s DOM Controller  Manages the relationship between the Model and the View (JavaScript Code) Data Binding Concept 3  Sync between them happens 9 ADVANCED WEB PROGRAMMING TOPICS 4 0  Advanced Web Programming Topics  HTML Canvas, WebGL, SVG  HTML5 Geolocation API  HTML5 Drag and Drop API  HTML5 Web Storage API  HTML5 Web Workers 4 1 JOB TRENDS FOR FULL STACK WEB DEVELOPER 4 2 Job trends for Full Stack Web Developer 4 3 QUESTION S 4 4 4 5