The document provides an overview of new features in HTML5, including several new semantic elements (e.g., <header>, <nav>, <article>), multimedia elements (<video>, <audio>), form controls, and APIs (e.g., geolocation, local storage). It also compares the <canvas> and <svg> elements, and discusses features like offline application caching, drag and drop, and web workers.
Slides from an HTML5 overview session I presented at work...
This presentation has an accompanying sample webapp project: http://code.google.com/p/html5-playground
An HTML5 overview I gave at Refresh FLL which showed the new features & touched on how to use progressive enhancement and polyfills to leverage HTML5 today.
Slides from an HTML5 overview session I presented at work...
This presentation has an accompanying sample webapp project: http://code.google.com/p/html5-playground
An HTML5 overview I gave at Refresh FLL which showed the new features & touched on how to use progressive enhancement and polyfills to leverage HTML5 today.
Web Components are like Lego bricks. Easy to assemble and every piece simply fits together. But there is even more to it. Being able to create your own HTML-Tags with encapsulated style & logic changes the way you think about structuring your web applications. Get a sneak peek on how to develop scalable & maintainable applications in the future.
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
This slideshow provides an introduction to HTML5. The target audience should have an understanding of web development, javascript, and previous standards of HTML. This tutorial contains a brief background on the language and an overview of the most popular features. Features covered include native audio/video support, geolocation, canvas, drawing API, web forms 2.0, drag and drop, and more. Also covered is backwards compatibility and section 508 compliance. Extras include polyfills, modernizr, and a brief introduction to CSS3. Enjoy!
Building a Secure App with Google Polymer and Java / Springsdeeg
Polymer is the latest web framework out of Google. Designed completely around the emerging Web Components standards, it has the lofty goal of making it easy to build apps based on these low level primitives. Along with Polymer comes a new set of Elements (buttons, dialog boxes and such) based on the ideas of "Material Design". These technologies together make it easy to build responsive, componentized "Single Page" web applications that work for browsers on PCs or mobile devices. But what about the backend, and how do we make these apps secure? In this talk Scott Deeg will take you through an introduction to Polmyer and its related technologies, and then through the build out of a full blown cloud based app with a secure, ReSTful backend based on Spring ReST, Spring Cloud, and Spring Security and using Thymeleaf for backend rendering jobs. At the end he will show the principles applied in a tool he's currently building. The talk will be mainly code walk through and demo, and assumes familiarity with Java/Spring and JavaScript.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Web Components are like Lego bricks. Easy to assemble and every piece simply fits together. But there is even more to it. Being able to create your own HTML-Tags with encapsulated style & logic changes the way you think about structuring your web applications. Get a sneak peek on how to develop scalable & maintainable applications in the future.
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
This slideshow provides an introduction to HTML5. The target audience should have an understanding of web development, javascript, and previous standards of HTML. This tutorial contains a brief background on the language and an overview of the most popular features. Features covered include native audio/video support, geolocation, canvas, drawing API, web forms 2.0, drag and drop, and more. Also covered is backwards compatibility and section 508 compliance. Extras include polyfills, modernizr, and a brief introduction to CSS3. Enjoy!
Building a Secure App with Google Polymer and Java / Springsdeeg
Polymer is the latest web framework out of Google. Designed completely around the emerging Web Components standards, it has the lofty goal of making it easy to build apps based on these low level primitives. Along with Polymer comes a new set of Elements (buttons, dialog boxes and such) based on the ideas of "Material Design". These technologies together make it easy to build responsive, componentized "Single Page" web applications that work for browsers on PCs or mobile devices. But what about the backend, and how do we make these apps secure? In this talk Scott Deeg will take you through an introduction to Polmyer and its related technologies, and then through the build out of a full blown cloud based app with a secure, ReSTful backend based on Spring ReST, Spring Cloud, and Spring Security and using Thymeleaf for backend rendering jobs. At the end he will show the principles applied in a tool he's currently building. The talk will be mainly code walk through and demo, and assumes familiarity with Java/Spring and JavaScript.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Esoft Metro Campus - Diploma in Web Engineering - (Module III) Coding HTML for Basic Web Designing
(Template - Virtusa Corporate)
Contents:
Introduction to HTML
HTML Versions
HTML Standards
Creating a Simple HTML Document
Document Type Declaration
Comments in HTML
HTML Attributes
Paragraphs
Line Break
Headings
Text Formatting
Font Formatting
Images
Hyperlinks
Page Body
Lists
Tables
Cell Merging in a Table
Table Attributes
Horizontal Rule
Iframes
HTML Blocks
Division
Span
Audio
Video
Youtube Videos
Forms and Input
Introduction to CSS
Advantages of Using CSS
CSS Syntax
CSS Comments
How to Insert CSS?
CSS Tag, ID and Class Selectors
Grouping and Nesting Selectors
CSS Backgrounds
CSS Text
CSS Fonts
CSS Links
CSS Lists
CSS Tables
CSS Box Model
CSS Dimension
CSS Display - Block and Inline
CSS Positioning
CSS Float
CSS Alignment
Navigation Menu in CSS
Public Relations is an industry that companies have been relying on for years but with the introduction of the internet to businesses and their publics, many companies have taken it upon themselves to handle their own PR. We at Digital by Design are about to tell you why getting an expert to take care of your Digital PR for you is the best way to go.
Changes can introduce untested conditions, or produce unpredictable errors and problems. Change auditing is a means whereby both IT administrators and management can readily distribute, secure and manage resources to ensure accountability and operational stability. This white paper explains why change auditing is important and covers features required for Active Directory change auditing.
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
This slideshow provides an introduction to HTML5. The target audience should have an understanding of web development, javascript, and previous standards of HTML. This tutorial contains a brief background on the language and an overview of the most popular features. Features covered include native audio/video support, geolocation, canvas, drawing API, web forms 2.0, drag and drop, and more. Also covered is backwards compatibility and section 508 compliance. Extras include polyfills, modernizr, and a brief introduction to CSS3. Enjoy!
Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
HTML5 is still evolving and, naturally, APEX cannot yet support all the new functionality declaratively. This doesn’t mean you cannot use new advanced HTML5 features and API’s in your application. In my session, I will explain and demonstrate 5 HTML5 functionalities that can add valuable functionality to your APEX application and how to (easily) integrate them in APEX.
In this session I will explain and demonstrate 5 HTML5 elements and API’s and how to integrate those in an Oracle Application Express application. The selected features are not declaratively supported by Application Express (yet) but can add functionality that improves functionality and user experience.
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/
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.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
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.
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
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.
3. HTML5
whats new ?
New Elements
New Attributes
Full CSS3 Support
Video and Audio
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications
New features should be based on HTML, CSS,
DOM, and JavaScript
Reduce the need for external plugins (like
Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to
the public
But why...?
3
Ravi Yelluripati
4. HTML5 – new features
Some of the most interesting new features in HTML5:
The <canvas> element for 2D drawing
● The <video> and <audio> elements for media playback
● Support for local storage
● New content-specific elements, like <article>, <footer>,
<header>, <nav>, <section>
● New form controls, like calendar, date, time, email, url,
search
●
4
Ravi Yelluripati
5. HTML5 – new tags
The New <canvas> Element
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
New Media Elements
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for <video> and <audio>
<embed> Defines a container for an external application or interactive content (a plug-in)
<track> Defines text tracks for <video> and <audio>
New Form Elements
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
5
Ravi Yelluripati
6. HTML5 – New Semantic/Structural
Elements
HTML5 offers new elements for better
structure:
<article> Defines an article
<aside> Defines content aside from the
page content
<bdi> Isolates a part of text that might be
formatted in a different direction from
other text outside it
<command> Defines a command button
that a user can invoke
<details> Defines additional details that
the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a
<details> element
<figure> Specifies self-contained content,
like illustrations, diagrams, photos, code
listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a
heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known
range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian
typography)
<rt> Defines an explanation/pronunciation of characters
(for East Asian typography)
<rp> Defines what to show in browsers that do not
support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break
6
Ravi Yelluripati
7. HTML5 – Removed Elements
HTML 4.01 elements are removed from HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
7
Ravi Yelluripati
8. HTML5 - Canvas
The <canvas> element is used to draw
graphics, on the fly, on a web page. Its a
container for graphics. We should use a
scripting language to create objects
We can draw a red rectangle, a gradient
rectangle, a multicolor rectangle, and some
multicolor text onto the canvas, for example
8
Ravi Yelluripati
9. HTML5 – Canvas Example
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas
tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
9
Ravi Yelluripati
10. HTML5 - SVG
What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated
SVG is a W3C recommendation
Advantages of using SVG over other image formats (like JPEG and GIF) are:
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed without
degradation)
10
Ravi Yelluripati
12. HTML5 – SVG vs Canvas
SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within
the SVG DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an
SVG object are changed, the browser can automatically re-render the
shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it
is forgotten by the browser. If its position should be changed, the entire
scene needs to be redrawn, including any objects that might have been
covered by the graphic.
12
Ravi Yelluripati
13. HTML5 – Canvas vs SVG
Canvas
SVG
Resolution dependent
No support for event
handlers
Poor text rendering
capabilities
You can save the
resulting image as .png
or .jpg
Well suited for
graphic-intensive games
Resolution independent
Support for event handlers
Best suited for applications with
large rendering areas (Google Maps)
Slow rendering if complex (anything
that uses the DOM a lot will be slow)
Not suited for game applications
13
Ravi Yelluripati
14. HTML5 – drag and drop!
In HTML5, drag and drop is part of the standard, and
any element can be draggable!
<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>
14
Ravi Yelluripati
15. HTML5 - Geolocation
The HTML5 Geolocation API is used to get the geographical position
of a user.
Since this can compromise user privacy, the position is not available
unless the user approves it.
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not
supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
15
Ravi Yelluripati
16. HTML5 - video
HTML5 defines a new element which specifies a standard
way to embed a video/movie on a web page:
the <video> element.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
http://www.w3schools.com/html/html5_video.asp
16
Ravi Yelluripati
17. HTML5 - audio
HTML5 defines a new element which specifies a standard way to
embed an audio file on a web page:
the <audio> element..
<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>
17
Ravi Yelluripati
18. HTML5 – new input types
HTML5 has several new input types for forms. These new features allow
better input control and validation.
Color
date
Datetime datetime-local
Email
month
number range
search
tel
time
url
week
<form action="demo_form.asp">
Select your favorite color: <input type="color"
name="favcolor"><br>
<input type="submit">
</form>
18
Ravi Yelluripati
19. HTML5 –datalist
The <datalist> element specifies a list of pre-defined options for an <input> element.
The <datalist> element is used to provide an "autocomplete" feature on <input>
elements. Users will see a drop-down list of pre-defined options as they input data.
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
19
Ravi Yelluripati
20. HTML5 – keygen
The purpose of the <keygen> element is to provide a secure way to authenticate users.
The <keygen> tag specifies a key-pair generator field in a form.
When the form is submitted, two keys are generated, one private and one public.
The private key is stored locally, and the public key is sent to the server. The public key could be
used to generate a client certificate to authenticate the user in the future.
<!DOCTYPE html>
<html>
<body>
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
</body>
</html>
20
Ravi Yelluripati
21. HTML5 – output
The <output> element represents the result of
a calculation (like one performed by a script).
<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
</body>
</html>
21
Ravi Yelluripati
22. HTML5 – semantic elements
A semantic element clearly describes its meaning to both the browser
and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
HTML5 offers new semantic elements to clearly define different
parts of a web page:
<header>
Other elements ...
<nav>
<section>
<article>
<article>
<hgroup>
<aside>
<mark>
<figcaption>
<time>
<figure>
<footer>
22
Ravi Yelluripati
23. HTML5 – Web Storage 1/3
....a better local storage than cookies
With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure
and faster. The data is not included with every server request, but used
ONLY when asked for. It is also possible to store large amounts of data,
without affecting the website's performance.
The data is stored in key/value pairs, and a web page can only access data
stored by itself.
There are two new objects for storing data on the client:
localStorage - stores data with no expiration date
sessionStorage - stores data for one session
23
Ravi Yelluripati
24. HTML5 – Web Storage 2/3
The localStorage Object >> stores the data with no expiration date. The data will not be
deleted when the browser is closed, and will be available the next day, week, or year.
Example:
localStorage.lastname="Bunty";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;
Example explained:
Create a localStorage key/value pair with key="lastname" and value="Smith"
Retrieve the value of the "lastname" key and insert it into the element with id="result"
if (localStorage.clickcount) //one more example
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + "
time(s).";
24
Ravi Yelluripati
25. HTML5 – Web Storage 3/3
The sessionStorage object is equal to the localStorage object,
except that it stores the data
for only one session. The data is deleted when the user closes the browser window.
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button "
+ sessionStorage.clickcount + " time(s) in this session.";
25
Ravi Yelluripati
26. HTML5 – Application Cache 1/5
HTML5 introduces application cache, which means that a
web application is cached, and accessible without an
internet connection.
Application cache gives an application three advantages:
1. Offline browsing - users can use the application when they're offline
2. Speed - cached resources load faster
3. Reduced server load - the browser will only download
updated/changed resources from the server
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
26
Ravi Yelluripati
27. HTML5 – Application Cache 2/5
The Manifest File
It is a simple text file, which tells the browser
what to cache (and what to never cache).
The manifest file has three sections:
CACHE MANIFEST - Files listed under this header will be
cached after they are downloaded for the first time
NETWORK - Files listed under this header require a connection
to the server, and will never be cached
FALLBACK - Files listed under this header specifies fallback
pages if a page is inaccessible
27
Ravi Yelluripati
30. HTML5 – Application Cache 5/5
Updating the Cache
Once an application is cached, it remains cached
until one of the following happens:
The user clears the browser's cache
● The manifest file is modified (see tip below)
● The application cache is programmatically
updated
●
30
Ravi Yelluripati
31. HTML5 – Web Worker 1/2
What is a Web Worker?
A web worker is a JavaScript running in the background,
without affecting the performance of the page.
A web worker is a JavaScript that runs in the
background, independently of other scripts, without
affecting the performance of the page. You can continue
to do whatever you want: clicking, selecting things, etc.,
while the web worker runs in the background.
31
Ravi Yelluripati
32. HTML5 – Web Worker 2/2
Example ....
<p>Count
numbers:
<output
id="result"></output></p>
<button
onclick="startWorker()">Start
Worker</button>
<button
onclick="stopWorker()">Stop
Worker</button>
<br><br>
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=e
vent.data;
};
}
else
{
document.getElementById("result").innerHTML="
Sorry, your browser does not support Web
Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
32
Ravi Yelluripati
33. HTML5 – Server-Sent Event
A server-sent event is when a web page automatically
gets updates from a server.
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
http://www.w3schools.com/html/html5_serversentevents.asp
33
Ravi Yelluripati
34. HTML5 – playing youtube videos
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
//using iframe
<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>
//embedded video
34
Ravi Yelluripati
35. HTML5 – do it yourself
http://www.w3schools.com
/html/html_examples.asp
35
Ravi Yelluripati
38. What is CSS?
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
38
Ravi Yelluripati
39. What is CSS?
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
39
Ravi Yelluripati
40. CSS Syntax
A CSS rule has two main parts: a selector, and
one or more declarations:
Source: http://www.w3schools.com/css/css_syntax.asp
40
Ravi Yelluripati
41. CSS Comments
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
41
Ravi Yelluripati
42. CSS Id and Class
The id selector is used to specify a style for a
single, unique element.
The class selector is used to specify a style for
a group of elements.
42
Ravi Yelluripati
43. CSS – How to insert?
External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Internal Style Sheet
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Style Sheet
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
43
Ravi Yelluripati
44. CSS – Multiple Styles - priority
all the styles will "cascade" into a new "virtual"
style sheet by the following rules, where number
four has the highest priority:
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
44
Ravi Yelluripati
45. CSS – backgrounds
CSS properties used for background effects:
Background-color {background-color:#b0c4de;}
Background-image {background-image:url('paper.gif');}
Background-repeat {background-repeat:repeat-x;}
Background-attachment {background image is fixed or scrolls
with the rest of the page.}
Background-position {background-repeat:no-repeat;
background-position:right top;}
45
Ravi Yelluripati
46. CSS – text 1/2
Many settings are possible:
{color:blue;} //#00ff00, rgb(255,0,0)
{text-align:center;} //right, justify
{text-decoration:none;} //remove underlines from URL//overline, line-through,underline
{text-indent:50px;}
{direction:rtl;} //Specifies the text direction/writing direction
{letter-spacing:2px;} //-3px, Increases or decreases the space between characters in a
text
{line-height:70%;} // Sets the line height
Text-shadow // Specifies the shadow effect added to text
{text-transform:uppercase;} //capitalize, lowercase;
{vertical-align:text-top;} // Sets the vertical alignment of an element
{word-spacing:30px;} //try http://www.w3schools.com/cssref/playit.asp?
filename=playcss_word-spacing&preval=10px
46
Ravi Yelluripati
47. CSS – text – whitespace property
2/2
normal >> Sequences of whitespace will collapse into a single
whitespace. Text will wrap when necessary. This is default
nowrap >> Sequences of whitespace will collapse into a single
whitespace. Text will never wrap to the next line. The text
continues on the same line until a <br /> tag is encountered
pre >> Whitespace is preserved by the browser. Text will only wrap
on line breaks Acts like the <pre> tag in HTML
pre-line >> Sequences of whitespace will collapse into a single
whitespace. Text will wrap when necessary, and on line breaks
pre-wrap >> Whitespace is preserved by the browser. Text will
wrap when necessary, and on line breaks
inherit >> Specifies that the value of the white-space property
should be inherited from the parent element
47
Ravi Yelluripati
48. CSS – font
CSS font properties define the font family,
boldness, size, and the style of a text.
48
Ravi Yelluripati
49. CSS – font families
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look (like "Serif" or "Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")
Generic family
Font family
Description
Serif
Times New Roman
Georgia
Serif fonts have small lines at the ends
on some characters
Sans-serif
Arial
Verdana
"Sans" means without - these fonts do
not have the lines at the ends of
characters
Monospace
Courier New
Lucida Console
All monospace characters have the
same width
49
Ravi Yelluripati
51. CSS – units
Unit
Description
%
percentage
in
inch
cm
centimeter
mm
em
millimeter
1em is equal to the current font size. 2em means 2 times the size
of the current font. E.g., if an element is displayed with a font of 12
pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it
can adapt automatically to the font that the reader uses
ex
one ex is the x-height of a font (x-height is usually about half the
font-size)
pt
point (1 pt is the same as 1/72 inch)
pc
pica (1 pc is the same as 12 points)
px
pixels (a dot on the computer screen)
51
Ravi Yelluripati
52. CSS3 – support
CSS3 is not yet a W3C standard, but the major browsers support
many of the new properties. Check the link below for upto date
information on supported features by various browsers.....
http://www.w3schools.com/cssref/css3_browsersupport.asp
52
Ravi Yelluripati
53. CSS3 – reference
Use the following link to see all the features
of CSS including the CSS version 3.....
http://www.w3schools.com/cssref/default.asp
Use the following link to see all the selectors of
CSS.....
http://www.w3schools.com/cssref/css_selectors.asp
53
Ravi Yelluripati
54. CSS – box model
All HTML elements can be considered as boxes.
In CSS, the term "box model" is used when
talking about design and layout.
54
Ravi Yelluripati
56. CSS – outline
The outline is not a part of an element's dimensions; the element's
total width and height is not affected by the width of the outline.
Property
Description
Values
outline
Sets all the outline
properties in one
declaration
Outline-color,outline-style
outline-width,inherit
outline-color
Sets the color of an
outline
color_name,hex_number
rgb_number,invert,inherit
outline-style
Sets the style of an
outline
None,dotted,dashed,solid
,double,groove,ridge,inse
t,outset,inherit
outline-width
Sets the width of an
outline
Thin,medium,thick,length
,inherit
56
Ravi Yelluripati
57. CSS – grouping and nesting selectors
<!DOCTYPE html> <body>
<html>
<p>This paragraph has blue text, and is center aligned.</p>
<head>
<div class="marked">
<style>
<p>This paragraph has not blue text.</p>
p
</div>
{
<p>p elements inside a "marked" classed element keeps the
color:blue;
alignment style, but has a different text color.</p>
text-align:center;
</body>
}
</html>
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>
57
Ravi Yelluripati
58. CSS – display and visibility of elements
The display property specifies if/how an element is displayed, and the
visibility property specifies if an element should be visible or hidden.
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {visibility:hidden;}
h3 {display:none;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
<h2> This is a sub-heading</h2>
<hr>
<h3> This is one more sub-heading</h3>
<hr>
</body>
</html>
58
Ravi Yelluripati
59. CSS – positioning
The CSS positioning properties allow you
to position an element.
Static Positioning
Fixed Positioning
Relative Positioning
Absolute Positioning
Overlapping Elements
Examples: http://www.w3schools.com/css/css_positioning.asp
59
Ravi Yelluripati
60. CSS – horizontal align, psuedo classes
Examples: http://www.w3schools.com/css/tryit.asp?
filename=trycss_align_container
First Word
http://www.w3schools.com/css/tryit.asp?filename=trycss_firstline
First letter
http://www.w3schools.com/css/tryit.asp?filename=trycss_firstletter
<!DOCTYPE html>
<html>
<head>
<style>
h1:before {content:url(smiley.gif);}
h1:after {content:url(smiley.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
</html>
60
Ravi Yelluripati
62. javascript – Basics 1/3
<!DOCTYPE html>
<html>
<body>
Welcome
Hello friends
<h1>Welcome</h1>
How are you?
<p id="demo">A Paragraph.</p>
<div id="myDIV">A DIV.</div>
<script>
document.getElementById("demo").innerHTML="Hello friends";
document.getElementById("myDIV").innerHTML="How are you?";
</script>
</body>
</html>
62
Ravi Yelluripati
63. javascript – Basics 2/3
<!DOCTYPE html>
<html>
<body>
My First Web Page
<h1>Welcome to My Web Page</h1>
My First JavaScript
<p id="demo">My First Paragraph.</p>
<script>
document.getElementById("demo").innerHTML="My
First JavaScript";
</script>
</body>
</html>
63
Ravi Yelluripati
64. javascript – Basics 3/3
<!DOCTYPE html>
<html>
<body>
My Web Page
<h1>My Web Page</h1>
A Paragraph.
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> myFunction is stored in an external
file called "myScript.js".</p>
<script src="myScript.js"></script>
</body>
</html>
Note: myFunction
is stored in an
external file called
"myScript.js".
64
Ravi Yelluripati
65. javascript – Statements, Blocks and
Comments
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to My Web Page</h1>
<p id="demo">My First Paragraph.</p>
<script>
//This is a single line comment
/* We can also add
Multi-line comments just like we do in C/C++
*/
//The line below is a javascript statement
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>
Block
65
Ravi Yelluripati
66. javascript – variables
<!DOCTYPE html>
<html>
<body>
Aditya
Bunty
<script>
var firstname;
firstname="Aditya";
document.write(firstname);
document.write("<br>");
firstname="Bunty";
document.write(firstname);
</script>
<p>The script above declares a variable,
assigns a value to it, displays the value, changes the value,
and displays the value again.</p>
</body>
</html>
The script above
declares a variable,
assigns a value to it,
displays the value,
changes the value,
and displays the
value again.
66
Ravi Yelluripati
67. javascript – Popup Boxes
JavaScript has three kind of popup boxes: Alert
box, Confirm box, and Prompt box.
Alert Box
window.alert("sometext");
//or
Confirm Box
var r=confirm("Press a button");
if (r==true)
{
alert(“some text”);
x="You pressed OK! n Isn't that
cool!";
}
Prompt Box
else
window.prompt("sometext",
"defaultvalue");
{
x="You pressed Cancel!";
}
67
Ravi Yelluripati
68. javascript – loops
Commonly used loops are for, for..in, while,
do..while
for
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
for in
var
person={fname:"richard",lna
me:"stallman",age:25};
}
for (x in person)
{
txt=txt + person[x];
}
68
Ravi Yelluripati
69. javascript – functions
Here is a function with arguments and a return
value
Try It function
<button onclick="myFunction('Harry
Potter','Wizard')">Try it</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
return (“thanks for visiting my page”);
}
</script>
69
Ravi Yelluripati
70. javascript – events
'onclick' is an event as shown below
Try It function
<button onclick="myFunction('Harry
Potter','Wizard')">Try it</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
return (“thanks for visiting my page”);
}
</script>
70
Ravi Yelluripati
71. javascript – OnMouseOver
<!DOCTYPE html>
<html>
<head>
<script>
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onmouseover="writeText('The Sun and the gas giant planets like Jupiter are by far the largest
objects in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onmouseover="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onmouseover="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc">Mouse over the sun and the planets and see the different descriptions.</p>
</body>
</html>
71
Ravi Yelluripati
72. javascript – error handling
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.nn";
txt+="Error description: " + err.message + "nn";
txt+="Click OK to continue.nn";
alert(txt);
}
}
</script>
72
Ravi Yelluripati
73. javascript – the oneerror event
<script>
onerror=handleErr;
var txt="";
txt+="Click OK to continue.nn";
alert(txt);
return true;
function handleErr(msg,url,l)
}
{
txt="There was an error on this page.nn";
txt+="Error: " + msg + "n";
txt+="URL: " + url + "n";
txt+="Line: " + l + "nn";
function message()
{
adddlert("Welcome guest!");
}
</script>
73
Ravi Yelluripati
74. javascript – set a cookie
<!DOCTYPE html>
function checkCookie()
<html>
if (c_end == -1)
<head>
{
{
function getCookie(c_name)
var username=getCookie("username");
c_end = c_value.length;
<script>
if (username!=null && username!="")
{
}
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
c_value =
unescape(c_value.substring(c_start,c_end)
);
alert("Welcome again " + username);
}
else
}
if (c_start == -1)
{
username=prompt("Please enter your name:","");
{
return c_value;
c_start = c_value.indexOf(c_name + "=");
}
}
function setCookie(c_name,value,exdays)
if (c_start == -1)
{
c_value = null;
if (username!=null && username!="")
{
{
}
{
}
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
}
else
setCookie("username",username,365);
var c_value=escape(value) +
((exdays==null) ? "" : ";
expires="+exdate.toUTCString());
}
</script>
</head>
<body onload="checkCookie()">
c_start = c_value.indexOf("=", c_start) + 1;
document.cookie=c_name + "=" + c_value;
</body>
var c_end = c_value.indexOf(";", c_start);
}
</html>
Ravi Yelluripati
74
75. javascript – the timeout
<!DOCTYPE html>
<html>
<body>
<head>
<form>
<script>
<input type="button" value="Display timed text!"
onclick="timedText()" />
function timedText()
{
var x=document.getElementById('txt');
<input type="text" id="txt" />
</form>
var t1=setTimeout(function(){x.value="2 seconds"},2000);
<p>Click on the button above. The input field will tell you
when two, four, and six seconds have passed.</p>
var t2=setTimeout(function(){x.value="4 seconds"},4000);
</body>
var t3=setTimeout(function(){x.value="6 seconds"},6000);
}
</html>
</script>
</head>
75
Ravi Yelluripati
76. javascript – direct instance of object
<!DOCTYPE html>
<html>
<body>
<script>
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>
76
Ravi Yelluripati
77. javascript – object constructor
<!DOCTYPE html>
<html>
<body>
<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</body>
</html>
77
Ravi Yelluripati
79. Javascript ..what next?
HTML DOM - The HTML DOM is a standard
for how to get, change, add, or delete HTML
elements.
jQuery
ajax,
php
79
Ravi Yelluripati
80. Javascript ... html dom
(prerequisites – html, css, javascript)
80
Ravi Yelluripati
81. html dom – methods and
properties
Some commonly used HTML DOM methods:
●
getElementById(id) - get the node (element) with a specified id
●
appendChild(node) - insert a new child node (element)
●
removeChild(node) - remove a child node (element)
Some commonly used HTML DOM properties:
●
innerHTML - the text value of a node (element)
●
parentNode - the parent node of a node (element)
●
childNodes - the child nodes of a node (element)
●
attributes - the attributes nodes of a node (element)
81
Ravi Yelluripati
83. ajax – asunchronous javascript
and XML
AJAX was made popular in 2005 by Google, with Google Suggest.
83
Ravi Yelluripati
84. ajax – asunchronous javascript
and XML
HTML DOM - The HTML DOM is a standard for how to
get, change, add, or delete HTML elements.
jQuery
ajax,
php
84
Ravi Yelluripati
85. ajax – asunchronous javascript
and XML
●
The keystone of AJAX is the XMLHttpRequest object.
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
85
Ravi Yelluripati
86. ajax – request to server
●
Send a Request To a Server
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
●
GET or POST?
GET is simpler and faster than POST, and can be used in most cases.
However, always use POST requests when:
●
A cached file is not an option (update a file or database on the server)
●
Sending a large amount of data to the server (POST has no size limitations)
●
Sending user input (which can contain unknown characters), POST is more robust and secure than
GET
More here ...
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
http://www.w3schools.com/ajax/ajax_database.asp
86
Ravi Yelluripati
87. ajax – example
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
•
{
•
loadXMLDoc("ajax_info.txt",function()
• {
• if (xmlhttp.readyState==4 && xmlhttp.status==200)
•
{
•
•
document.getElementById("myDiv").innerHTML=xmlhttp.res
ponseText;
•
}
• });
•
}
•
</script>
•
</head>
•
<body>
•
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
•
<button type="button" onclick="myFunction()">Change
Content</button>
•
•
</body>
•
</html>
•
87
Ravi Yelluripati
89. JQuery – what is it?
●
●
●
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript
programming.
jQuery is easy to learn.
●
●
89
Ravi Yelluripati
90. JQuery – what is it?
The jQuery library contains the following features:
●
●
●
●
●
●
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
●
90
Ravi Yelluripati
91. JQuery – how to use it?
<head>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.
1/jquery.min.js">
</script>
</head>
91
Ravi Yelluripati
92. JQuery – syntax
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
92
Ravi Yelluripati
93. JQuery – example
Example
When a user clicks on a button, all <p> elements will be hidden:
Example
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
93
Ravi Yelluripati
94. JQuery – fading methods
Example fade
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Example slide function
$("#flip").click(function(){
$("#panel").slideDown();
});
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein
http://www.w3schools.com/jquery/tryit.asp?
filename=tryjquery_slide_down
94
Ravi Yelluripati
95. JQuery – animate
The jQuery animate() method lets you create custom animations.
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
$("#stop").click(function(){
$("#panel").stop();
});
</script>
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein
http://www.w3schools.com/jquery/tryit.asp?
filename=tryjquery_slide_down
95
Ravi Yelluripati
96. JQuery – watch it!
JavaScript statements are executed line by line. However, with effects,
the next line of code can be run even though the effect is not finished.
This can create errors!
//with a callback function displays the alert after hide
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
//without a callback function displays the alert before hide
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
96
Ravi Yelluripati
97. JQuery – set content
Set Content - text(), html(), and val()
We will use the same three methods from the previous
page to set content:
text() - Sets or returns the text content of selected
elements
html() - Sets or returns the content of selected
elements (including HTML markup)
val() - Sets or returns the value of form fields
97
Ravi Yelluripati
98. JQuery – set content - example
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
98
Ravi Yelluripati
101. Animation – how is it done
Div manipulation
Moving the divs – alter the position of elements using
javascript
Hide/show sprites
CSS3 Transform
Keyframe animation
But why...?
101
Ravi Yelluripati
103. Animation – keyframes
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /*
Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome
*/
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in
Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
103
Ravi Yelluripati