Scribd
Upload
53 views

Javascript 101: Vishal Kurup

Here are some options to consider: - Use HTML5 form validation attributes like required, min, max etc. These will validate even without JavaScript. - Submit form to server and do validation there with server-side languages like PHP. Return errors. - Provide informative messages to users to enable JavaScript for full functionality. - Degrade functionality gracefully. Allow basic submissions without validation if JavaScript is off. So in summary, always have fallback options if JavaScript is disabled to prevent broken experiences. Combine HTML5, server-side validation and graceful degradation.

Uploaded by

Jen Briones
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

Javascript 101: Vishal Kurup

Here are some options to consider: - Use HTML5 form validation attributes like required, min, max etc. These will validate even without JavaScript. - Submit form to server and do validation there with server-side languages like PHP. Return errors. - Provide informative messages to users to enable JavaScript for full functionality. - Degrade functionality gracefully. Allow basic submissions without validation if JavaScript is off. So in summary, always have fallback options if JavaScript is disabled to prevent broken experiences. Combine HTML5, server-side validation and graceful degradation.

Uploaded by

Jen Briones
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

JavaScript 101

Vishal Kurup
What is JavaScript?
• Is a dialect of ECMAScript
• A lightweight, easy to learn Object Oriented 
Programming language
• Is a client‐side language
• Is versatile – Can be inserted into any page 
(regardless of extension)
• Doesn’t require a special license
• Not the same as Java
What is it used for?
• For adding dynamic content to web pages
• For carrying actions based on events
• Validate data (forms)
• Browser detection
• Slideshows, Image Effects and much more
Basic form of a JavaScript block
<script type = “text/javascript”>
<!‐‐
Do something/code
//‐‐>
</script>

• Note: JavaScript is case‐sensitive (X is not equal 
to x)
• JavaScript ignores whitespace
Where is JavaScript code placed?
• In the <head></head> section of your page
• In the <body></body> section of your page
• What’s the difference?
• External Files (.js extension)
Variable Declaration in JavaScript
<script type = “text/javascript”>
var variable1;
var variable2 = 5;
var variable2;
variable 3;
</script>
Operators
• Arithmetic Operators
• Assignment Operators
• (Boolean) Comparison Operators
• Logical Operators
Arithmetic Operators
• + (Addition)
• ‐ (Subtraction)
• * (Multiplication)
• /  (Division)
• %  (Modulus)
• ++ (Increment)
• ‐‐ (Decrement)
Addition Operator & Strings
• You can actually use the addition (+) operator 
to add two lines of text
• Example:
var audience = “WLG”;
document.write(“Hello” +  audience + “members!”);
Assignment Operators
• (x = 5)
• (x += 5) same as x = x+5
• (x ‐= 5) same as x = x‐5
• (x *= 5) same as x = x * 5
• (x /= 5) same as x = x/5
• (x %= 5) same as x = x%5
Comparison Operators
• == 
• ===
• !=
• >
• <
• >=
• <=
Logical Operators
• &&
• ||
• !
Conditional Statements
• if
• if…else
• if…else if…else
if statements
if (x > 5)
{
code to be executed;
}
if...else statements
if (x > 5)
{
execute this code;
}
else
{
execute this code instead;
}
if...else if…else
if (x > 5)
{
execute this code;
}
else if (x > 4)
{
execute this code;
}
else 
{
execute this code;
}
Loops
• Useful if you want to repeat code execution
• for loops
• while loops
• do…while loops
for loop
for(i = 0; i < 10; i ++)
{
document.write (i);
}

Output: 0123456789
while loop
var x = 6;
while (x > 1)
{
document.write(x);
x‐‐;
}

Output: 65432
do…while loop
var x = 5;
do
{
document.write(x);
x‐‐;
}
while (x > 1);
Functions
• A good way to break your program/code into a 
smaller segment that does a specific thing.
• Where you place JavaScript code that you 
want to execute only when called.
• Begins with the keyword “function”
Function ‐ Example
function checkvalue(parameters)
{
if (x < 10)
{ 
document.write(“The value of x is “ + 10);
}
}
Pop‐Up Boxes
• alert (“your text”)
• confirm (“your text”) 
//OK = True, Cancel = False
• prompt (“your text”)
//Input value or null
Objects
• An object is a "package" of data; a collection of 
values and functions all classed under a single 
name. – (Aaron Weiss)
• Objects have properties
• Objects have methods
• JavaScript has built‐in objects and also allows you 
to define your own object.
• e.g. the document object
• document.URL
• document.getElementById()
Objects – Properties (Examples)
• Image.src
//Sets or Returns the URL of the image
• String.length
//Returns the length of a given string
• Document.URL
//Returns the full URL of the current 
document
Objects – Method Examples
• Window.setTimeout();
//Call a function or evaluate an expression 
after a specified # of milliseconds
• Date.getDay();
//Gets the day of the week (0‐6)
• String.toUpperCase();
Form Validation
A basic example: basic‐validation.html
Form Validation
An intermediate example: form‐validation.html
A Simple Slideshow
• Slideshow.html
JavaScript Tip
• The HTML <noscript> tag
<script type = “text/javascript”>
var variable1 = “Welcome to my site”;
document.write(variable1);
</script>
<noscript>
You have JavaScript turned off! The force is not strong with you!
</noscript>
Validation without JavaScript
• Q. What happens to my form validation if 
JavaScript is turned off?

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy