5/3/2019"> 5/3/2019">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

Software Engineering for Internet Applications

Published byมาณี วอชิงตัน Modified over 5 years ago

Similar presentations

Presentation on theme: "Software Engineering for Internet Applications"— Presentation transcript:

1 Software Engineering for Internet Applications
JavaScript ADF 5/3/2019

2 JavaScript JavaScript is a lightweight, interpreted programming language. It is designed for creating network-centric applications <html> <body> <script language="javascript" type="text/javascript"> <!-- document.write("Hello World!") //--> </script> </body> </html> 5/3/2019

3 Advantages of JavaScript
Less server interaction You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server. Immediate feedback to the visitors They don't have to wait for a page reload to see if they have forgotten to enter something. Increased interactivity You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard. Richer interfaces You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors. 5/3/2019

4 Limitation of JavaScript
Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason. JavaScript cannot be used for networking applications because there is no such support available. JavaScript doesn't have any multithreading or multiprocessor capabilities. 5/3/2019

5 JavaScript Syntax <script language="javascript" type="text/javascript"> <!-- var1 = 10 var2 = 20 //--> </script> <script language="javascript" type="text/javascript"> <!-- var1 = 10; var2 = 20; //--> </script> 5/3/2019

6 JavaScript Placement in HTML file
Script in <head>...</head> section. Script in <body>...</body> section. <head> <script type="text/javascript"> <!-- function sayHello() {alert("Hello World")} //--> </script> </head> <body> <script type="text/javascript"> <!-- document.write("Hello World") //--> </script> </body> 5/3/2019

7 JavaScript Placement in HTML file
Script in <body>...</body> and <head>...</head> sections. Script in an external file and then include in <head>...</head> section. <head> <script type="text/javascript" src=“url/scriptfile.js" ></script> </head> function sayHello() { alert("Hello World") } scriptfile.js 5/3/2019

8 JavaScript Variables JavaScript is untyped language.
JavaScript variable can hold a value of any data type. The value type of a variable can change during the execution of a program and JavaScript takes care of it automatically Datatype in JavaScript Numbers Strings Boolean Null Undefined 5/3/2019

9 JavaScript Variables Variable declaration / initialization
<script type="text/javascript"> <!-- var name = "Ali"; var age; var money; money = ; //--> </script> 5/3/2019

10 JavaScript Variables Global and Local Variables
<script type="text/javascript"> <!-- var myVar = "global"; // Declare a global variable function checkscope( ) { var myVar = "local"; // Declare a local variable document.write(myVar); } //--> </script> 5/3/2019

11 JavaScript Flow Control
<script type="text/javascript"> <!-- if (expression 1){ Statement(s) to be executed if expression 1 is true } else if (expression 2){ Statement(s) to be executed if expression 2 is true else{ Statement(s) to be executed if no expression is true //--> </script> <script type="text/javascript"> <!-- switch (expression) { case condition 1: statement(s) break; case condition 2: statement(s) ... case condition n: statement(s) default: statement(s) } //--> </script> 5/3/2019

12 JavaScript Loop <script type="text/javascript"> <!--
while (expression){ Statement(s) to be executed if expression is true } //--> </script> <script type="text/javascript"> <!-- do{ Statement(s) to be executed; } while (expression); for (initialization; test condition; iteration statement){ Statement(s) to be executed if test condition is true } //--> </script> 5/3/2019

13 JavaScript Function <script type="text/javascript"> <!--
function functionname(parameter-list){ statements } //--> </script> <script type="text/javascript"> <!-- function helloWorld() { alert("Hello world"); } //--> </script> 5/3/2019

14 JavaScript Function ... <body>
<p>Input your name and age</p> <form id="frm1"> Name : <input type="text" name="name"> Age : <input type="text" name="age"> <input type="button" onclick="sayHello('Budi')" value="Say Hello"> </form> </body> </html> 5/3/2019

15 JavaScript Function <html> <head>
<script type="text/javascript"> function sayHello(sender){ var form = document.getElementById("frm1"); var name = form.elements["name"].value; var age = form.elements["age"].value; document.write ("hello " + name + ". You are " + age + " years old."); document.write ("from : " + sender); } </script> </head> ... 5/3/2019

16 JavaScript Events Action that occur when the user or the browser manipulates a page Types of event onclick Event Type onsubmit Event type onMouseover and onMouseout HTML 5 Standard Events etc 5/3/2019

17 JavaScript Object JavaScript is an Object Oriented Programming (OOP) language. It provides Encapsulation Aggregation Inheritance Polymorphism Objects are composed of attributes. If an attribute contains a function, it is considered to be a method of the object, otherwise the attribute is considered a property. 5/3/2019

18 Object Properties Adding property to an object
objectName.objectProperty = propertyValue; Get value from a property of an object var value = objectName.objectProperty; Executing object methods objectName.objectMethod(parameters); 5/3/2019

19 User-defined Object New operator Object() constructor
var employee = new Object(); var books = new Array("C++", "Perl", "Java"); var day = new Date("August 17, 1945"); <script type="text/javascript"> var book = new Object(); // Create the object book.subject = "Perl"; // Assign properties to the object book.author = "Mohtashim"; </script> 5/3/2019

20 Object() constructor <html> <head>
<title>User-defined objects</title> <script type="text/javascript"> var student = new Object(); // Create the object student.name = "Danu"; // Assign properties to the object student.ids = "1131"; </script> </head> <body> document.write("student name is : " + student.name + "<br>"); document.write("student id is : " + student.ids + "<br>"); </body> </html> 5/3/2019

21 Object() constructor <html> <head>
<title>User-defined objects</title> <script type="text/javascript"> function student(name, ids) { this.name = name; this.ids = ids; } </script> </head> <body> var mystudent = new student("Danu", "1131"); document.write("student name is : " + mystudent.name + "<br>"); document.write("student id is : " + mystudent.ids + "<br>"); </body> </html> 5/3/2019

22 Defining Method <html> <head>
<title>User-defined objects</title> <script type="text/javascript"> function addSubject(subject){// Define a function which will work as a method this.sub = subject; } function student(name, ids) { this.name = name; this.ids = ids; this.addSubject = addSubject; // Assign that method as property. </script> </head> <body> var mystudent = new student("Danu", "1131"); mystudent.addSubject('Calculus'); document.write("student name is : " + mystudent.name + "<br>"); document.write("student id is : " + mystudent.ids + "<br>"); document.write("student subject : " + mystudent.sub + "<br>"); </body> </html> 5/3/2019

23 Question?

24 Home Task Create a form to submit a person data with at least 5 input
At least there must be : ID, , birthdate The inputs will be formed in an object create a method to calculate the age of the person Create a form validation in each required input and show and alert if the input format was wrong Example : wrong ID format, data format validation 5/3/2019

25 Home Task When the form is submitted, display the result of the submitted data in target page, and in about seconds redirect the page to igracias.telkomuniversity.ac.id 5/3/2019

26 5/3/2019

Download ppt "Software Engineering for Internet Applications"

Similar presentations

1 What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight.

1 What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight.
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.

JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Java Script Session1 INTRODUCTION.

Java Script Session1 INTRODUCTION.
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr

2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
Introduction to JavaScript. Aim To enable you to write you first JavaScript.

Introduction to JavaScript. Aim To enable you to write you first JavaScript.
Forms and Java script. Forms The graphical user interface -textbox, radio, button, textarea, checkbox… The processing script –CGI scripts, Perl script,

Forms and Java script. Forms The graphical user interface -textbox, radio, button, textarea, checkbox… The processing script –CGI scripts, Perl script,
JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript.

JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.

JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
JavaScript Part 1.

JavaScript Part 1.
1 JavaScript. 2 What’s wrong with JavaScript? A very powerful language, yet –Often hated –Browser inconsistencies –Misunderstood –Developers find it painful.

1 JavaScript. 2 What’s wrong with JavaScript? A very powerful language, yet –Often hated –Browser inconsistencies –Misunderstood –Developers find it painful.
CISC474 - JavaScript 03/02/2011. Some Background… Great JavaScript Guides: – https://developer.mozilla.org/en/JavaScript/Guide https://developer.mozilla.org/en/JavaScript/Guide.

CISC474 - JavaScript 03/02/2011. Some Background… Great JavaScript Guides: –
What is Java Script? An extension to HTML. An extension to HTML. Allows authors to incorporate some functionality in their web pages. (without using CGI.

What is Java Script? An extension to HTML. An extension to HTML. Allows authors to incorporate some functionality in their web pages. (without using CGI.
Javascript. Outline Introduction Fundamental of JavaScript Javascript events management DOM and Dynamic HTML (DHTML)

Javascript. Outline Introduction Fundamental of JavaScript Javascript events management DOM and Dynamic HTML (DHTML)
Introduction to JavaScript Gordon Tian 408-668-5680 1.

Introduction to JavaScript Gordon Tian
Client Side Programming with JavaScript Why use client side programming? Web sides built on CGI programs can rapidly become overly complicated to maintain,

Client Side Programming with JavaScript Why use client side programming? Web sides built on CGI programs can rapidly become overly complicated to maintain,
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.

INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT Session 2: What is JavaScript?

TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT Session 2: What is JavaScript?
Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,

Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,
Introduction.  The scripting language most often used for client-side web development.  Influenced by many programming languages, easier for nonprogrammers.

Introduction.  The scripting language most often used for client-side web development.  Influenced by many programming languages, easier for nonprogrammers.
1 JavaScript

1 JavaScript

Similar presentations

Ads by Google