Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
32 views

Introduction To JavaScript-All

This document provides an introduction to JavaScript, including: - JavaScript is a client-side scripting language that allows webpages to become interactive - Scripts can be added between <script> tags and are processed by the browser's JavaScript interpreter - The document object represents the HTML document and has methods like write() to display text - Dialog boxes like alert(), confirm(), and prompt() are used to display messages and get user input

Uploaded by

sliverrae0
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Introduction To JavaScript-All

This document provides an introduction to JavaScript, including: - JavaScript is a client-side scripting language that allows webpages to become interactive - Scripts can be added between <script> tags and are processed by the browser's JavaScript interpreter - The document object represents the HTML document and has methods like write() to display text - Dialog boxes like alert(), confirm(), and prompt() are used to display messages and get user input

Uploaded by

sliverrae0
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

Introduction to JavaScript

Separation of Concerns
Presentation
Styles the Tags

Provides Tags (Elements)


Structure

Functional
Modify the Tags
Fundamentals of Web Programming 2
JavaScript - Introduction
• JavaScript is the programming language of the Web.
• JavaScript is a Client-Side Scripting Language
• It tells the browser to go do the work
• All modern HTML pages are using JavaScript.
• It is the language for HTML, for the Web, for computers,
servers, laptops, tablets, smart phones, and more.
• JavaScript Makes Webpages more interactive
• JavaScript is not the same as Java
• But has various similarities with the programming language
• JavaScript is case sensitive

Fundamentals of Web Programming 3


Your First Script: Displaying a Line of Text with JavaScript
in a Web Page

• We begin with a simple script that displays the text


"Welcome to JavaScript Programming!" in
the HTML5 document.
• All major web browsers contain JavaScript interpreters,
which process the commands written in JavaScript.

Fundamentals of Web Programming 4


Your First Script: Displaying a Line of Text with JavaScript
in a Web Page

Fundamentals of Web Programming 5


Your First Script: Displaying a Line of Text with JS
in a Web Page
The <script> Tag
• In HTML, JavaScript code is inserted between <script>
and </script> tags.
• Old JavaScript examples may use a type attribute:
<script type="text/javascript">. The type attribute is not
required. JavaScript is the default scripting language in
HTML.
• You can place any number of scripts in an HTML
document.
• Scripts can be placed in the <body>, or in the <head>
section of an HTML page, or in both.
Fundamentals of Web Programming 6
Your First Script: Displaying a Line of Text with JS
in a Web Page

Fundamentals of Web Programming 7


Your First Script: Displaying a Line of Text with JS
in a Web Page
• Browser’s document object represents the HTML5 document
currently being displayed in the browser
• Object
• Resides in the computer’s memory and contains
information used by the script
• The term object normally implies that attributes (data)
and behaviors (methods) are associated with the
object
• An object’s methods use the attributes’ data to
perform useful actions for the client of the object—
the script that calls the methods

Fundamentals of Web Programming 8


Your First Script: Displaying a Line of Text with JS
in a Web Page

• The document object’s writeln() method


• Writes a line of HTML5 text in the HTML5 document
• Does not guarantee that a corresponding line of text will
appear in the HTML5 document.
• Text displayed is dependent on the contents of the string
written, which is subsequently rendered by the browser.
• Browser will interpret the HTML5 elements as it normally does
to render the final text in the document
• Using document.write() after an HTML document is loaded,
will delete all existing HTML

Fundamentals of Web Programming 9


Your First Script: Displaying a Line of Text with JS
in a Web Page
<!DOCTYPE html>
<html><head>
<title> JVSCRIPT FIRST PROGRAM </title>
<script >
document.writln("<h1> First JS
prohramming</h1>");
</script>
</head> <body></body></html>

Fundamentals of Web Programming 10


To view errors using google chrome
• Open the browser (Chrome)
• On a blank page
• Right Click on the page and select Inspect
• Go to the tab for Console

Fundamentals of Web Programming 11


Your First Script: Displaying a Line of Text with
JS in a Web Page
• A script can display Welcome to JavaScript
Programming! in many ways.
• Method write displays a string like writeln, but
does not position the output cursor in the HTML5
document at the beginning of the next line after
writing its argument

Fundamentals of Web Programming 12


Modifying Your First Script

The + operator (called the


“concatenation operator”
when used in this
manner) joins two strings
together
Fundamentals of Web Programming 13
Displaying Text in an Alert Dialog
• Dialogs
• Useful to display information in windows that “pop up” on the
screen to grab the user’s attention
• Typically used to display important messages to the user
browsing the web page
• Browser’s window object uses method alert() to display
an alert dialog
• You can skip the window keyword.
• In JavaScript, the window object is the global scope object, which means
that variables, properties, and methods by default belong to the window
object. This also means that specifying the window keyword is optional:
• Method alert requires as its argument the string to be
displayed

Fundamentals of Web Programming 14


Displaying Text in an Alert Dialog

Fundamentals of Web Programming 15


Displaying Text in an Alert Dialog
Escape Sequences
} When a backslash is
encountered in a string of
characters, the next
character is combined with
the backslash to form an
escape sequence. The
escape sequence \n is the
newline character. It
causes the cursor in the
HTML5 document to move
to the beginning of the
next line.
Fundamentals of Web Programming 16
Pop-up Boxes in JS
ALERT
alert("Welcome to the Class");

CONFIRM

confirm("Are you sure you want to take IS-311?");

PROMPT
prompt("What is XML?", ":(");
Returns a value also

Fundamentals of Web Programming 17


Obtaining User Input with prompt Dialogs
• Scripting
• Gives you the ability to generate part or all of a web page’s
content at the time it is shown to the user
• Such web pages are said to be dynamic, as opposed to static,
since their content has the ability to change
• The next script creates a dynamic welcome page that obtains the
user’s name, then displays it on the page.
• The script uses another predefined dialog box from the window
object—a prompt() dialog—which allows the user to enter a value
that the script can use.

Fundamentals of Web Programming 18


Obtaining User Input with prompt Dialogs

Fundamentals of Web Programming 19


Obtaining User Input with prompt Dialogs
• The window object’s prompt() method displays a dialog
into which the user can type a value.
• The first argument is a message (called a prompt) that directs the
user to take a specific action.
• The optional second argument is the default string to display in
the text field.
• Script can then use the
value that the user inputs.

Fundamentals of Web Programming 20


Variables
• JavaScript does not require variables to have a type before they can
be used in a script
• A variable in JavaScript can contain a value of any data type, and in
many situations, JavaScript automatically converts between values
of different types for you
• JavaScript is referred to as a loosely typed language
• When a variable is declared in JavaScript, but is not given a value, it
has an undefined value.
• Attempting to use the value of such a variable is normally a logic error.
• When variables are declared, they are not assigned default values,
unless specified otherwise by the programmer.
• To indicate that a variable does not contain a value, you can assign the value null to
it.

Fundamentals of Web Programming 21


Variables
• Keywords are words with special meaning in JavaScript
• Keyword var
• Used to declare the names of variables
• A variable is a location in the computer’s memory where a value can be stored for
use by a script
• All variables have a name, type and value, and should be declared with a var
statement before they are used in a script
• A variable name can be any valid identifier consisting of letters,
digits, underscores ( _ ) and dollar signs ($) that does not begin
with a digit and is not a reserved JavaScript keyword.
• Declarations end with a semicolon (;) and can be split over several lines, with each
variable in the declaration separated by a comma (forming a comma-separated list of
variable names)
• Several variables may be declared in one declaration or in multiple declarations.

Fundamentals of Web Programming 22


Variables
Syntax value
keyword
var name = 23;
Note: Must be declared before their use in the script
variable name
Rules:
1. Case-sensitive
2. Cannot start with a number
3. Can contain letter, numbers & underscore

Types of Variables
• Numbers: Integers, Decimal Numbers, Negative Numbers
• Text / String: “Use quotations for values”
• Boolean: true / false
• No Value: null (Empty Variable) – Not same as a zero
Fundamentals of Web Programming 23
Example

Fundamentals of Web Programming 24


Strings in JavaScript
• JavaScript strings are for storing and manipulating text.
• A JavaScript string is zero or more characters written inside quotes.
• Escape Character can be used with all stirngs

Quotes
• You can use both ‘single quotes’ and “double quotes”
var str = “This is a sample string”;
var str = ‘This is a sample string’;

• You can use quotes inside a string, as long as they don't match the quotes surrounding
the string
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
Concatenation
Use the “+” operator to join two strings
var x=“Web”;
var y= “Systems”;
document.write(x + “ “+y); Fundamentals of Web Programming 25
Comments
• A single-line comment begins with the characters // and terminates at
the end of the line
• Comments do not cause the browser to perform any action when the
script is interpreted; rather, comments are ignored by the JavaScript
interpreter
• Multiline comments begin with delimiter /* and end with delimiter */
– All text between the delimiters of the comment is ignored by the interpreter.

Fundamentals of Web Programming 26


Arithmetic Operators

The basic arithmetic


operators (+, -, *, /, and %)
are binary operators,
because they each operate
on two operands
Assignment Operators

JavaScript provides the arithmetic assignment operators +=, -=, *=,


/= and %=, which abbreviate certain common types of expressions.
Increment and Decrement Operators
Equality and Relational Operators

Equality operators both have


the same level of
precedence, which is lower
than the precedence of the
relational operators.
The equality operators
associate from left to right.
Comparison Operators in JS

var a = 1; Double equal (==) or weak comparison


var b = “1”; • Check whether the two variables are equal
• If one is string and the other is a number, forcefully
if(a==b) //true converts them both to the same type.

var a = 1; Triple equal (===) or strong comparison


var b = “1”; • Compares both the values and their data types

if(a===b) //false

Fundamentals of Web Programming 31


Conditional Statement
SYNTAX
• If Statement
keyword
• execute some code only if a specific
condition is met. if (something is the case)
• Else If Statement {
more JavaScript commands
• Various conditions that are checked }
one after another until the script
finds a true condition
• Else Statement
• If none of the above conditions are
met, this block of code is executed.

Fundamentals of Web Programming 32


Conditional Statement
• Switch Statement
• Select one of many blocks of code to be executed

SYNTAX

switch(test) The condition


{ for switch can
case 1: execute code block 1 be a “number”
keywords break; or a “string”.
case 2: execute code block 2
break;
default: default code
}
Fundamentals of Web Programming 33
Boolean Conditions
• Combine Multiple conditions in the IF
statement

AND (&&) True when both elements are true


OR (||) True when at least one of the elements is true
NOT (!) Toggles a statement from true to false or from false to
true

Fundamentals of Web Programming 34


• Initial Value; Test Condition; Update Value
Looping Statement
• For Statement
• execute some code repeatedly SYNTAX
keyword
• While Statement
• Convenient when you want to loop until a
condition changes for (initialize; condition; update)
{
• Do Statement more JavaScript commands
• Useful when you always want to execute }
the loop at least once
Initialize outside Initialize outside
keyword keyword

do while (condition)
{ {
more JavaScript commands more JavaScript commands
update inside update inside
} while (condition); }
Fundamentals of Web Programming 35
Example 2

Fundamentals of Web Programming 36


Example 3

Fundamentals of Web Programming 37


Example 3

Fundamentals of Web Programming 38


Example 3

Fundamentals of Web Programming 39


JavaScript Location

<input type=“button” onclick="alert(‘Hello');“/> Inline

<script type=“text/javascript”>
//Code goes here Internal
</script>

<script type=“text/javascript” src=“jsfile.js”></script> External jsfile.js

Fundamentals of Web Programming 40


JavaScript Location – Inline

<button onclick=“alert(‘Welcome’);" >Click Here</button>

Event (can be other events too like onblur ……)

Note: Cannot write longer JS statements / complete code

Fundamentals of Web Programming 41


JavaScript Location – Internal
Optional in HTML5

<script type=“text/javascript”>

alert(‘Welcome’);

</script>

Fundamentals of Web Programming 42


JavaScript Location inside HTML
<html>
<head>
<title>JavaScript Location</title>
<script type=“text/javascript”>
In the Head
</script> Functions are loaded before the buttons,
</head> links or other things that call them are
<body> loaded

<script type=“text/javascript”>
In the Body
</script> Functions that needs running after the
</body> whole page (body) of the HTML is loaded
</html> Fundamentals of Web Programming 43
JavaScript Location – External
script.js
function test()
{
alert(‘Hello’);
}
Inside the head
or the body tag

<html>
<head>
<script src=“script.js”></script>
</head>
<body>
</body>
</html>

Fundamentals of Web Programming 44


Summary
• Variables
• Data Types
• String Functions
• Operators
• Statements
• Assignment Statements
• Conditional Statements (if, else, switch)
• Looping Statements (for, while, do-while)
• JavaScript Location in HTML

You might also like