18CSC311J WEB DESIGN AND DEVELPMENT UNIT-1

18CSC311J WEB DESIGN AND DEVELOPMENT 2023-24 EVEN SEMESTER REGULATION 2018 Prepared by Dr.M.Sivakumar AP,NWC, SRMIST, KTR DEPARTMENT OF NETWORKING AND COMMUNICATIONS

Course Outcomes COURSE OUTCOMES (CO) : At the end of this course, learners will be able to : CO-1 Apply the HTML,CSS, AJAX and JQUERY into webpage development CO-2 Develop and demonstrate the dynamic web page with appropriate form validation using JavaScript objects with different event handling mechanisms CO-3 Gain the knowledge about web site dynamic behavior and server side Programming CO-4 Develop the dynamic web pages using databases using JDBC ,ODBC CO-5 Acquire the knowledge in web development frameworks and webservices

Table of Contents Understanding of internet, Overview of an cloud technology and infrastructure, website and webserver , web client, Internet Technology, Understanding cloud-based web hosting Introduction: Rich Internet Applications. Introduction to HTML - HTML5: Responsive Web Design Introduction about CSS - CSS Types Introduction to Javascript Javascript DOM Model Control Structure Objects and built-in objects Event Handling, form validation Exception handling

Understanding of internet, Overview of an cloud technology and infrastructure, website and webserver , web client, Internet Technology, Understanding cloud-based web hosting Introduction: Rich Internet Applications.

Introduction to HTML - HTML5: Responsive Web Design

Structure of HTML5 <!DOCTYPE html> < html> < head > <meta charset="UTF-8"> <title> Title of the document </title> </ head> < body > //content of the document </ body> </html> 18CSC311J WEB DESIGN AND DEVELOPMENT

Basic HTML5 Web Page <!DOCTYPE html> <html lang ="en"> <head> <meta charset="utf-8"> <title>My First HTML5 Page</title> <link rel =" stylesheet " href ="style.css"> </head> <body> <p>HTML5 is fun!</p> </body> </html> 18CSC311J WEB DESIGN AND DEVELOPMENT

Tables <table> <td> < tr > < th > <caption> < tbody > < thead > < tfoot > 18CSC311J WEB DESIGN AND DEVELOPMENT

Tables <!DOCTYPE html> <html> < head> < title>Table Example</title> </ head> < body> <table border="1"> < caption>Name List</caption> < tr > < td>101</td> < td>Raja</td> </ tr > < tr > < td>102</td> < td> Madhan </td> </ tr > < tr > < td>103</td> < td> Muthu </td> </ tr > < tr > < td>104</td> < td>Naveen</td> </ tr > </ table> </ body> </html> Output 101 Raja 102 Madhan 103 Muthu 104 Naveen Name List 18CSC311J WEB DESIGN AND DEVELOPMENT

Lists <dl> - define List < dt > - Define Terms < dd > - Definition < ol > - Ordered List <li> - List Item Attribute: type=“1” < ul > - Unordered List <li> - List Item Attribute: style =" list-style-type:disc " 18CSC311J WEB DESIGN AND DEVELOPMENT

Lists Example 18CSC311J WEB DESIGN AND DEVELOPMENT

Image < img src ="/images/sunset-360.jpg" alt ="Picture of a Ha Long Bay sunset" srcset ="/images/sunset-360.jpg 360w, /images/sunset-720.jpg 720w, /images/sunset-1440.jpg 1440w>" sizes ="(min-width: 800px) 720px, 360px“ height =“240” width =“120” > 18CSC311J WEB DESIGN AND DEVELOPMENT

Forms in HTML5 < form name =“ ” action =“ ” onsubmit =“ ” method =“ ” autocomplete =“ ”> </ form > action - Defines which URL the form's information is sent to when submitted . action=“/contact” action = "https:// htmlreference.io/ contact.jsp " method - Defines the HTTP method used when submitting the form . method= “get” method=“post” n ame - The form's name when sent to the server. Useful when multiple forms are present on the same web page . name=“ signupform ” a utocomplete - Determines if the browser can autocomplete all the form's controls . autocomplete=“off” autocomplete =“on” 18CSC311J WEB DESIGN AND DEVELOPMENT

Form Elements <input> < select> < textarea > < button > < datalist > <output> 18CSC311J WEB DESIGN AND DEVELOPMENT

Input Types <input type="button"> <input type="checkbox"> <input type=" color "> <input type="date"> < input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month "> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type=" tel "> <input type="text"> <input type="time“> 18CSC311J WEB DESIGN AND DEVELOPMENT

Form Control Elements Search field <input type="search" id="search" name="search"> Phone nmber field <input type=" tel " id=" tel " name=" tel "> URL field <input type=" url " id=" url " name=" url "> Numeric field <input type="number" name="age" id="age" min="1" max="10" step="2"> Slider controls <label for="price">Choose a maximum house price: </label> <input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000"> <output class="price-output" for="price"></output> 18CSC311J WEB DESIGN AND DEVELOPMENT

HTML5 Form Attributes placeholder autocomplete required Example: <input type="text" name=" empname " placeholder="Enter your name" required> 18CSC311J WEB DESIGN AND DEVELOPMENT

HTML5 Semantic elements Tag Name Purpose <article> Defines an article <aside> Defines content aside from the page content <details> Defines additional details that the user can view or hide <figcaption> Defines a caption for a <figure> element <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <footer> Defines a footer for a document or section <header> Specifies a header for a document or section <main> Specifies the main content of a document <mark> Defines marked/highlighted text <nav> Defines navigation links <section> Defines a section in a document <summary> Defines a visible heading for a <details> element <time> Defines a date/time 18CSC311J WEB DESIGN AND DEVELOPMENT

Structure of Simple HTML5 Document 18CSC311J WEB DESIGN AND DEVELOPMENT

Drag and Drop HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button 18CSC311J WEB DESIGN AND DEVELOPMENT

Events for Drag and Drop feature Event Description drag It fires every time when the mouse is moved while the object is being dragged. dragstart Calls a function, drag(event), that specifies what data to be dragged dragenter To determine whether or not the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled dragover Specifies where the dragged data can be dropped dragleave Occurs when the mouse leaves an element before a valid drop target while the drag is ocurring drop Specifies where the drop was occurred at the end of the drag operation dragend Occurs when the user has finished dragging an element 18CSC311J WEB DESIGN AND DEVELOPMENT

Procedure for Drag and Drop Step 1: Make an object draggable First set the draggable attribute to true for that element to be draggable < img draggable = “true”> Then, specify what should happen when the element is dragged. The ondragstart attribute calls a function, drag(event), that specifies what data to be dragged. The dataTransfer.setData () method sets the data type and the value of the dragged data The event listener ondragstart will set the allowed effects (copy, move, link, or some combination ). function dragStart ( ev ) { ev. dataTransfer .setData ("text", ev.target.id); } 18CSC311J WEB DESIGN AND DEVELOPMENT

Procedure for Drag and Drop Step 2: Dropping the Object The ondragover event specifies where the dragged data can be dropped. By default, data/elements cannot be dropped in other elements. To allow a drop, it must prevent the default handling of the element. This is done by calling the event.preventDefault () method Finally, the drop event, which allows the actual drop to be performed function dragDrop ( ev ) { ev. preventDefault () ; var data = ev. dataTransfer .getData ("text"); ev.target.appendChild ( document.getElementById (data )); } 18CSC311J WEB DESIGN AND DEVELOPMENT

Drag and Drop Example <!DOCTYPE HTML> <html> <head> <style> #div1 { width: 350px; height: 100px; padding: 10px; border: 1px solid # aaaaaa ; } </style> <body> <p>Drag the image into the rectangle:</p> <div id="div1" ondrop ="drop(event)" ondragover =" allowDrop (event)"></div> < br > < img id="drag1" src ="dragdrop.jpg" draggable ="true" ondragstart ="drag(event)" width ="350" height="100"> </body> </html> <script> function allowDrop ( ev ) { ev.preventDefault (); } function drag( ev ) { ev.dataTransfer.setData ("text", ev.target.id); } function drop( ev ) { ev.preventDefault (); var data = ev.dataTransfer.getData ("text"); ev.target.appendChild ( document.getElementById (data )); } </ script> </ head> 18CSC311J WEB DESIGN AND DEVELOPMENT

Audio < audio controls > < source src ="horse.ogg" type ="audio/ ogg "> < source src ="horse.mp3" type =" audio/mpeg "> Your browser does not support the audio element. </ audio > Controls - adds audio controls, like play, pause, and volume <source> - allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the < audio > element 18CSC311J WEB DESIGN AND DEVELOPMENT

Video controls < video width ="320" height ="240" controls > < source src ="movie.mp4" type ="video/mp4"> < source src ="movie.ogg" type ="video/ ogg "> </ video > controls - adds video controls, like play, pause, and volume If height and width are not set, the page might flicker while the video loads < source> - allows you to specify alternative video files which the browser may choose from The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element 18CSC311J WEB DESIGN AND DEVELOPMENT

Introduction about CSS - CSS Types

CSS3 - Introduction CSS stands for C ascading S tyle S heets CSS is a standard style sheet language used for describing the presentation of the web pages . CSS was designed to enable the separation of presentation and content CSS3 is the latest version of the CSS specification 18CSC311J WEB DESIGN AND DEVELOPMENT

CSS Syntax CSS rules have two main parts, a selector and one or more declarations : Selectors are used to declare which of the markup elements a style applies to The declarations that appear in the block that follows the selector may be applied to all elements of a specific type, or only those elements that match a certain attribute Each declaration consists of a property and a value 18CSC311J WEB DESIGN AND DEVELOPMENT

Example /* This is a CSS comment */ h1 { color : blue; text-align : center ; } 18CSC311J WEB DESIGN AND DEVELOPMENT

Uses of CSS To apply same style rules on multiple elements. To control the presentation of multiple pages of a website with a single style sheet To present the same page differently on different devices To style dynamic states of elements such as hover, focus, etc. that isn't possible otherwise. To change the position of an element on a web page without changing the markup . To alter the display of existing HTML elements. To transform elements like scale, rotate, skew, etc. in 2D or 3D space. To create animations and transitions effects without using any JavaScript. To create print friendly version of your web pages. 18CSC311J WEB DESIGN AND DEVELOPMENT

Advantages of Using CSS CSS Save Lots of Time Easy Maintenance Pages Load Faster Superior Styles to HTML Multiple Device Compatibility 18CSC311J WEB DESIGN AND DEVELOPMENT

Including CSS in HTML Documents or CSS Types You can include CSS in an HTML document in three ways : Inline styles — Using the style attribute in the HTML start tag. Embedded styles — Using the <style> element in the head section of a document. External style sheets — Using the <link> element, pointing to an external CSS file. 18CSC311J WEB DESIGN AND DEVELOPMENT

Inline Styles Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag . It can be attached to an element using the style attribute The style attribute includes a series of CSS property and value pairs. Each " property: value " pair is separated by a semicolon (;) Example: < h1 style =" color:red ; font-size:30px;">This is a heading</ h1 > < p style =" color:green ; font-size:22px;">This is a paragraph.</ p > 18CSC311J WEB DESIGN AND DEVELOPMENT

Embedded (or) Internal Style Sheets Embedded or internal style sheets only affect the document they are embedded in . Embedded style sheets are defined in the <head> section of an HTML document using the <style> element You can define any number of <style> elements in a HTML document but they must appear between the <head> and </head> tags 18CSC311J WEB DESIGN AND DEVELOPMENT

Embedded Style Sheets <!DOCTYPE html> < html> <head> < title>Embedded Style Sheet</ title> <style> body { background- color : YellowGreen ; } p { color : # fff ; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p> </body> </html > 18CSC311J WEB DESIGN AND DEVELOPMENT

External Style Sheets An external style sheet is ideal when the style is applied to many pages of the website . An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file 18CSC311J WEB DESIGN AND DEVELOPMENT

External Style Sheets style1.css body { background : lightyellow ; font : 18px Arial, sans-serif; } h1 { color : orange; } extcss.html <!DOCTYPE html> < html> <head> <title>My HTML Document</title> <link rel =" stylesheet " href ="style1.css "> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p> </body> </html> 18CSC311J WEB DESIGN AND DEVELOPMENT

Importing External Style Sheets The @import rule is another way of loading an external style sheet The @import statement instructs the browser to load an external style sheet and use its styles . You can use it in two ways : 1. Within header < style> @import url (" css /style.css"); p { color : blue; font-size: 16px; } </style> 2. within another style sheet @ import url (" css /layout.css"); @import url (" css /color.css"); body { color : blue; font-size: 14px; } 18CSC311J WEB DESIGN AND DEVELOPMENT

CSS Text Properties Property Description Values color Sets the color of text Red,blue direction Specifies the text direction/writing direction rtl , ltr letter-spacing Increases or decreases the space between characters in a text 3px,5px line-height Sets the line height 10px text-align Specifies the horizontal alignment of text left,right,center,jusify text-decoration Specifies the decoration added to text none, underline, overline , line-through text-indent Specifies the indentation of the first line in a text-block 50px text-shadow Specifies the shadow effect added to text 2px 2px red text-transform Controls the capitalization of text uppercase, lowercase, capitalize text-overflow Specifies how overflowed content that is not displayed should be signaled to the user clip, ellipsis vertical-align Sets the vertical alignment of an element Baseline, text-top, text- bottom,sub,super white-space Specifies how white-space inside an element is handled word-spacing Increases or decreases the space between words in a text 18CSC311J WEB DESIGN AND DEVELOPMENT

CSS Units Unit Description cm centimeters mm millimeters in inches (1in = 96px = 2.54cm) px * pixels (1px = 1/96th of 1in) pt points (1pt = 1/72 of 1in) pc picas (1pc = 12 pt ) em Relative to the font-size of the element (2em means 2 times the size of the current font) * Pixels ( px ) are relative to the viewing device 18CSC311J WEB DESIGN AND DEVELOPMENT

CSS Selectors Selectors are one of the most important aspects of CSS as they are used to select elements on a web page so that they can be styled. You can define selectors in various ways . Element Type Selector Id Selectors Class Selectors Descendant Selectors Grouping Selectors 18CSC311J WEB DESIGN AND DEVELOPMENT

Element Type Selector - Id Selectors - Class Selectors <!DOCTYPE html> <html lang ="en"> <head> <meta charset ="utf-8"> <title>Example of CSS selector</title> <style> h1 { color : Yellow; } p { color : green; } #error { color : #ff0000; } .blue { color : #0000ff; } </style> </head> <body> <h1>This is heading</h1> <p>This is a paragraph.</p> <p id=“error">This is a id selector</p> <p class="blue">This is a class selector</p> </body> </html> 18CSC311J WEB DESIGN AND DEVELOPMENT

Descendant Selectors and Grouping Selector <!DOCTYPE html> < html> < head> < meta charset="utf-8"> <title>Descendant Selectors</title> < style> h1 em { color : green ; } ul.menu { padding : 0; list-style : none; } ul.menu li{ display : inline; } ul.menu li a { margin : 10px; text-decoration : none; } </style> </head > <body> < h1>This is a < em >heading </ em ></h1> < ul class="menu"> < li><a href ="#">Home</a></li> < li><a href ="#">About</a></li> < li><a href ="#">Services</a></li> < li><a href ="#">Contact</a></li> </ ul > </body> </html> 18CSC311J WEB DESIGN AND DEVELOPMENT

Rule cascading The cascading rules define which elements take precedence over others . Sort by Importance Sort by weight Sort by Specificity Sort by Order 18CSC311J WEB DESIGN AND DEVELOPMENT

Rules of Cascading Sort by Importance an ID will win out over a class a class will win out over a tag Sort by weight Author: Style Sheet - Inline within the body of the web page Author: Style Sheet - Embedded in the head of the web page Author: Style Sheet – Linked User: Style Sheet Default : Browser 18CSC311J WEB DESIGN AND DEVELOPMENT

Rules of Cascading Sort by Specificity #content p em { color : # foo;} # content p{ color : # f00;} # content{ color : # 333;} Sort by Order If two rules have the same properties, specificy and values the one that appears later in the css will be the one that the browser uses 18CSC311J WEB DESIGN AND DEVELOPMENT

Inheritance S ome CSS properties by default inherit values set on the current element's parent element For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them. 18CSC311J WEB DESIGN AND DEVELOPMENT

Inheritance Example <!DOCTYPE html> <html> <head> <style> body { color: blue; font-family: Arial; } h1 { color: Yellow; } p { text- align:justify ; font-size:20px; } b { color:red ; } </style> </head> <body> <h1>Inheritance Example</h1> <p>Some CSS properties by default <b>inherit</b> values set on the current element's parent element. For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them. </p> </body> </html> 18CSC311J WEB DESIGN AND DEVELOPMENT

Text - Transformations 2D Transformation 3D Transformation 18CSC311J WEB DESIGN AND DEVELOPMENT

CSS3 2D Transforms 2D Transforms give us the ability to perform basic manipulations on elements in space A transformation modify an element by its shape, size and position. It transforms the elements along the X-axis and Y-axis. There are several types of transformation which are listed below: translate (), translateX (), traslateY () rotate() scale (), scaleX (), scaleY () skew(), skewX (), skewY () matrix () 18CSC311J WEB DESIGN AND DEVELOPMENT

CSS3 2D Transforms translate(), translateX (), traslateY () moves an element from its current position rotate() rotates an element clockwise or counter-clockwise according to a given degree scale(), scaleX (), scaleY () increases or decreases the size of an element skew(), skewX (), skewY () skews an element along the X and Y-axis by the given angles matrix() combines all the 2D transform methods into one 18CSC311J WEB DESIGN AND DEVELOPMENT

2D Transform Methods Function Description translate(tx,ty) Moves the element by the given amount along the X and Y-axis. translateX ( tx ) Moves the the element by the given amount along the X-axis. translateY(ty) Moves the the element by the given amount along the Y-axis. rotate(a) Rotates the element by the specified angle around the origin of the element, as defined by the transform-origin property. scale(sx,sy) Scale the width and height of the element up or down by the given amount. The function scale(1,1) has no effect. scaleX(sx) Scale the width of the element up or down by the given amount. scaleY(sy) Scale the height of the element up or down by the given amount. skew(ax,ay) Skews the element by the given angle along the X and Y-axis. skewX(ax) Skews the element by the given angle along the X-axis. skewY(ay) Skews the element by the given angle along the Y-axis. matrix(n,n,n,n,n,n) Specifies a 2D transformation in the form of a transformation matrix comprised of the six values. 18CSC311J WEB DESIGN AND DEVELOPMENT

2D Transforms Example <html> < head> < style> div { width: 300px; height: 100px; background- color : pink; border: 1px solid black; } div#myDiv { transform : rotate(20deg); } </ style> </ head> < body> <div> 2d Transforms Example </div> <div id = " myDiv "> 2d Transforms Example </div> </ body> </html> OUTPUT: 18CSC311J WEB DESIGN AND DEVELOPMENT

3D Transform Functions Function Description translate3d( tx,ty,tz ) Moves the element by the given amount along the X, Y & Z-axis. translateX(tx) Moves the element by the given amount along the X-axis. translateY(ty) Moves the element by the given amount along the Y-axis. translateZ(tz) Moves the element by the given amount along the Z-axis. rotate3d( x,y,z , a) Rotates the element in 3D space by the angle specified in the last parameter, around the [x,y,z] direction vector. rotateX(a) Rotates the element by the given angle around the X-axis. rotateY(a) Rotates the element by the given angle around the Y-axis. rotateZ(a) Rotates the element by the given angle around the Z-axis. scale3d( sx,sy,sz ) Scales the element by the given amount along the X, Y and Z-axis. The function scale3d(1,1,1) has no effect. scaleX(sx) Scales the element along the X-axis. scaleY(sy) Scales the element along the Y-axis. scaleZ(sz) Scales the element along the Z-axis. matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) Specifies a 3D transformation in the form of a 4×4 transformation matrix of 16 values. perspective(length) Defines a perspective view for a 3D transformed element. In general, as the value of this function increases, the element will appear further away from the viewer. 18CSC311J WEB DESIGN AND DEVELOPMENT

Text Transitions Property Description transition A shorthand property for setting all the four individual transition properties in a single declaration. transition-delay Specifies when the transition will start. transition-duration Specifies the number of seconds or milliseconds a transition animation should take to complete. transition-property Specifies the names of the CSS properties to which a transition effect should be applied. transition-timing-function Specifies how the intermediate values of the CSS properties being affected by a transition will be calculated. 18CSC311J WEB DESIGN AND DEVELOPMENT

CSS3 Animation An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. 18CSC311J WEB DESIGN AND DEVELOPMENT

CSS3 Animation @ keyframe animation-name When you specify CSS styles inside the @ keyframes rule, the animation will gradually change from the current style to the new style at certain times. animation-name Defines the name of the animation specified in the @ keyframe animation-duration defines how long time an animation should take to complete If the animation-duration property is not specified, no animation will occur, because the default value is 0s 18CSC311J WEB DESIGN AND DEVELOPMENT

CSS3 Animation Example <!DOCTYPE html> <html> <head> <title>Animation Example</title> <style> h1,h2 { text-align:center ; } @ keyframes example { from {font-size: 20px;} to {font-size:40px;} } h1 { animation-name:example ; animation-duration: 4s; } </style> </head> <body> < h1>KRT Institute of Science and Technology</ h1> < h2>Chennai</ h2> < hr > </body> </html> 18CSC311J WEB DESIGN AND DEVELOPMENT

CSS3 Animation Properties Property Description animation A shorthand property for setting all the animation properties in single declaration. animation-name Specifies the name of @keyframes defined animations that should be applied to the selected element. animation-duration Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation. animation-timing-function Specifies how the animation will progress over the duration of each cycle i.e. the easing functions. animation-delay Specifies when the animation will start. animation-iteration-count Specifies the number of times an animation cycle should be played before stopping. animation-direction Specifies whether or not the animation should play in reverse on alternate cycles. animation-fill-mode Specifies how a CSS animation should apply styles to its target before and after it is executing. animation-play-state Specifies whether the animation is running or paused. @ keyframes Specifies the values for the animating properties at various points during the animation. 18CSC311J WEB DESIGN AND DEVELOPMENT

<!DOCTYPE html> <html> <head> <style> div { width: 200px; height: 100px; background-color: red; color: yellow; position: relative; animation-name: example; animation-duration: 4s; animation-delay: 2s; } @ keyframes example { 0% {background- color:red ; left:0px; top:0px;} 25% {background- color:yellow ; left:200px; top:0px;} 50% {background- color:blue ; left:200px; top:200px;} 75% {background- color:green ; left:0px; top:200px;} 100% {background- color:red ; left:0px; top:0px;} } </style> </head> <body> <h1>Animation Example</h1> <div>Welcome to CSS Animation</div> </body> </html> 18CSC311J WEB DESIGN AND DEVELOPMENT

Introduction to Javascript

90 Introduction to JavaScript JavaScript is an interpreted programming or script language Invented in 1995 at Netscape Corporation JavaScript programs are run by an interpreter built into the user's web browser (not on the server) Client side scripting

What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A JavaScript consists of lines of executable computer code A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language Everyone can use JavaScript without purchasing a license

What can a JavaScript Do? JavaScript gives HTML designers a programming tool JavaScript can put dynamic text into an HTML page JavaScript can react to event JavaScript can read and write HTML elements JavaScript can be used to validate data JavaScript can be used to detect the visitor's browser JavaScript can be used to create cookies

93 Java vs. JavaScript Requires the JDK to create the applet Requires a Java virtual machine to run the applet Applet files are distinct from the XHTML code Source code is hidden from the user Programs must be saved as separate files and compiled before they can be run Programs run on the server side Requires a text editor Required a browser that can interpret JavaScript code JavaScript can be placed within HTML and XHTML Source code is made accessible to the user Programs cannot write content to the hard disk Programs run on the client side

Event-driven programming 94 split breaks apart a string into an array using a delimiter can also be used with regular expressions (seen later) join merges an array into a single string, placing a delimiter between them

Event-driven Programming 95 JavaScript programs wait for user actions called events and respond to them E vent-driven P rogramming : writing programs driven by user events

96 Javascript Syntax To embed a client-side script in a Web page, use the element: <script> script commands and comments </script> To access an external script, use: <script src =“ url ” > script commands and comments </script>

Javascript Syntax <script> statement-1; statement-2; …. statement-n; </script>

Where to Put the JavaScript <head> section Save file with extension .html <body> section Save file with extension .html External scripts Save file with extension . js

JavaScript in the <head> section <html> <head> <title>Java Script Example</title> <script> alert("Hello World!"); </script > </head> <body> </body> </html>

Scripts in the < body > section <html> <head> <title>Java Script Example</title> </head> <body> <script> alert("Hello World1"); </script > </body> </html>

Using External JavaScript <html> < head> < script s rc=“ extfile .js "> </script> </ head> < body> </ body> </html > extfile.js alert("Hello"); alert (“Welcome to Javascript ”); alert (“Have a nice day!”);

102 Comments The syntax for a single-line comment is: // comment text The syntax of a multi-line comment is: /* comment text covering several lines */

103 Writing Output to a Web Page JavaScript displays data in the following ways: document.write () or document.writeln () window.alert () or alert() innerHTML

104 Types of Variables JavaScript supports Four different types of variables: Numeric variables can be a number 13, 22.5, or -3.14159 String variables is any group of characters “Hello” or “Happy Holidays!” Boolean variables are variables that accept one of two values true or false null variables is a variable that has no value at all

105 Declaring a Variable Declare a variable using the var keyword or by assigning the variable a value Any of the following commands is a legitimate way of creating a variable named “Month”: var Month; var Month = “December”; Month = “December”; var age=20;

Javascript Functions Syntax function name() { statement ; statement ; ... statement ; } Example <script> function MyFunction () { alert("Hello!"); alert("How are you?"); } </script>

Javascript DOM Model

JavaScript DOM Model What is DOM? The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated . With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content 108

109 Nodes Organise the Page <html> <head> <title>My page</title> </head> <body> < p>This text is on my page</p> </body> </html>

110 What is a Node? Element Node – contains an HTML tag Text Node – contains text Text Nodes are contained in Element Nodes

111 Adding Some Text to a Page There are five steps: Create a new Element Create new Text Append the new Text to the new Element Find an existing Element Append the new Element to the existing Element

112 1. Create New Element Node Create a new <p> tag (element) so that we can attach some text to it Put the new object into a variable var newNode ; newNode = document.createElement (“p ”);

113 2. Create a Text Node Create a text node Put the new text node into a variable var newText ; newText = document.createTextNode (“Some text”);

114 3. Attach the New Text Node to the New Element To put the text into the page, we have to attach the text node to the new HTML element : newNode.appendChild ( newText );

115 4.Find an Existing Element The new element with our text node attached to it is still floating around in a Javascript world. Assign this existing element to a variable var docElement ; docElement = document.getElementById (“ thisLocation ”);

116 5. Append the New Element to the Existing Element To insert our text into the page, we now have to append the new element to the existing element docElement.appendChild ( newNode );

117 Putting the 5 Steps Together <html> < head> < script> var myText ; myText = "This is new text to be added to the page dynamically."; function addText (location) { var newNode ; var newText ; var docElement ; newNode = document.createElement ("p"); newText = document.createTextNode ( myText ); newNode.appendChild ( newText ); docElement = document.getElementById (location); docElement.appendChild ( newNode ); } </script> </head> <body> <p > < a href ="#" onclick =" addText (' thisLocation ');" >Click to add new text to the page</a></p> <p id=" thisLocation ">New text will appear below here</p> <p>Some further text in the page</p> </body > </html>

118 Remove a Node To remove a node, we use the element method removeChild ( name of node to be removed ) For example: function remText (location) { var docElement ; docElement = document.getElementById (location); docElement.removeChild ( docElement.lastChild ); }

Control Structure

Objects and built-in objects

Javascript Built-in objects

122 Date Object There are two ways to create a date object Method-1 var -name = new Date (“month day, year, hours:minutes:seconds ”) ; Method-2 var -name = new Date (year, month, day, hours, minutes, seconds); var -name is the name of the variable that contains the date information month , day , year , hours , minutes , and seconds indicate the date and time Example: var Today=new Date(“October 15, 2006”); var Today=new Date(2006, 9 , 15);

Date Object and Methods Date object can be used to access the date and time, and to perform "date arithmetic" To get and set current Date and Time today = new Date (); new Year = new Date(2002,0,1); Methods of Date object Date() - Returns today's date and time getDate () - Returns the day of the month for the specified date getDay () - Returns the day of the week for the specified date getFullYear () - Returns the year of the specified date getHours () - Returns the hour in the specified date according to local time. getMilliseconds () - Returns the milliseconds in the specified date according to local time. 123

<!DOCTYPE html> <html> <head> <title>Date Object Example</title> </head> <body> <pre> <script> d=new Date(); document.writeln (d); document.writeln (" getDate () return:"+ d.getDate ()); document.writeln (" getDay () returns:"+ d.getDay ()); document.writeln (" getFullYear () returns:"+ d.getFullYear ()); document.writeln (" getHours () returns:"+ d.getHours ()); document.writeln (" getMinutes () returns:"+ d.getMinutes ()); document.writeln (" getSeconds () returns:"+ d.getSeconds ()); document.writeln (" getMilliseconds () returns:"+ d.getMilliseconds ()); </script> </pre> </body> </html>

Array Object Multiple values are stored in a single variable using the Array object. In JavaScript, an array can hold different types of data types in a single slot, which implies that an array can have a string, a number or an object in a single slot. An Array object can be created by using following ways: Using the Array Constructor Using the Array Literal Notation

Array Object Using the Array Constructor: To create empty array when don’t know the exact number of elements to be inserted in an array var arrayname = new Array(); To create an array of given size var arrayname = new Array(size); To create an array with given elements var arrayname = new Array(“element 1”,”element 2”,……..,”element n”);

Array Object Using the Array Literal Notation: To create empty array var arrayname =[ ]; To create an array when elements are given var arrayname =[“element 1”,”element 2”,……..,”element n”];

Array Object Properties of the Array object length - Returns the number of elements in the array Constructor - Returns the function that created the Array object Prototype - Add properties and methods to an object Methods of the Array object reverse() - Reverses the array elements concat () - Joins two or more arrays sort() - Sort the elements of an array push() - Appends one or more elements at the end of an array pop() - Removes and returns the last element shift() - Removes and returns the first element

Array Object Example-1 <!DOCTYPE html> <html> <head> <title>Array Object Example</title> </head> <body> <pre> <script> a=new Array(3); a.push (10); a.push (20); a.push (30); document.writeln (a.pop()); document.writeln (a.pop()); document.writeln (a.pop()); </script> </pre> </body> </html>

Array Object Example-2 <!DOCTYPE html> <html> <head> <title>Array Object Example</title> </head> <body> <pre> <script> a=new Array(3); b=[' aaa','bbb','ccc '] a[0]=10; a[1]=20; a[2]=30; document.writeln (a[0]); document.writeln (a[1]); document.writeln (a[2]); document.writeln (b[2]); </script> </pre> </body> </html>

Array Object Example-3 <!DOCTYPE html> <html> <head> <title>Array Example-2</title> <script> function book(title, author) { this.title = title; this.author = author; } </script> </head> <body> <script> var myBook = new book("Perl", “ Ramesh "); book.prototype.price = null; myBook.price = 100; document.write ("Book title is : " + myBook.title + "< br >"); document.write ("Book author is : " + myBook.author + "< br >"); document.write ("Book price is : " + myBook.price + "< br >"); </script> </body> </html>

Math Object The JavaScript Math object is used to perform mathematical tasks. The Math object is a static built-in object, so no need to instantiate it, all its properties and methods can be accessed directly.

Math Object Example <!DOCTYPE html> <html> <head> <title>Math Object Example</title> </head> <body> <pre> <script> document.writeln ("PI="+ Math.PI ); document.writeln ("3 to the Power of 2="+Math.pow(3,2)); </script> </pre> </body> </html>

Math Properties Property Description E Returns Euler's number, the base of natural logarithms, e, approximately 2.718 LN2 Returns the natural logarithm of 2, approximately 0.693 LN10 Returns the natural logarithm of 10, approximately 2.302 LOG2E Returns the base 2 logarithm of e, approximately 1.442 LOG10E Returns the base 10 logarithm of e, approximately 0.434 PI Returns the ratio of the circumference of a circle to its diameter (i.e. π). The approximate value of PI is 3.14159 SQRT1_2 Returns the square root of 1/2, approximately 0.707 SQRT2 Returns the square root of 2, approximately 1.414

Math Methods Method Description abs() Returns the absolute value of a number. acos() Returns the arccosine of a number, in radians. acosh() Returns the hyperbolic arccosine of a number. asin() Returns the arcsine of a number, in radians asinh() Returns the hyperbolic arcsine of a number. atan() Returns the arctangent of a number, in radians. atan2(y, x) Returns the arctangent of the quotient of its arguments. atanh() Returns the hyperbolic arctangent of a number. cbrt() Returns the cube root of a number. ceil() Returns the next integer greater than or equal to a given number (rounding up).

Math Methods(cont..) Method Description cos () Returns the cosine of the specified angle. The angle must be specified in radians. cosh() Returns the hyperbolic cosine of a number. exp(x) Returns e x , where x is the argument, and e is Euler's number (also known as Napier's constant), the base of the natural logarithms. floor() Returns the next integer less than or equal to a given number (rounding down). log() Returns the natural logarithm (base e) of a number. max(x, y, ...) Returns the highest-valued number in a list of numbers. min(x, y, ...) Returns the lowest-valued number in a list of numbers. pow(x, y) Returns the base to the exponent power, that is, x y .

Math Methods(cont..) Method Description random() Returns a random number between 0 and 1 (including 0, but not 1). round() Returns the value of a number rounded to the nearest integer. sin() Returns the sign of a number (given in radians). sinh() Returns the hyperbolic sine of a number. sqrt() Returns the square root of a number. tan() Returns the tangent of a number. tanh() Returns the hyperbolic tangent of a number. trunc(x) Returns the integer part of a number by removing any fractional digits.

JS String Object String Properties Property Description constructor Returns the string's constructor function length Returns the length of a string prototype Allows you to add properties and methods to an object

JS String Object String Methods Method Description charAt () Returns the character at the specified index (position) charCodeAt () Returns the Unicode of the character at the specified index concat () Joins two or more strings, and returns a new joined strings endsWith () Checks whether a string ends with specified string/characters fromCharCode () Converts Unicode values to characters includes() Checks whether a string contains the specified string/characters indexOf () Returns the position of the first found occurrence of a specified value in a string lastIndexOf () Returns the position of the last found occurrence of a specified value in a string localeCompare () Compares two strings in the current locale match() Searches a string for a match against a regular expression, and returns the matches repeat() Returns a new string with a specified number of copies of an existing string replace() Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced

JS String Object String Methods Method Description search() Searches a string for a specified value, or regular expression, and returns the position of the match slice() Extracts a part of a string and returns a new string split() Splits a string into an array of substrings startsWith () Checks whether a string begins with specified characters substr () Extracts the characters from a string, beginning at a specified start position, and through the specified number of character substring() Extracts the characters from a string, between two specified indices toLocaleLowerCase () Converts a string to lowercase letters, according to the host's locale toLocaleUpperCase () Converts a string to uppercase letters, according to the host's locale toLowerCase () Converts a string to lowercase letters toUpperCase () Converts a string to uppercase letters trim() Removes whitespace from both ends of a string valueOf () Returns the primitive value of a String object

JS String Object <!DOCTYPE html> <html> <head> <title>String Object Example</title> </head> <body> <script> msg ="Welcome to Javascript "; document.writeln ("String Length:"+ msg.length ); document.writeln ("< br >Position of script:"+ msg.search ("script")); document.writeln ("< br >String Before Replace:"+ msg ); document.writeln ("< br >String After Replace:"+ msg.replace (" Java","Perl ")); </script> </body> </html>

JS Objects JavaScript objects are containers for named values called properties or methods Objects are variables too But objects can contain many values

JS Objects Creating Object var person = { firstName :"John", lastName :"Doe", age:50 , eyeColor :" blue“, fullName:function () { return this.firstName + “ “ + this.lastName ;} }; Accessing Object Methods and Properties var name= person.fullName (); var myAge = person.age ;

JS Object Example

Event Handling, form validation

Event Handling Events are actions or occurrences that happen in the system, which the system tells you about so you can respond to them in some way if desired Javascript has events to provide a dynamic interface to a webpage These events are hooked to elements in the Document Object Model(DOM ) For example, if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box

Event Handling Example Events: The user clicking the mouse over a certain element or hovering the cursor over a certain element The user pressing a key on the keyboard The user resizing or closing the browser window A web page finishing loading A form being submitted A video being played , or paused, or finishing play An error occurring

HTML Events Event When it occurs onsubmit It is triggered when the user clicks a button after the submission of a form. onclick It occurs or triggers when any user clicks on an HTML element. onmouseover It occurs when a user moves the cursor over an HTML object. onmouseout It occurs or triggers when the mouse pointer is moved out of an HTML element. onmousedown It occurs when a user presses the button of a mouse over an HTML element. onmousemove It occurs when a user moves the cursor on an HTML object. onmouseup It occurs or triggers when the mouse button is released over an HTML element. onload It occurs when an object is completely loaded. onblur It occurs when the user leaves an HTML object. onfocus It occurs when the user focuses on an HTML element. This event handler works opposite to onblur .

HTML Events Event When it occurs ondblclick It occurs when the user clicks on an HTML element two times together. onchange It occurs when the user changes or updates the value of an object. onkeydown It triggers when a user is pressing a key on a keyboard device. This event handler works for all the keys. onkeypress It triggers when the users press a key on a keyboard. This event handler is not triggered for all the keys. onkeyup It occurs when a user released a key from a keyboard after pressing on an object or element. onload It occurs when an object is completely loaded. onreset It is used by the user to reset the form. onselect It occurs after selecting the content or text on a web page. onunload It is triggered when the user closes a web page. onabort It occurs when the user aborts the page or media file loading.

Event Handling Event Handler It is a function that’s called when an event occurs to respond to any event multiple handlers for the same event can be registered, and they will all be called when that event happens . JavaScript offer three ways to register an event handler : Inline event handlers DOM on-event handlers Using addEventListener ()

JS Events Event Description onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key onload The browser has finished loading the page

Inline Event Handler <!DOCTYPE html> <html> <head> <title>JS Inline Event Example</title> </head> <body> <button onclick ="alert('Hello, this is inline event handler!');"> Press me </button> </body> </html>

DOM on-event handlers <!DOCTYPE html> <html> <head> <title>JS DOM on-event Example</title> </head> <body> <button onclick =" sayHello ();"> Press me </button> <p id="event"></p> <script> function sayHello () { document.getElementById ("event"). innerHTML ="Hello"; } </script> </body> </html>

Using addEventListener () <!DOCTYPE html> <html> <head> <title>JS DOM-online Event Example</title> </head> <body> < button>Press me</ button> <p id="event"></p> <script> const btn = document.querySelector ('button'); function sayHello () { document.getElementById ("event"). innerHTML ="Hello"; } btn.addEventListener ('click', sayHello ); </script> </body> </html>

Form Validation <!DOCTYPE html> <html> <head> <title>Form Validation</title> <script> function myFunction () { x = document.getElementById ("age").value; if ( isNaN (x) || x < 1 || x > 120) { text = "Invalid Age"; } else { text = "Input OK"; } document.getElementById ("status"). innerHTML = text; } </script> </head> <body> <p>Please Enter Your Age: <input id="age"> <button type="button" onclick ="myFunction1()">Submit</button></p> <p id="status"></p> </body> </html>

Form Validation <!DOCTYPE html> <html> <head> <title>Form Validation</title> <script> function myFunction () { // var x, text; x = document.getElementById (" aadhar ").value; if ( isNaN (x) || x.length != 12) { text = "Invalid Number"; } else { text = "Input OK"; } document.getElementById ("status"). innerHTML = text; } </script> </head> <body> <p>Please Enter Your Aadhar Number: <input id=" aadhar "> <button type="button" onclick =" myFunction ()">Submit</button></p> <p id="status"></p> </body> </html>

Exception handling

Exception Handling Run time errors are exceptions and this exception is correct by the help of the try and catch method Syntax: < script> try { // Here the main Code run } catch ( exception e ) { // The code will run when there is an exception } </ script>

<!DOCTYPE html> <html> < head> < title>JS Exception Handling Example</title> </ head> < body> < p>Please input a number between 5 and 10:</p> < input id="demo" type="text"> < button type=" button”onclick =" myFunction ()"> Test Input</button> < p id="p01"></p> <script> function myFunction () { var message, x; message = document.getElementById ("p01"); message.innerHTML = ""; x = document.getElementById ("demo").value ; try { if(x == "") throw "empty"; if( isNaN (x )) throw "not a number"; x = Number(x); if(x < 5) throw "too low"; if(x > 10) throw "too high"; } catch(err) { message.innerHTML = "Input is " + err; } } </script> </ body> </html > Exception Handling Example

18CSC311J WEB DESIGN AND DEVELPMENT UNIT-1

About This Presentation

Slide Content

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

18CSC311J WEB DESIGN AND DEVELPMENT UNIT-1

About This Presentation

Slide Content

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75

Slide 76

Slide 77