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
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
If you don't have knowledge of HTML, CSS & JavaScript than you may face some difficulties in validating a HTML form yet I will make the entire step very easy to understand by you.
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
If you don't have knowledge of HTML, CSS & JavaScript than you may face some difficulties in validating a HTML form yet I will make the entire step very easy to understand by you.
JavaScript Events:
HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.
What can JavaScript Do?
Event handlers can be used to handle, and verify, user input, user actions, and browser actions:
Things that should be done every time a page loads
Things that should be done when the page is closed
Action that should be performed when a user clicks a button
Content that should be verified when a user inputs data
If you are using jQuery, you need to understand the Document Object Model and how it accounts for all the elements inside any HTML document or Web page.
A JavaScript function is a block of code designed to perform a particular task.
Why Functions?
You can reuse code: Define the code once, and use it many times. You can use the same code many times with different arguments, to produce different results.
PHP stands for “PHP: Hypertext Preprocessor”. It is very good for creating dynamic content. PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
HTML5 is a language for structuring and presenting content for the World Wide Web. it is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and as of February 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). It improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors
In JavaScript, almost "everything" is an object.
-Booleans can be objects (if defined with the new keyword)
-Numbers can be objects (if defined with the new keyword)
-Strings can be objects (if defined with the new keyword)
-Dates are always objects
-Maths are always objects
-Regular expressions are always objects
-Arrays are always objects
-Functions are always objects
-Objects are always objects
JavaScript Events:
HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.
What can JavaScript Do?
Event handlers can be used to handle, and verify, user input, user actions, and browser actions:
Things that should be done every time a page loads
Things that should be done when the page is closed
Action that should be performed when a user clicks a button
Content that should be verified when a user inputs data
If you are using jQuery, you need to understand the Document Object Model and how it accounts for all the elements inside any HTML document or Web page.
A JavaScript function is a block of code designed to perform a particular task.
Why Functions?
You can reuse code: Define the code once, and use it many times. You can use the same code many times with different arguments, to produce different results.
PHP stands for “PHP: Hypertext Preprocessor”. It is very good for creating dynamic content. PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
HTML5 is a language for structuring and presenting content for the World Wide Web. it is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and as of February 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). It improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors
In JavaScript, almost "everything" is an object.
-Booleans can be objects (if defined with the new keyword)
-Numbers can be objects (if defined with the new keyword)
-Strings can be objects (if defined with the new keyword)
-Dates are always objects
-Maths are always objects
-Regular expressions are always objects
-Arrays are always objects
-Functions are always objects
-Objects are always objects
dotNet Miami - June 21, 2012: Richie Rump: Entity Framework: Code First and M...dotNet Miami
dotNet Miami - June 21, 2012: Presented by Richie Rump: Traditionally, Entity Framework has used a designer and XML files to define the conceptual and storage models. Now with Entity Framework Code First we can ditch the XML files and define the data model directly in code. This session will give an overview of all of the awesomeness that is Code First including Data Annotations, Fluent API, DbContext and the new Migrations feature. Be prepared for a fast moving and interactive session filled with great information on how to access your data.
My presentation at MWLUG 2015. I show how to build and connect a modern looking website, built with HTML, CSS, and Javascript/jQuery, to your existing IBM Domino backend data using Ajax and JSON and some simple Lotusscript code.
Webstack Academy - Course Demo Webinar and Placement JourneyWebStackAcademy
At WebStack Academy, we understand the importance of providing valuable insights to aspiring professionals like yourself. That's why we host monthly webinars tailored to address the needs of ambitious individuals. Led by our esteemed experts - Mr. Jayakumar (Director, WebStack Academy) and Mr. Mubeen (Technology Head, WebStack Academy), the presentation will offer a firsthand understanding of industry trends, career pathways, and how our Full Stack course can be the catalyst to realizing your career aspirations.
WSA: Scaling Web Service to Handle Millions of Requests per SecondWebStackAcademy
In this presentation of Venkata Ramana Gollamudi, Principal Architect at Flipkart, as our esteemed speaker. With his expertise and experience, he'll guide us through the intricate process of “Scaling web service to handle millions of requests per second”.
Key Takeaways:
Understanding the specific challenges of scaling for Indian users
Strategies to ensure service availability, reduce latency, and maintain reliability
Leveraging tools like ELBs, K8s, message queues, and NoSQL databases effectively
Don't miss this unparalleled opportunity to gain invaluable insights and elevate your expertise in scaling web services to new heights.
We eagerly await your participation in this transformative webinar. Let's embark on the journey to mastering scalability together!
WSA: Course Demo Webinar - Full Stack Developer CourseWebStackAcademy
At WebStack Academy, we understand the importance of providing valuable insights to aspiring professionals like yourself. We host monthly webinars tailored to address the needs of ambitious individuals. Led by our esteemed experts - Mr. Jayakumar (Director, WebStack Academy) and Mr. Mubeen (Technology Head, WebStack Academy), these webinars presentation deck offer a firsthand understanding of industry trends, career pathways, and how our Full Stack course can be the catalyst to realizing your career aspirations.
Career Building in AI - Technologies, Trends and OpportunitiesWebStackAcademy
We from WSA always believe in sharing the right information and enabling you to make decisions for your long term career.
In this regard, Masterclass Webinar on "Career Building in AI - Technologies, Trends and Opportunities” by Renganathan Sekar - Product Manager, Artificial Intelligence - Samsung Research Institute.
Key takeaways from this slide deck:
*Gain a comprehensive overview of AI and its wide range of applications.
*Explore real-world use cases that exemplify the incredible potential of AI.
*Delve into the core technologies driving AI innovation.
*Stay ahead of recent trends in AI, including the intriguing concept of Gen AI.
*Uncover a wealth of opportunities in the AI landscape.
*Learn effective strategies to up skill and advance your career in the AI industry.
WSA Free online Internship for Web Development is an Online real-time experience for Engineering students. It will take you through a journey of skill building and project building experience. You will understand the various product development phases and skills required to work on any Web Application product in Industry.
A guide designed to help you master the art of web development. The roadmap provides a comprehensive step-by-step guide to learn foundational web technologies like HTML, CSS, & JavaScript, advanced frameworks, and concepts required for modern web development. It aims to equip aspiring developers with the necessary resources and tools to excel in the ever-evolving world of web development. 💡
Angular - Chapter 9 - Authentication and AuthorizationWebStackAcademy
Authentication is the process of validating a user on the credentials (username and password)
and provide access to the web application(ex: Email)
Authorization helps you to control access rights by granting or denying specific permissions
to an authenticated user (Ex: User / Manager / Admin).
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
AngularFire is the officially supported AngularJS binding for Firebase. ... The focus of this library is to abstract much of the boilerplate involved in creating Angular bindings from Firebase to Angular, and to make it easy to create services that sync to your database.
A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.
ngif
ngFor
If you view the app.module.ts file, you will see the following code and the BrowserModule module defined. By defining this module, you will have access to the 2 directives.
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java. The popular JavaScript framework Angular 2.0 is written in TypeScript. Mastering TypeScript can help programmers to write object-oriented programs and have them compiled to JavaScript, both on server side and client side.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
JavaScript String:
The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.
As JavaScript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.
JavaScript Arrays:
The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.
Debugging in JavaScript
It is common to have errors while writing codes and the errors can be due to syntax or logical. These errors create a lot of ambiguity in the logic and understanding of both users and programmers. There can also be errors in the code which can remain invisible to the programmer’s eye and can create havoc. To identify these errors we need Debuggers that can go through the entire code or program, identify the errors and also fix them.
-Debugger
The debugger keyword is used in the code to force stop the execution of the code at a breaking point and calls the debugging function. The debugger function is executed if any debugging is needed at all else no action is performed.
Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.
JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions.
Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.
The Browser Object Model (BOM) in JavaScript includes the properties and methods for JavaScript to interact with the web browser.
BOM provides you with window object, for example, to show the width and height of the window. It also includes the window.screen object to show the width and height of the screen.
JavaScript - Chapter 9 - TypeConversion and Regular Expressions WebStackAcademy
Type Conversion:
JavaScript is loosely typed language and most of the time operators automatically convert a value to the right type but there are also cases when we need to explicitly do type conversions.
While JavaScript provides numerous ways to convert data from one type to another but there are two most common data conversions :
Converting Values to String
Converting Values to Numbers
Regular Expressions:
A regular expression is an object that describes a pattern of characters.
The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that use regular expressions to perform powerful pattern-matching and search-and-replace functions on text.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
3. What is DOM?
The Document Object Model (DOM) is a cross-platform and language-independent
application programming interface.
The DOM, is the API through which JavaScript interacts with content within a
website.
The DOM API is used to access, traverse and manipulate HTML and XML
documents.
The DOM is a W3C (World Wide Web Consortium) standard.
4. What is DOM Tree?
• The DOM treats an HTML, XHTML, or XML document as a tree
• structure
• Each node is an object representing a part of the document
• User case of HTML, XML and XHTML are different but DOM acts as a
common standard
6. Types of DOM nodes
Element nodes (HTML tag): Can have children / attributes.
Text nodes: Text nodes are contained within element nodes and
cannot have child elements. Text nodes means all the text within
nodes.
Attribute nodes (Attribute / Value pairs): Text / Attributes are
children of element node, they cannot further have children or
attributes
7. DOM standards
DOM level 0:
• Earliest implementation of DOM
• There existed no standard when its was implemented in some of the major browsers before 1998
DOM level 1
• It was recommended by W3C in 1998
• It will provide complete model for an entire HTML or XML document, to change any portion of the
document
DOM level 2
• It was published in 2000 by introducing additional features – getElementById, Event model,
XML namespace (Avoiding name conflicts), Stylesheet
8. DOM standards
DOM level 0:
• Earliest implementation of DOM
• There existed no standard when its was implemented in some of the major browsers before 1998
DOM level 1
• It was recommended by W3C in 1998
• It will provide complete model for an entire HTML or XML document, to change any portion of the
document
DOM level 2
• It was published in 2000 by introducing additional features – getElementById, Event model,
• XML namespace (Avoiding name conflicts), Stylesheet
9. DOM standards
DOM level 3
• It was published in 2004
• Added support for Xpath (Navigating between multiple nodes in XML)
• Keyboard event handling
DOM level 4
• It was published in 2015
• Latest version of DOM
11. DOM methods
• HTML DOM Methods are actions we can perform on HTML elements
• HTML DOM Properties are values that we can set or change
<script>
document.getElementById("ex").innerHTML = "Hello World!";
</script>
• getElementById -> Method
• innerHTML -> Property
12. DOM Methods
getElementById()
• Accesses any element on the page via its ID attribute
• A fundamental method within the DOM for accessing elements on the page
• This method will returns single element
innerHTML
• The innerHTML is used to get and replace the content of HTML elements.
13. DOM Element
getElementsByName(name)
Returns an list with the given name attribute
getElementsByTagName(name)
Returns a list of elements with the given tag name.
var allParagraphs = document.getElementsByTagName(“p”);
var allParagraphs = document.getElementsByName(“number”);
14. Element by class name
getElementsByClassName()
Returns a list of all elements with given class name
var elements = document.getElementsByClassName(“example”);
16. DOM Example
<body>
<form id="form1">
<div>
<input type="text" id="num" value="12345" />
<input type="text" name="number" value="num1" />
<input type="text" name="number" value="num2" />
<input type="text" name="number" value="num3" />
</div>
<br />
<div id="div1" style="border-style: solid; border-width: thick; border-color: blue;
width: 515px; height: 100px;">
Div Section
</div>
<br />
<input type="button" onclick="GetById();" value="Get Element By Id" />
<input type="button" onclick="GetByName();" value="Get Element By Name" />
</form>
</body>
17. Elements by CSS Selectors
querySelector()
Returns the first match of the passed selector string
firstMatchElement = document.querySelector(“.example”);
querySelectorAll()
Returns a NodeList of DOM elements that match the query
allMatchElements = document.querySelectorAll(“.example");
18. Exercise
• Write a JavaScript program to modify the text-align, font-size, font-family of
heading1 using getElementById
• Write a JavaScript program to change the background color of all the <div>
tag
• Write a JavaScript to add the text shadow in all paragraphs in the given
essay
Some useful tips:
• <element-name>.style.textShadow = “Apx Bpx” will set you the shadow
20. Documents
• Web browser window is represented by window object
• Every window has a document property that refers to document
objects
• The document objects represents the web page
• We can access and manipulate HTML using document objects
21. Changing HTML elements
Methods Description
EvalError Change the inner HTML of an HTML element
RangeError Change the attribute value of an HTML element
ReferenceError Changes the attribute value of an HTML element
SyntaxError
TypeError
22. Adding and Deleting Element
Methods Description
document.createElement() Create an HTML Element
document.removeChild() Remove an HTML Element
document.appendChild() Add an HTML Element
document.replaceChild() Replace an HTML Element
document.write() Write into the HTML output stream
document.insertBefore() Insert before an HTML element
24. HTML DOM – Handling images
<html>
<script>
function imgFunc()
{
document.getElementById(“myimage").src = “jobsold.jpg";
}
</script>
<body>
<img id=“myimage" src=“jobsyoung.jpg" width=500 height=200>
<button onclick="imgFunc()">Click Here to change image</button>
</body>
</html>
25. HTML DOM – Table manipulation
• The Table object of the DOM supports dynamically generate a table or certain rows/columns
• We can access a <table> element by using getElementbyId()
Method Description
createCaption() Creates an empty <caption> elements and adds it to the table
deleteCaption() Removes the first caption element from the table
insertRow() Inserts new row in the specific index
deleteRow() Removes a row from the table
insertCell() Inserts new column in the specific row
createTHead() Creates an empty <thead> elements and adds it to the table
deleteTHead() Removes the <thead> element from the table
createTFoot() Creates an empty <tfoot> elements and adds it to the table
deleteTFoot() Removes the <tfoot> element from the table
27. Exercise
• Modify IPL table manipulation program with following options:
Taking user input for new row addition (instead of hard-coded value)
Adding new column in all rows called “City” and populate the city name the team belongs to
Add option to delete the column by taking the column index from the user
Insert table head as “IPL Team details” with appropriate column names (Name, Team, Captain etc..)
Some useful tips:
• <table-name>.rows.length will give you number of rows
• <table-name>.rows[0].cells.length will give you number of columns
29. JavaScript Animation
• The JavaScript animation is implemented as gradual changing of DOM element
styles or canvas objects
• The whole process is split into pieces, and each piece is called by timer
• An animation is created by replacing one Image frame with another at speed such
that it appears to be a moving Image
• Animations can be created using JavaScript by using a timer which replaces one
image frame with another
• The two timer function setTimeout() and setInterval() to execute JavaScript codes
at set intervals
30. DOM Animation
Method Description
setTimeout(function,duration) This function calls function after duration milliseconds from
now
setInterval(function,duration) This function calls function after every duration milliseconds
clearTimeout(timeout) This function calls clears any timer set by the setTimeout()
functions
Some useful tips:
• <element-name>.style.left = A px sets the left position of the element
• <element-name>.style.right = A px sets the right position of the element
• <element-name>.style.top = A px sets the top position of the element
• <element-name>.style.bottom = A px sets the top position of the element
31. Exercise
• Write a JavaScript program to move two small squares inside one big square
in a random manner. User should be able to start and stop this animation
using button based events
Some useful tips:
Math.floor(Math.random() * Math.floor(max)) will give you a
random number that is less than max value
33. DOM Nodes
• In the context of DOM, every entity in an HTML or XML document, is referred as a
Node
• In JavaScript, all the Nodes are represented as Objects. They have their own
properties and methods
<Doctype html> is DocumentType Node
<head> is an Element Node, so are meta, title, body, h1, p, ul and li
• Text contents like the title text 'This is a simple HTML document' is a text Node
• Some of the Nodes may have children. Like <ul> has <li> as children
• Body has <h1>, <p>,<ul> as children
35. Navigation between nodes
There are some node properties to navigate between nodes:
parentNode
childNodes[node number]
firstChild
lastChild
nextSibling
previousSibling
36. Node creation - Example
// Creates a new em element
var newnode = document.createElement("em");
// To add text to the em element
var node = document.createTextNode("Text to add");
// Appending the text node to em element
newnode.appendChild(node);
// Appending new element to existing element
var elem = document.getElementById("p");
elem.appendChild(newnode);
37. Node Creation - Example
<body>
<p>Click the button to make a new Button element</p>
<button onclick="myFun()">Click</button>
<script>
function myFun() {
var btn = document.createElement("BUTTON");
var t = document.createTextNode("NewButton");
btn.appendChild(t);
document.body.appendChild(btn);
}
</script>
</body>
38. DOM Node - Methods
Method Description
appendChild() The appendChild() method will add new element as last child of parent , if we
want to insert before last child of parent then insertBefore() can be used.
Syntax :
parentElem.insertBefore(elem, nextSibling);
removeChild() Remove child node from parent node.
Syntax :
parentElem.removeChild(elem);
replaceChild() Replace the child element of parent Element, referenced by current Element
with the element.
Syntax :
parentElem.replaceChild(elem, currentElem);
39. DOM Node List
• The Node List object represents an ordered collection of nodes, indexed by number
(starting from zero).
• A Node List is not an array. For example the getElementsByTagName() method
returns a node list. The nodes can be accessed by an index number.
• The length property defines number of nodes in the list
var allParagraphs = document.getElementsByTagName("p");
var firstParagraph = allParagraphs[0];
40. Exercise
• Write a JavaScript function to manipulate an unordered list with multiple
following options:
Create multiple lists
Dynamically assign ID for each of the lists created
In each of the lists created support the following operations:
Insert (Before)
Append
Replace
Remove
41. WebStack Academy
#83, Farah Towers,
1st Floor, MG Road,
Bangalore – 560001
M: +91-809555 7332
E: training@webstackacademy.com
WSA in Social Media: