Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community
Ask the community for help and clear up your study doubts
University Rankings
Discover the best universities in your country according to Docsity users
Free resources
Our save-the-student-ebooks!
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
JavaScript: Understanding Client-Side Scripting with Javascript, Slides of Computer Science
An overview of javascript, its advantages and disadvantages, and how to use it to add html tags, write code and blocks, use operators, and handle events. It also covers the document object model and compares it to server-side scripting.
Typology: Slides
2012/2013
1 / 51
Related documents
Partial preview of the text
Download JavaScript: Understanding Client-Side Scripting with Javascript and more Slides Computer Science in PDF only on Docsity! docsity.com CONTENTS
© Introduction to java script
PCM oe CROC HA oem CVC ela lele
© Data object model
© Event modeling
OS woes te Cera vt ol etal
© Scripting methods
e PHP
e GET METHOD and POST METHOD
© PHP variables and control structures.
Advantages of javascript Speed :‐ being client side, javascript is very fast because any code functions can be run immediately instead of having to contact to the server and wait for an answer. Simplicity :‐ javascript is relatively simple to learn and implement. Versatility :‐ javascript plays nicely with other languages and be used in a huge variety of applications. Server Load :‐ being client –side reduces the website server. Easy to debug and testing No special editor is required for it. docsity.com Disadvantages of Javascript Security :‐ as the code executes the user`s computer, in some cases it can be exploited for malicious purpose. Relying on End User :‐ Javscript is sometimes interpreted differently by different browsers . Where as server side script will always produce the same output, client side scripts can be a little predictable docsity.com How to add HTML tags
to the javascript
e To insert a javascript into an HTML
page, we use the <script> tag
e Inside the <script> tag we use the type
attribute to define the scripting
language.
JavaScript Comments
e Single line comment start with //
e Example //write a heading
e Javascript multiple line comments start with /* and
end with*/.
e Example /*the code will write one heading and two
pragraphs.*/
docsity.com
Javascript operators
e Arithmetic operators
e Assignment operators
e Comparison operators
© Logical operators
© Conditional operator
docsity.com
Arithmetic operators : Y=5 OPERATOR DESCRIPTION EXAMPLE RESULT + ADDITION X=Y+2 X=7 _ SUBTRACTION X=Y‐2 X=3 * MULTIPLICATION X=Y*2 X=10 / DIVISION X=Y/2 X=2.5 % MODULUS X=Y%2 X=1 ++ INCREMENT X=++Y X=6 _ DECREMENT X=_Y X=4 docsity.com Logical Operators:X=6,Y=3 OPERATOR DESCRIPTION EXAMPLE && AND (X<10&& Y > 1) IS TRUE || OR (X==5 || Y==5) IS FALSE) ! NOT !(X==Y) IS TRUE docsity.com Alert Box:
e An alert box is often used if you want to make sure
information comes through to the user.
e When an alert box pops up, the user will have to click
“OK” to proceed.
e Syntax :
alert(“sometext”);
docsity.com
Confirm Box: A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either “OK” or “cancel’ to proceed. If the user clicks “OK”, the box returns true. If the user clicks “cancel”, the box returns false. Syntax : confirm(“sometext”); docsity.com Example of function
<html>
<head>
<script type =“text/JavaScript”>
function displaymessage()
{
alert(“hello friends”);
}
</script>
</head>
<body >
<form>
< input type=“button” value=“click me!”
Onclick=“display message()”/>
</form>
</body>
</html>
docsity.com
The return statement
e The return statement is used to specify the value that is returned from thr
functions.
e Therefore the functions that are going to return a value must use the return
statement.
Example
<html>
<head>
<script type =“text/JavaScript”>
pore product(a,b)
returna*b;
}
</script>
</head>
<body>
<script type =“text/JavaScript”>
document.write(product(5,10));
docsity.com
JavaScript events Events are the beating heart of any JavaScript application. This gives us an overview of what event handling is , what its problems are and how to write proper cross‐browser scripts Without events there are no scripts. Whenever a user of JavaScript takes action , he causes an event. docsity.com Document Object Model The document object model is an application programming interface(API) for valid HTML and well – formed XML documents. It defines the logic structure of documents and the way a document is accessed and manipulated. With the Document Object Model , programmers can build documents , navigate their structure and add, modify , or delete elements and contents. docsity.com Ant thing found in an HTML or XML document can be accessed , changed , deleted or added using the Document Object Model, with few exceptions. One important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications. It is designed to be used with any programming language . The DOM is programming API for documents . docsity.com Example We have a one HTML Table which is given below :‐ <TABLE> <TBODY> <TR> <TD>Shady Grove</TD> </TR> <TR> <TD>Dorian</TD> </TR> </TBODY> </TABLE> docsity.com Scripting Methods Any scripting language can generate web pages through CGI or an extension module or application server framework. 1. ASP :‐ active server pages (ASP) is Microsoft `s server script engine for dynamically generated web pages. 2. ASP.NET :‐ It is a set of web application development technologies marketed by Microsoft. 3. COLDFUSION :‐Cross platform tag‐based commercial server side scripting system. 4. ESP:‐ It is a server‐side scripting language that is designed to provide an easy interface to database contents. docsity.com 5. JSP :‐ A Java – based system for embedding Java – related code in HTML pages.. JSP`s are compiled into Java servlets by a JSP compiler. 6. LASSO :‐ LASSO is a data source neutral interpreted programming language and cross platform server. LASSO is developed by Lassosoft, LLC. 7. PHP:‐ PHP is a reflective programming language originally designed to produce dynamic web pages. 8. Server Side JavaScript :‐ it refers to Javascript that returns on server –side. 9. SMX:‐SMX is a macro processing language shipped with the Internet Factory`s Commerce Builder software. docsity.com ny iA
CLIENT -SIDE
ake NIG a WL
Response to interaction may be
more immediate (once program
code has been downloaded)
In client-side scripting the
services are secure as no
information sent from the
browser.
The client side scripting is reliant
on the user having using a
specific browser and / or plug-in
on their computer.
Client-side scripting is affected
by the processing speed of the
user's computer
SERVER -SIDE
SCRIPTING
Complex process are often more
efficient (as the program and the
associated resources are not
downloaded to the browser)
But there are some security
consideration when sending
sensitive information using
server-side scripting.
The server-side scripting does not
rely on the user having specific
browser or plug-in.
The server-side scripting is
affected by the processing speed
of the host server.
docsity.com
Uses of PHP Performs system functions i.e from files on a system it can create , open , read , write and close them. Can handle forms , i.e gather data from files , save data to file, through email you send data, return data to the user. Add , delete or modify elements within your database through PHP Access cookies variables and set cookies We can restrict users to access some pages of any website It can encrypt data. docsity.com BASIC SYNTAX FOR PHP The PHP parsing engine needs a way to differentiate PHP code from other elements in the page. The mechanism for doing so is known as `escaping to PHP`. There are four ways to do this. We have canonical PHP tags. The most universally effective PHP tag style is <?php….?> docsity.com Ways for sending
information.
e There are two ways the browser can send information
to the web browser.
© The GET Method
e The POST Method
® docsity.com
Never use GET method if you have password or other sensitive information to be sent to user. It can`t be used to send binary data , like images or word documents , to the server. The data sent be GET method can be accessed using QUERY_STRING environment variable. The PHP provides $_GET associative array to access all the sent information using the GET method. docsity.com Example :‐ GET Method <?php If($_GET[“name”]||$_GET[“age”]) { echo“welcome”.$_GET[`name`].“<br/>”; echo “You are “.$_GET[`age`].“yearsold.”; exit(); } ?> <html> <body> docsity.com <form action=“<?php$_PHP_SELF?>”method=“GET’”>”
name:<input type=“text” name=“name”/>
Age:<input type=“text”name=“age”/>
<input type=“submit”/>
</form>
</body>
</html>
® docsity.com
<body>
<form action=“<?php$_PHP_SELF?>”method=“POST”>”
name:<input type=“text” name=“name”/>
Age:<input type=“text”name=“age”/>
<input type=“submit”/>
</form>
</body>
</html>
docsity.com
PHP variables All variables in PHP are denoted with a leading dollar sign $. The value of variable is the value of its most recent assignment. PHP does a good job of automatically converting types from one to another when necessary . Variables in PHP do not have intrinsic types‐a variable does not know in advance whether it will be used to store a number or a string of characters. docsity.com DATATYPES IN PHP INTERGERS:‐ are whole numbers , without a decimal point, like 574. DOUBLES:‐are floating point numbers , like 3.146. BOOLEANS:‐have only two possible values either true or false. NULL:‐null is a special type that only has one value i.e. null. STRINGS:‐ are sequences of characters like “hello friends” Arrays :‐ arrays are names and indexed collection of other values. Resources :‐are special variables that hold references to resources external to PHP. OBJECTS:‐ Objects are instances of programmer‐defined classes. docsity.com The switch statement If you want to select one of many blocks of code to be executed , use the switch statement. switch(expression) { case label 1 Code to be executed if expression=label 1; break; case label 2 Code o be executed if expression= label 2; break; default: code to be executed if expression is different from both label 1 and label 2; } docsity.com THANK YOU STUDENTS docsity.com