Course Instructor: Afraa Sayah Prepared By: Sarah Alfayez College of Computer Science & Engineering University of Hail, Saudi Arabia 201803

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

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

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>

Javascript Methods
 Window.alert(“message”)
 Window.write(“text”)
 Window.prompt(“sometext”, “default text”)
 Window.confirm(“text”)

<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

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


JavaScript Statements
var syntax:
Comma-separated declaration list with
optional initializers
Java-like keyword statements:

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>
var ans = 0;
var firstnum = 0;
var secondnum = 0;
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>
I could have given whattodo and
var ans = 0;
initial value of space (written as
var firstnum = 0;
“ “).
var secondnum = 0;
var whattodo;
whattodo = prompt("Enter * or /","");
if (whattodo == "*")
{
Note the = = when I am making
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

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();
});

Example
//slideToggle
$("#parent-list").click(function(){
$("#list").slideToggle();
});
//fadeToggle
$("img").click(function(){
$("img").fadeToggle("slow");
});

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)

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>
$(form).validate({
rules: { fieldName: ..
},
messages:{ filedName:
}
});

$("#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.

Course Instructor: Afraa Sayah Prepared By: Sarah Alfayez College of Computer Science & Engineering University of Hail, Saudi Arabia 201803

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Course Instructor: Afraa Sayah Prepared By: Sarah Alfayez College of Computer Science & Engineering University of Hail, Saudi Arabia 201803

Загружено:

Авторское право:

Доступные форматы

Course Instructor: Afraa Sayah

Prepared by: Sarah Alfayez

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides

JavaScript is a scripting language: designed

SWE 444:: based on Jeffrey C. Jackson’s slides

Note that JavaScript code did not need to be

SWE 444:: based on Jeffrey C. Jackson’s slides

SWE 444:: based on Jeffrey C. Jackson’s slides

Two approaches to client side scripting:

 embedded in the <head> section

A separate file linked to the HTML document

 Specifies the type of file and the scripting language use:

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides

Type of a variable is dynamic: depends on the type

SWE 444:: based on Jeffrey C. Jackson’s slides

Syntax rules for names (identifiers):

SWE 444:: based on Jeffrey C. Jackson’s slides

SWE 444:: based on Jeffrey C. Jackson’s slides

Java-like keyword statements:

SWE 444:: based on Jeffrey C. Jackson’s slides

JavaScript Arithmetic Algebraic

Operator(s) Operation(s) Order of evaluation (precedence)

Always use parentheses to ensure desired order of evaluation: (a + b) / 6

Standard algebraic JavaScript equality Sample Meaning of

The only change here is in the

 jQuery is Javascript library that is fast, small, and feature-

To start with jQuery, follow these steps:

var main= function( ){

ready means: when all the HTML document

An event is an action that the visitor of the

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides

Var main= function( ){

Note: Any selector can be used

Hide  $(selector).hide( ); it will hide

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides

There are three DOM manipulation methods:

Get Val( )  return the value of the selector

$(selector).append( );  insert content at the

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides

Remove  it will remove (delete) a set of

Before you end you body tag add the jQuery

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides

Use the following link to check your

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides

Вам также может понравиться