This document provides information about cascading style sheets (CSS). It discusses the different ways to apply stylesheets, including inline, embedded, and external stylesheets. It explains that CSS controls the layout, fonts, colors and overall appearance of web pages. CSS allows separation of design from content and makes pages load faster. The document also covers CSS syntax, selectors, properties and values. Common CSS selectors for HTML elements like headings, paragraphs and horizontal rules are listed along with their properties.
In this slide, we will discuss about what are css, html and also javascript. These three languages are very powerful and must be mastered and understood by all programmers and "hackers".
This slide will give you a clear view on what are they and their functions. Please note that, this slide does not teach you how to write/program them. This slides is completely for any levels.
1) Easy to understand.
2) Comments are included to make you understand better!
3) Ready to go for any presentation.
4) Full of informations
5) Small but powerful
What makes it interesting?
- These languages are used in every websites on the internet.
Why them?
- Seek for yourself in the slide
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
In this slide, we will discuss about what are css, html and also javascript. These three languages are very powerful and must be mastered and understood by all programmers and "hackers".
This slide will give you a clear view on what are they and their functions. Please note that, this slide does not teach you how to write/program them. This slides is completely for any levels.
1) Easy to understand.
2) Comments are included to make you understand better!
3) Ready to go for any presentation.
4) Full of informations
5) Small but powerful
What makes it interesting?
- These languages are used in every websites on the internet.
Why them?
- Seek for yourself in the slide
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
Java Script is one of the most pervasive languages found on the internet and World Wide Web. Java Script is useful in making web pages more interactive. The pages can be made to react to the actions of the users in the form of special effects, both visual and otherwise.
HTML Tutorial For List,frames class and ID
Tutorial : http://sswebtricks.blogspot.in/2018/02/html-tutorial-topic-3.html
Video : https://www.youtube.com/watch?v=ZFZJMCeLJwo&t=19s
Source : https://github.com/hackstarsj/html-tutorial-topic-first
Java Script is one of the most pervasive languages found on the internet and World Wide Web. Java Script is useful in making web pages more interactive. The pages can be made to react to the actions of the users in the form of special effects, both visual and otherwise.
HTML Tutorial For List,frames class and ID
Tutorial : http://sswebtricks.blogspot.in/2018/02/html-tutorial-topic-3.html
Video : https://www.youtube.com/watch?v=ZFZJMCeLJwo&t=19s
Source : https://github.com/hackstarsj/html-tutorial-topic-first
Understand about what JSON is
Understand the difference between JSON and XML
Understand the context of using JSON with AJAX
Know how to read and write JSON data using PHP
Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML.
This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more
Act Academy provides Industrial training in PHP, .Net, graphic designing, web designing and many more. Also provides diploma courses in CAD designing, Financial accounting with 100% job assurances.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
Super billing asp.net
We also provide a variety of repair solutions and maintenance, from a nasty viral infection right through to a major system fault or even loss of power, our workshop is tailored to handle any problems you may encounter – here are just some of the servicing options we can provide:
System diagnosis and report
Viral repair/removal (worms, trojans etc.)
Similar to A quick guide to Css and java script (20)
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
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
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.
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.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
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.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
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.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
2. Cascading Style Sheet
Web style sheets are a form of separation of
presentation and content for web design .
Style sheet can decide the presentation of web pages.
Style sheet takes care of all the layout, fonts, colors
and overall look of the site.
2
3. Cascading Style Sheet (contd..)
Principal means of Styling a document using Cascading
style sheets are:
3
Inline style Sheet
External style Sheet
Embedded style Sheet
4. Benefits of a Cascading Style Sheet
Pages download faster.
Page contains less code, and the pages are shorter and
neat.
The look of the site is kept consistent throughout all the
pages that work off the same stylesheet.
Updating the design and general site maintenance are
made much easier.
4
5. Parts of a Cascading Style Sheet
CSS syntax is made up of three parts:
5
Selector
Property
Value
HTML tag that you wish to change
The attribute that you wish to change
Each property can take a value
Selector HTML tag that you wish to change
6. Inline Style Sheet
Inline style sheets are applied by coding style properties and values
inside the tags to which they apply.
An inline style sheet can appear inside any tag to directly set its
style. All that is required is to enclose the applicable style properties
and values inside a quoted style attribute.
Syntax
<tag style=“property:value [;property:value]…”>
6
8. Embedded Style sheet
Embedded style sheets are used when a unique style is required for a
document.
Embedded style are defined in the <head> tag section by using the
<style> tag
When a large number of style settings are used on a Web page, there
is convenience in packaging the settings together in one place as an
embedded style sheet, rather than having them scattered as inline
style sheets throughout the document.
8
9. Syntax of Style sheet
selector {property: value}
Example
p {color: green}
If the value consist of more than one word the value has to
be embedded within quotes.
p {font-family: “sans-serif”}
If more than one property needs to be defined then the
properties need to be separated by semi colon.
p {font-family: “sans-serif” ; color: green}
9
10. Example of an Embedded Style sheet
<html>
<head>
<style type="text/css">
p {font-family:"sans-serif"; color: green}
hr {color: red}
body {color:blue; background-color:pink}
</style>
</head>
<body>
<p>This is paragraph one</p>
<hr>
<p> This is paragraph two</p>
<hr>
This line is not within paragraph tag
</body>
</html>
10
11. External Style Sheet
Internal style sheets are used when a unique style is required for a
document.
Internal style are defined in the <head> tag section by using the
<style> tag
The different selectors, their properties and values should be
defined within the external style sheet.
The external style sheet should be saved within a file, with an
extension of .css
11
12. External Style sheet
12
Background is defined
Paragraph font color is
defined
Horizontal color is defined
Mystyle.css
Requires the background,
Paragraph and horizontal
Rule setting defined
In Mystyle.css
FirstPage.html
SecondPage.html
Requires the background,
Paragraph and horizontal
Rule setting defined
In Mystyle.css
Both the html files uses
<link rel="stylesheet" type="text/css"
href=“Mystyle.css" />
13. Example of External style sheet
body {background-color: yellow}
h1 {font-size: 36pt}
p {margin-left: 50px; background: pink;
color:blue}
hr {color: red}
Mystyle.css
<html>
<head>
<link rel="stylesheet" type="text/css"
href="Mystyle.css" />
</head>
<body>
<h1> This header is 36 pt </h1>
<p> This paragraph has a left margin of 50
pixels<br>
The font color is blue<br>
The background color is pink
</p>
<hr>
</body>
</html>
MyPage.html
13
MyPage.html is using styles
defined in Mystyle.css
14. Multiple Style sheet
h3 { color: red;
text-align: left;
font-size: 8pt }
Mystyle.css
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“Mystyle.css”>
<style type=“text/css”>
h3 {font-size: 20pt}
</style>
</head>
<body>
<h3> This is a header </h3>
---more text----
</body>
</html>
MyPage.html
14
Mypage.html Links to
Mystyle.css
The font size of <h3> is redefined here
What will be the
Font size
Of <h3>
8pt or 20 pt??
15. Multiple Style sheet Continued
15
• If some properties have been set for the same selector in different style sheets,
the values will be inherited from the more specific style sheet .
h3 { color: red;
text-align: left;
font-size: 8pt }
Mystyle.css
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“Mystyle.css”>
<style type=“text/css”>
h3 {font-size: 20pt}
</style>
</head>
<body>
<h3> This is a header </h3>
---more text----
</body>
</html>
MyPage.html
Color: Red
Text-align-left
Font-size- 20pt
TheHTMLwill inheritthe
Fontcolorandalingment
FromMystyle.css Font Size will be Inherited
From the Internal Style sheet
16. Some common selectors and attributes
Selector property
H1,H2,H3….. font-size,Font-family,font-style , font-weight
Color, margin
P font-size,Font-family,font-style , font-weight
Color, Background-color,text-align, margin
HR color
body Background-color, font-size,Font-family,font-style , font-
weight, margin
16
17. Class Selector
With the class selector you can
define different styles for the
same type of HTML element.
<html>
<head>
<link rel=“stylesheet”
type=“text/css”
href=“Mystyle.css”>
</head>
<body>
<p class=“one”>This paragraph is
Right aligned </p>
<p class=“two”>This paragraph is
Left aligned</p>
</body>
</html>
MyPage.html
17
p.one {text-align: right; color: white;
background-color: black}
p.two {text-align: left; color: black;
background-color: Red}
Mystyle.css
18. Using <span> in CSS
SPAN is a inline tag.
It is used to format
small chunks of data
within another element.
Combining <span> tag
with CSS allows us to
create custom tags.
18
What is the
Utility of
<span> in
HTML
19. Using <span> in CSS (contd.)
p { color: white ; background-color:
black}
.example1 {color:blue ; background-
color: yellow ;font-family: "sans-
serif"}
.example2 {color:red ; background-
color: white ;font-family: times}
Mystyle.css
<html>
<head>
<link rel="stylesheet"
type="text/css" href="Mystyle.css" />
</head>
<body>
<p >
This is the first line of the paragraph<br>
This is the second line of the
paragraph<br>
<span class="example1">This is the third
line of the paragraph<br> </span>
<span class="example2">This is the fourth
line of the paragraph<br> </span>
This is the fifth line of the paragraph
</p>
</body>
</html>
MyPage.html
19
20. JAVASCRIPT
JavaScript is used in millions of Web pages to
improve the design, validate forms, and much
more. JavaScript was developed by Netscape and
is the most popular scripting language on the
internet.
What can a JavaScript Do?
JavaScript gives HTML designers a programming
tool - HTML authors are normally not
programmers, but JavaScript is a scripting
language with a very simple syntax! Almost
anyone can put small "snippets" of code into their
HTML pages
JavaScript can put dynamic text into an HTML
page - A JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can
write a variable text into an HTML page
21. JAVASCRIPT
JavaScript can react to events - A JavaScript can
be set to execute when something happens, like
when a page has finished loading or when a user
clicks on an HTML element
JavaScript can read and write HTML elements - A
JavaScript can read and change the content of an
HTML element
JavaScript can be used to validate data - A
JavaScript can be used to validate form data
before it is submitted to a server, this will save
the server from extra processing
22. Objectives
Introduction to JavaScript
Introduction to JavaScript programming language
Using Script tag
Inserting Java Script into tags
Linking Java Script from separate files
JavaScript expression and Operators
Defining and naming variables
Data Types
Expression
Operators – Arithmetic, String, Logical, Assignment, typeof
22
23. Objectives (Contd.)
Functions and Flow Control
Flow Control
If…else
For loops
while loops
Break and continue statements
Using JavaScript functions
Built in functions
User defined functions
Returning values from functions
Events, Event Handlers
23
24. Introduction to Java Scripts
What is JavaScript???
JavaScript is a scripting Language created by Netscape
24
What is a
Scripting
Language???
What is a
Scripting
Language???
•Scripting Language is a lightweight
programming language.
• Scripting Languages are not
needed to be compiled.
•The language is interpreted at
runtime.
25. Introduction to JavaScript
(Contd.)
A JavaScript is usually directly embedded in an HTML page.
External JavaScripts can be created which can be used by
HTML pages.
JavaScript adds interactivity to HTML pages.
JavaScript's are integrated into the browsing environment.
25
26. Introduction to JavaScript (Contd.)
Is
JavaScript
same as
Java???
Is
JavaScript
same as
Java???
Java is a programming
language which requires
compilation and
interpretation.
Java is used to make large
scale applications.
JavaScript is a scripting
language which just requires
interpretation. The script is
some set of commands which
the browser interprets.
JavaScript is used to add
interactivity in HTML Pages.
26
27. Types of JavaScript
Client-Side JavaScript (CSJS) -- an extended version of JavaScript
that enables the enhancement and manipulation of web pages and
client browsers.
Server-Side JavaScript (SSJS) -- an extended version of JavaScript
that enables back-end access to databases, file systems, and
servers.
Core JavaScript -- the base JavaScript language.
27
28. Uses of JavaScript (Client
Side)
Form Validation
Math Functions
Special effects with document and background
Status bar manipulation
Messages
Mouse Cursor Effects
Links
28
29. Syntax rules of JavaScript
Statements may or may not contain a semicolon at the
end.
Multiple statements on one line must be separated by a
semicolon.
JavaScript is case sensitive.
29
30. Using <script> tag
The HTML <script> tag is used to enter JavaScript into a HTML.
The <script> tag can be embedded within
<head> tag.
<body> tag.
JavaScript in the head section will be executed when called.
JavaScript in the body section will be executed while the
HTML page is loaded.
Unlimited number of JavaScript’s can be placed both in head
and body section in a HTML document.
30
32. How to Handle Older Browsers
Browsers that do not support JavaScript will display the script as it
is. Use the HTML comment tag to prevent this.
Eg.
<script type="text/javascript">
<!--
document.write("Hello World!")
// -->
</script>
32
The two forward slashes at the end of comment line
(//) are a JavaScript comment symbol. This
prevents the JavaScript compiler from compiling
the line.
33. Using an External JavaScript
A JavaScript can be written in an external file, which
can be used by different HTML pages.
The external script cannot contain the <script> tag.
The external file needs to end with the .js extension.
33
34. Using External JavaScript (contd.)
34
document.write("This line
has been writen in the
External JavaScript!!!")
External.js
<html>
<head><title>Example</title>
</head>
<body>
<script src="External.js">
</script>>
<p >
This line has been written in the
html page!!!
</p>
</body>
</html>
JavaScript.html
35. Variables
A variable is a "container" for information you want
to store. A variable is a symbolic name that
represents some data in the memory.
A variable's value can change during the script. You
can refer to a variable by name to see its value or
to change its value.
Rules for Variable names:
Variable names are case sensitive
They must begin with a letter or the underscore
character
36. Variables
The variable name is on the left side of the expression and the
value you want to assign to the variable is on the right.
Variable Declaration
Variables can be declared using the var statement
var <variable name>=some value
Variables can also be created without using var statement
<variable name>=some value
Eg
var firstname=“Samuel”
OR
firstname=“Samuel”
37. Variables
Lifetime of Variables
When you declare a variable within a
function, the variable can only be accessed
within that function. When you exit the
function, the variable is destroyed. These
variables are called local variables. You can
have local variables with the same name in
different functions, because each is
recognized only by the function in which it is
declared.
If you declare a variable outside a function,
all the functions on your page can access it.
The lifetime of these variables starts when
they are declared, and ends when the page is
closed.
38. Data Type in JavaScript
JavaScript is a loosely typed language.
Data Type of Variable
need not be specified
during declaration.
Data types are
automatically
converted during script
execution.
38
Loosely
Typed??
Loosely
Typed??
39. Data Type in JavaScript
(contd.)
JavaScript recognizes the following type of values:
39
ValuesValues
string
numbers
null
boolean
9, 3.56
true or false
Samuel, ”Samuel J Palmisano”
A Special keyword which refers to
nothing
48. Flow Control
Conditional Statements
if statement - use this statement if you want to execute some code only
if a specified condition is true.
if...else statement - use this statement if you want to execute some
code if the condition is true and another code if the condition is false.
if...else if....else statement - use this statement if you want to select
one of many blocks of code to be executed.
switch statement - use this statement if you want to select one of many
blocks of code to be executed.
48
50. break and continue
Statements
There are two special statements that can be used
inside loops:
break.
continue.
Break
The break command will break the loop and
continue executing the code that follows after the
loop (if any).
Continue
The continue command will break the current loop
and continue with the next value.
50
51. Example of break statement
51
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=5;i++)
{if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
Result
The number is 0
The number is 1
The number is 2
52. Example of continue
statement
52
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=5;i++)
{ if (i==3){continue}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
Result
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
54. For….in Statement
Loops through the elements of an array Syntax
For(variable in array)
{
Code to be execute
}
The code in the body of the for…in loop is executed once for each element
54
55. Example
<html>
<body>
<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>
55
56. Functions
A function is a reusable piece of code that will be
executed when called for.
A function can be called from anywhere from within the
page or even from other pages if the function is stored
in an external JavaScript (.js) file.
Functions can be embedded in the <head></head> and
within the<body> </body> tag.
56
57. Predefined functions in JavaScript
DialogBoxes
alert( message)
Displays an alert box with a
message defined by the string
message.
Eg.
alert(“An Error Occurred!”)
57
58. Predefined functions in JavaScript
(contd.)
confirm(message)
When called, it will display the message
and two boxes. One box is "OK" and the
other is "Cancel". If OK is selected, a
value of true is returned, otherwise a
value of false is returned.
Eg.
confirm(“Do you wish to Continue?”)
58
59. Predefined functions in JavaScript
(contd.)
prompt(message)
Displays a box with the
message passed to the function
displayed.
The user can then enter text in
the prompt field, and choose
OK or Cancel.
If the user chooses Cancel, a
NULL value is returned. If the
user chooses OK, the string
value entered in the field is
returned.
Eg:
prompt(“enter your Name”)
59
60. Predefined functions in
JavaScript (contd.)
Conversion Functions
eval(string)
Converts a string to an integer or a float value.
Eg
x=“20”
y=eval(x)+10
y contains the value 30
60
61. Predefined functions in
JavaScript (contd.)
isNaN(value)
If the value passed is not a number then a boolean value of true
is returned else the boolean value of false is returned.
Eg
x=“Samuel”
y=isNaN(x)
The value stored in y is true
61
62. Predefined functions in
JavaScript (contd.)
parseInt(string)
Converts a string to an integer returning the first integer
encountered which is contained in the string.
Eg
x=77AB67
y=parseInt(x)
y stores the value 77
62
63. Predefined functions in
JavaScript (contd.)
parseFloat(string)
Converts a string to an float value .
Eg
x=77.5AB67
y=parseFloat(x)
y stores the value 77.5
63
67. Events
Events are actions that can be detected by JavaScript
Every element on a web page has certain events which trigger
javaScript
Example of events:
A mouse click
A web page or an image loading
Mousing over a spot on the web page
Selecting an input field in an HTML form
Submitting an HTML form
A key stroke
Events are normally used in combination with functions and the function will not be
executed before the event occurs
67
73. Common Event Handlers
(contd.)
onLoad and onUnload
The onload and onUnload events are triggered when the
user enters or leaves the page.
The onload event is also triggered when the image is
loaded.
73
The showstatus() function will be called when a user enters a page
<body onload=“showStatus()”>
74. Common Event Handlers
(contd.)
onFocus, onBlur and onChange
The onFocus, onBlur and onChange events are often used
in combination with validation of form fields.
74
The checkEmail() function will be called whenever the user changes the
content of the field:
<input type="text" size="30" id="email"
onchange="checkEmail()">;
75. Common Event Handlers
(contd.)
onSubmit
The onSubmit event is used to validate ALL form fields
before submitting it.
75
The checkForm() function will be called when the user clicks the submit
button in the form.
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
76. Common Event Handlers
(contd.)
onMouseOver and onMouseOut
onMouseOver and onMouseOut are often used to create
"animated" buttons.
76
An alert box appears when an onMouseOver event is
detected:
<a href="http://www.spi.com" onmouseover="alert('An
onMouseOver event’)”> <img src=“logo.gif" width="100"
height="30"> </a>
77. Handling Errors
The try...catch Statement
The try...catch statement allows you to test a block of code for
errors. The try block contains the code to be run, and the catch
block contains the code to be executed if an error occurs.
Syntax
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
77
78. The example is supposed to
alert "Welcome guest!"
when the button is clicked.
However, there's a typo in
the message() function.
alert() is misspelled as
adddlert(). A JavaScript
error occurs. The catch
block catches the error and
executes a custom code to
handle it. The code displays
a custom error message
informing the user what
happened:
<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.nn";
txt+="Error description: " + err.description +
"nn";
txt+="Click OK to continue.nn";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message"
onclick="message()" />
</body>
</html> 78
79. The Throw Statement
The throw statement allows you to create an
exception. If you use this statement together with
the try...catch statement, you can control program
flow and generate accurate error messages.
Syntax
throw(exception)
The exception can be a string, integer, Boolean or
an object.
79
80. The example determines the value of a variable called x. If the value of x is higher
than 10, lower than 0, or not a number, we are going to throw an error. The error is
then caught by the catch argument and the proper error message is displayed:
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0
and 10:","");
try
{
if(x>10)
{
throw "Err1";
}
else if(x<0)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}
catch(er)
{
if(er=="Err1")
{
alert("Error! The value is too high");
}
if(er=="Err2")
{
alert("Error! The value is too low");
}
if(er=="Err3")
{
alert("Error! The value is not a
number");
}
}
</script>
</body>
</html>
80
81. Defining Arrays
An Array object is used to store a set of values in a single variable
name.
An Array object is created with the new keyword.
An array can be created as:
var MyArray=new Array()
An array can also be created by specifying the array size.
var MyArray=new Array(3)
81
82. Arrays (contd.)
Data can be entered into an array as:
var MyArray=new Array()
MyArray[0]=“Paul”
MyArray[1]=“Sam”
MyArray[2]=“Niel”
Data can also be entered into an array as:
var MyArray=new Array(“Paul”,”Sam”, “Niel”)
82
83. Arrays (contd.)
Accessing Arrays
You can refer to a particular element in an array by
referring to the name of the array and the index number.
The index number starts at 0 .
var MyArray=new Array()
Myarray [0]
83
Editor's Notes
HTML was originally designed as a simple way of presenting information, with the aesthetics of a web page being far less important than the content (and largely being left up to the web browser). Of course, now that the web has become as popular as it has, the presentation of your content has become almost critical to a site’s success. This, among other things, was why CSS was brought in.
One can use another mechacanisim of styling documents by using Inline Style sheets
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
&lt;p style=&quot;color: sienna; margin-left: 20px&quot;&gt; This is a paragraph &lt;/p&gt;
Well-authored CSS also improves the accessibility of web content, allowing access through myriad devices (handheld PDAs for example) and ensuring that web users with disabilities are still able to receive it. It also eliminates the need for browser-specific hacks and tags, which means your site has a better chance of working across all major browsers.
Initially vaguely intimidating, CSS is a well-designed, elegant language. It is hugely important for the future of web design, and has been pivotal in helping designers move away from the problematic, hack-ridden days of presentational HTML tags like &lt;font&gt;, and allowed us to return to using logical, structural elements which make our sites more accessible.
All that, and there are dozens of powerful extra formatting options and possibilities available through stylesheet commands that are not possible through normal HTML. You’ll see these later on when we get on to things like backgrounds, spacing, layers and borders.
font-family: sans-serif/courier/times
Font-size: 20pt
Font-style: italuc/bold//regular
Font-weight: (sets the boldness of the font)
Font-weight : 900
The CSS margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.
Do HTML rules cramp your style? Ever wish you could create your own tag what would behave just like you want? Well you can. Combine the SPAN element with CSS rules to create your own custom tags.
What does SPAN do? Nothing. That&apos;s the beauty of it. Since it has no defined display, you&apos;re free to write your own rules and apply them as you wish.
SPAN is an inline tag, which means that it&apos;s used to format small chunks of text inside another element. In contrast, a paragraph tag is a block-level element that can contain a number of inline elements like bold, italics, strong, and SPAN tags.
JavaScript is a simple scripting language invented specifically for use in web browsers to make websites more dynamic. On its own, HTML is capable of outputting more-or-less static pages. Once you load them up your view doesn&apos;t change much until you click a link to go to a new page. Adding JavaScript to your code allows you to change how the document looks completely, from changing text, to changing colours, to changing the options available in a drop-down list (and much, much more!).
JavaScripts are integrated into the browsing environment, which means they can get information about the browser and HTML page, and modify this information, thus changing how things are presented on your screen. This access to information gives JavaScript great power to modify the browsing experience. They can also react to events, such as when the user clicks their mouse, or points to a certain page element. This is also a very powerful ability.
JavaScript is supported by Netscape 2+, Internet Explorer 3+, Opera 3+ and most of the other modern web browsers. Each new version of the main browsers has supported new generations of JavaScript commands, each more complex than the last.
The two share many similarities. Most prominent of these is that they are both forms of Object-Oriented Programming, or OOP. This means that you work with small objects that are combined together to form larger objects .
Both Java and Java Scripts share similar coding syntaxes.
The Course here deals with CSJS and Core JavaScript
JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.
By entering the document.write command between the &lt;script type=&quot;text/javascript&quot;&gt; and &lt;/script&gt; tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:
If we had not entered the &lt;script&gt; tag, the browser would have treated the document.write(&quot;Hello World!&quot;) command as pure text, and just write the entire line on the page.
You can insert quotation marks inside strings by preceding them with a backslash. This is known as escaping the quotation marks. For example,
var quote = &quot;He read \&quot;The Cremation of Sam McGee\&quot; by R.W. Service.&quot;document.write(quote)
To include a literal backslash inside a string, you must escape the backslash character. For example, to assign the file path c:\temp to a string, use the following:
var home = &quot;c:\\temp&quot;
You can declare a variable as:
var x=“hi”
x=30
The value type can be changed for a variable. Though this is not considered to be good programming.
The &quot;typeof&quot; operator in JavaScript allows you to probe the data type of its operand, such as whether a variable is string, numeric, or even undefined. The below simple example alerts the data type of the variable &quot;myvar&quot;
This special operator is helpful when troubleshooting. It reveals the type of data a variable or literal you are working with is, or the type of data an expression evaluates to. This is important because the type of data you are working with dictates how you are allowed to manipulate that data. Sometimes you will need to convert a type of data to another type, so it is helpful to be able to test the type of a value or expression at different stages of execution in your script. Used in concert with the alert method, an alert box indicating the data type is generated, helping you trouble shoot a problematic script.
Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.
The for Loop
The for loop is used when you know in advance how many times the script should run
To assure that the function is read/loaded by the browser before it is called, it could be wise to put it in the &lt;head&gt; section.
Eval()
It can also evaluate expressions included with a string. In the example, value1 becomes 62. value1 = eval(&quot;124/2&quot;) ,
If x=AB77
parseInt(x) will return NAN
If x=67.7hj76
Parseint(x) will return 67 the floating point will not be taken into consideration
If x=56ABC
parseFloat(x) will return 56
If there are no floating points then the integral value is returned.
The onload event is often used to check the visitor&apos;s browser type and browser version, and load the proper version of the web page based on the information.
Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user&apos;s name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: &quot;Welcome John Doe!&quot;.
Can refer to http://w3schools.com/jsref/jsref_events.asp for a complete reference of event handlers
If you specify numbers or true/false values inside the array then the type of variables will be numeric or Boolean instead of string.
To modify/insert a value in an existing array, just add a new value to the array with a specified index number: