document object model in web technologies notes for engineering.pptx
manju451965
11 views
24 slides
Sep 20, 2024
Slide 1 of 24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
About This Presentation
DOM
Slide Content
MCA-202 (Web Technologies) Document Object Model(DOM) By Er. Manju Bagga Assistant Professor, MMICT&BM Maharishi Markandeshwar (Deemed to be University) Programme: MCA Course: Web Technologies
Contents HTML DOM (Document Object Model) Control Structure Form Processing Programme: MCA Course: Web Technologies
HTML DOM (Document Object Model) When a web page is loaded, the browser creates D ocument O bject M odel of the page. The HTML DOM model is constructed as a tree of Objects : The HTML DOM Tree of Objects Programme: MCA Course: Web Technologies
DOM Conti… Programme: MCA Course: Web Technologies
DOM Conti… With the object model, JavaScript gets all the power it needs to create dynamic HTML: JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page JavaScript can create new HTML events in the page Programme: MCA Course: Web Technologies
DOM Conti… Programme: MCA Course: Web Technologies What is the DOM? The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The W3C DOM standard is separated into 3 different parts: Core DOM - standard model for all document types XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents
DOM Conti… Programme: MCA Course: Web Technologies What is the HTML DOM? The HTML DOM is a standard object model and programming interface for HTML. It defines: The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements JavaScript - HTML DOM Methods HTML DOM methods are actions you can perform (on HTML Elements). HTML DOM properties are values (of HTML Elements) that you can set or change.
DOM Conti… The DOM Programming Interface The HTML DOM can be accessed with JavaScript (and with other programming languages). In the DOM, all HTML elements are defined as objects . The programming interface is the properties and methods of each object. A property is a value that you can get or set (like changing the content of an HTML element). A method is an action you can do (like add or deleting an HTML element). Programme: MCA Course: Web Technologies
Example <html> <body> <p id="demo"></p> <script> document.getElementById ("demo"). innerHTML = "Hello World!"; </script> </body> </html> DOM Conti… Programme: MCA Course: Web Technologies
The getElementById Method The most common way to access an HTML element is to use the id of the element. In the example above the getElementById method used id="demo" to find the element. The innerHTML Property The easiest way to get the content of an element is by using the innerHTML property. The innerHTML property is useful for getting or replacing the content of HTML elements. The innerHTML property can be used to get or change any HTML element, including <html> and <body>. DOM Conti… Programme: MCA Course: Web Technologies
Control structure actually controls the flow of execution of a program. Following are the several control structure supported by javascript . if … else switch case do while loop while loop for loop Control Structure Programme: MCA Course: Web Technologies
If … else The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally. Syntax if (expression){ Statement(s) to be executed if expression is true } Control Structure Conti… Programme: MCA Course: Web Technologies
Programme: MCA Course: Web Technologies Control Structure Conti… Example <script type="text/ javascript "> <!-- var age = 20; if( age > 18 ) { document.write ("<b>Qualifies for driving</b>"); } //--> </script>
Programme: MCA Course: Web Technologies Control Structure Conti… Switch case The basic syntax of the switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used. Syntax switch (expression) { case condition 1: statement(s) break; case condition 2: statement(s) break; ... case condition n: statement(s) break; default: statement(s)}
Programme: MCA Course: Web Technologies Control Structure Conti… Do while Loop The do...while loop is similar to the while loop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false. Syntax do{ Statement(s) to be executed; } while (expression);
Programme: MCA Course: Web Technologies Control Structure Conti… Example <script type="text/ javascript "> <!-- var count = 0; document.write ("Starting Loop" + "< br />"); do{ document.write ("Current Count : " + count + "< br />"); count++; }while (count < 0); document.write ("Loop stopped!"); //--></script>
Control Structure Conti… While Loop The purpose of a while loop is to execute a statement or code block repeatedly as long as expression is true. Once expression becomes false, the loop will be exited. Syntax while (expression){ Statement(s) to be executed if expression is true } Programme: MCA Course: Web Technologies
Control Structure Conti… Example <script type="text/ javascript "> <!-- var count = 0; document.write ("Starting Loop" + "< br />"); while (count < 10){ document.write ("Current Count : " + count + "< br />"); count++; } document.write ("Loop stopped!"); //--></script> Programme: MCA Course: Web Technologies
Control Structure Conti… For Loop The for loop is the most compact form of looping and includes the following three important parts − The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins. The test statement which will test if the given condition is true or not. If condition is true then code given inside the loop will be executed otherwise loop will come out. The iteration statement where you can increase or decrease your counter. Programme: MCA Course: Web Technologies
Control Structure Conti… Example <script type="text/ javascript "> <!-- var count; document.write ("Starting Loop" + "< br />"); for(count = 0; count < 10; count++){ document.write ("Current Count : " + count ); document.write ("< br />"); } document.write ("Loop stopped!"); //--> </script> Programme: MCA Course: Web Technologies
Form Processing HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application. Programme: MCA Course: Web Technologies
Form Processing Conti… There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. The HTML <form> tag is used to create an HTML form and it has following syntax − <form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc.</form> Programme: MCA Course: Web Technologies
Form Processing Conti… Programme: MCA Course: Web Technologies Sr.No Attribute & Description 1 action Backend script ready to process your passed data. 2 method Method to be used to upload data. The most frequently used are GET and POST methods. 3 target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc. 4 enctype You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are − application/x-www-form- urlencoded − This is the standard method most forms use in simple scenarios. mutlipart /form-data − This is used when you want to upload binary data in the form of files like image, word file etc.
Form Processing Conti… Programme: MCA Course: Web Technologies HTML Form Controls There are different types of form controls that you can use to collect data using HTML form − Text Input Controls Checkboxes Controls Radio Box Controls Select Box Controls File Select boxes Hidden Controls Clickable Buttons Submit and Reset Button
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 11
- Slides 24
- Age 439 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
35 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
32 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
28 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views