Course Instructor: Afraa Sayah
Prepared by: Sarah Alfayez
College of Computer Science & Engineering
University of Hail, Saudi Arabia
201803
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
JavaScript Properties
JavaScript is a scripting language: designed
to be executed within a larger software
environment
JavaScript can be run within a variety of
environments:
Web browsers (client-side java script)
Web servers (server-side java script)
SWE 444:: based on Jeffrey C. Jackson’s slides
JavaScript Properties
Note that JavaScript code did not need to be
compiled
JavaScript is an interpreted language
browser software that reads and executes
JavaScript is an interpreter
Interpreted vs. compiled languages:
Advantage: simplicity or easy
Disadvantage: efficiency
SWE 444:: based on Jeffrey C. Jackson’s slides
Developing JavaScript
Software
Writing JavaScript code
Any text editor (e.g., Notepad)
Specialized software (e.g., MS Visual InterDev)
Executing JavaScript
Load into browser (need HTML document)
Browser detects syntax and run-time errors
Mozilla: JavaScript console lists errors
IE6: Exclamation icon and pop-up window
SWE 444:: based on Jeffrey C. Jackson’s slides
Scripting
Two approaches to client side scripting:
Internal:
Written in the <body> section of a document
embedded in the <head> section
External:
A separate file linked to the HTML document
Scripting
<script> tag
Indicate that the text is part of a script
type attribute
Specifies the type of file and the scripting language use:
Value: “text/javascript”
Scripting Options
<html>
<head>
<script src="xxx.js"></script> 1
<script type="text/javascript”> 2
</script>
</head>
<body>
<script type="text/javascript”> 3
</script>
<script src="xxx.js"></script> 4
</body>
</html>
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Javascript Methods
Window.alert(“message”)
Window.write(“text”)
Window.prompt(“sometext”, “default text”)
Window.confirm(“text”)
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
<html>
<script language="JavaScript">
document.write("Hello World!");
alert("Hello World!");
</script>
</html>
Variables and Data Types
Type of a variable is dynamic: depends on the type
of data it contains
JavaScript has six data types:
Number
String
Boolean (values true and false)
Object
Null (only value of this type is null)
Undefined (value of newly created variable)
Primitive data types: all but Object
SWE 444:: based on Jeffrey C. Jackson’s slides
Variables and Data Types
Syntax rules for names (identifiers):
Must begin with letter or underscore ( _ )
Must contain only letters, underscores, and digits
(or certain other characters)
Must not be a reserved word
SWE 444:: based on Jeffrey C. Jackson’s slides
Variables and Data Types
SWE 444:: based on Jeffrey C. Jackson’s slides
JavaScript Statements
var syntax:
Comma-separated declaration list with
optional initializers
Java-like keyword statements:
SWE 444:: based on Jeffrey C. Jackson’s slides
Arithmetic Operators and order of evaluation
JavaScript Arithmetic Algebraic
x JavaScript
--
operation operator expression
y expression
Addition + f+7 f + 7
Subtraction - p–c p - c
Multiplication * bm b * m
Division / x / y or or xy x / y
Remainder % r mod s r % s
Fig. 7.12 Arithmetic operators.
Operator(s) Operation(s) Order of evaluation (precedence)
*, / or % Multiplication Evaluated first. If there are several such operations,
Division they are evaluated from left to right.
Modulus
+ or - Addition Evaluated last. If there are several such operations,
Subtraction they are evaluated from left to right.
Fig. 7.13 Precedence of arithmetic operators.
Always use parentheses to ensure desired order of evaluation: (a + b) / 6
Relational (Inequality and Equality) Operators
Standard algebraic JavaScript equality Sample Meaning of
equality operator or or relational JavaScript JavaScript
relational operator operator condition condition
Equality operators
= == x == y x is equal to y
? != x != y x is not equal to y
Relational operators
> > x > y x is greater than y
< < x < y x is less than y
>= x >= y x is greater than or
equal to y
<= x <= y x is less than or
equal to y
Fig. 7.15 Equality and relational operators.
Do NOT confuse relational equality operator “==“ with an assignment operator “=“
Order of Precedence for the
Basic Operators
highest
Operators Associativity Type
* / % left to right multiplicative
+ - left to right additive
< <= > >= left to right relational
== != left to right equality
lowest = right to left assignment
Fig. 7.17 Precedence and associativity of the
operators discussed so far.
The JavaScript var (for variable) can be
<html> used to define a field (note that you can
<script language="JavaScript"> eliminate the command var and it will still
var ans = 0; work). In this example, I have defined
var firstnum = 0; three variables and given them all an
initial value of 0.
var secondnum = 0;
firstnum = prompt("Enter the first number",0);
secondnum = prompt("Enter the second number",0);
ans = firstnum * secondnum;
document.write(ans); The prompt can be used to take in
</script> data. The message in quotes is
</html> used to ask the user for input and
the 0 indicates it is numeric input.
Note that the data that was keyed in
ans = firstnum * with the first prompt was assigned
to firstnumand the data that was
secondnum; keyed in with the second prompt
This takes the two numbers was assigned to secondnum.
stored in firstnum and document.write(ans);
secondnum and multiplies
them together. The results are I am now using the write method
stored in ans. to put ans to the screen. Note
that ans is a variable, not a literal
so it is not enclosed in quotes.
<html>
<script language="JavaScript">
var ans = 0;
var firstnum = 0;
var secondnum = 0;
firstnum = prompt("Enter the first number",0);
secondnum = prompt("Enter the second number",0);
ans = firstnum * secondnum;
document.write("The answer is ", ans);
</script>
</html>
The only change here is in the
document.write where I am writing the
literal “The answer is ” and then the
variable answer, ans. Note that I
separated the literal and the variable with
a comma.
<html>
<script language="JavaScript">
I could have given whattodo and
var ans = 0;
initial value of space (written as
var firstnum = 0;
“ “).
var secondnum = 0;
var whattodo;
firstnum = prompt("Enter the first number",0);
secondnum = prompt("Enter the second number",0);
whattodo = prompt("Enter * or /","");
if (whattodo == "*")
{
Note the = = when I am making
ans = firstnum * secondnum;
the check for is equal to.
}
else
{
ans = firstnum / secondnum;
}
document.write("The answer is ", ans);
</script>
</html>
More about Javascript
Go to
https://www.w3schools.com/js/default.asp
To learn more about the language
jQuery
jQuery is Javascript library that is fast, small, and feature-
rich. (Write less, do more)
It is mostly used for document traversal and
DOM(Document Object Model) manipulation, event handling,
CSS manipulation, form validation, and effects and animation.
jQuery makes it easier to use Javascript in a web application.
jQuery
To start with jQuery, follow these steps:
1. Create a folder in your project name js and create
a file and name it app.js
2. In your index.html at the end of the body tag
include the following script tags:
<script src="https://code.jquery.com/jquery-
3.3.0.min.js"></script>
<script src="js/app.js"></script>
jQuery Synatx
Basic Syntax:
$(Selector).action( );
o $ to access jQuery
o Selector to find the HTML element
o action to be performed on the selector
The selector might be:
Tag $(“h1”).action( );
Class $(“.className”).action( );
Id $(“#idName”).action( );
First jQuery
var main= function( ){
Window.alert(“Hello SWE444 Students”);
};
$(document).ready(main);
ready means: when all the HTML document
has been loaded, go to function main
For a complete list of the selectors please visit:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp
jQuery Events
An event is an action that the visitor of the
website perform and the web page can respond
Mouse events (click, dbclick)
Keyboard events (keypress)
Form events (submit, change)
The most important event is the click event
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Click Event
Var main= function( ){
$(“#idName”).click(function( ){
//Any Action
)}
};
$(document).ready(main);
Note: Any selector can be used
jQuery Effects
Hide $(selector).hide( ); it will hide
specific element from the html
Show $(selector).show( ); it will show a
specific element from the html
fadeToggle $(selector).fadeToggle();
slideToggle $(selector).slideToggle(); it
will display or hide the element with a sliding
motion
Example
$("#a1").click(function(){
$("#home").hide();
$("#faq").hide();
$("#list").hide();
$("#signup").show();
});
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Example
//slideToggle
$("#parent-list").click(function(){
$("#list").slideToggle();
});
//fadeToggle
$("img").click(function(){
$("img").fadeToggle("slow");
});
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
jQuery DOM Manipulation
There are three DOM manipulation methods:
1. Text() set or return the text in the
selected element (only text)
2. Html() set or return the content of a
selected element (with tags)
3. Val() set or return the value of form
fields
The most important one is the val( ) method
Get, set val( )
Get Val( ) return the value of the selector
from the from
$(selector).val( );
Set Val( ) assign a value to the selector in
the form
$(selector).val(“hello”);
jQuery Add
Append
Prepend
Before
After
jQuery Add
$(selector).append( ); insert content at the
end (after an element)
$(selector).prepend( ); insert content at
the beginning (before an element)
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
jQuery Remove
Remove it will remove (delete) a set of
matched elements from the DOM
$("img").remove();
jQuery CSS
Single modification:
$(selector).css(“propertyname”, “value”);
Multiple Modifications:
$(selector).css({“propertyname”: “value”,
“propertyname”: “value”, …);
Example:
$("#s1").css({"background-color": "yellow",
"color": "green"});
jQuery Form Validation
Before you end you body tag add the jQuery
Form Validation Plugin as follows.
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.valid
ate/1.17.0/jquery.validate.min.js"></script>
jQuery Form Validation
$(form).validate({
rules: { fieldName: ..
},
messages:{ filedName:
}
});
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
jQuery Form Validation
$("#form2").validate({ password2:{
rules: { required: true,
email:{ equalTo: "#pass"
required: true, } },
email: true messages:{
}, email:{
username: "required", required: 'enter your
password: { email',
required: true, email: 'enter a valid
email’ },
minlength: 8,
username: 'please
maxlength: 12
write your username',
},
password: 'required’,
} });
JSHint
Use the following link to check your
JavaScript code
http://jshint.com/
However, you need to configure it to accept
jQuery by clicking the configure and then tick
on jQuery.
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
