Class 9

uneasysabrageInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 9 μήνες)

215 εμφανίσεις

BUILDING WEB APPLICATIONS USING
ASP.NET,
AJAX

AND
JAVASCRIPT

Dynamic Web Programming

AGENDA

10. Client
-
Side Programming using JavaScript

10.1 Overview of JavaScript

10.2 Basic Syntax of JavaScript

10.3
Javascript

ASP.net

10.4 Introduction to
JQuery

Building Web Applications Using ASP.NET, AJAX And JavaScript

10. CLIENT
-
SIDE PROGRAMMING USING
JAVASCRIPT


10.1 OVERVIEW OF
JAVASCRIPT


Postback

always involves some small, but noticeable overhead.


Client
-
side programming is needed to make pages more
responsive.


Using server side code it is not possible to react to mouse
movements, key presses, etc. Also not displaying popup window,
real
-
time status, and communicating between frames.


JavaScript is an embedded language, meaning directly inserted
into another document, typically an HTML web page.


Three ways to embed JavaScript code in a web page:


Directly (in
-
line) embed code in event attribute for HTML element.


Add script tag (<script>) that contains JavaScript code.


Write JavaScript code in a separate file and link file to the web page.


216

10.1 OVERVIEW OF
JAVASCRIPT


Capabilities of JavaScript:


Control document appearance and content


Control the browser


Interact with HTML forms


Interact with the user


Read and write client
-
state with cookies


What JavaScript cannot do:


No graphics capabilities


Cannot read from or write to files


Does not support networking of any kind


JavaScript is a scripting language, meaning the program reading
it (browser) interprets exactly what you write.


No compilation needed.

217

10.2 BASIC SYNTAX OF
JAVASCRIPT

Lexical Structure


JavaScript is case sensitive. Since there is no compiler, no
checking take place, this makes it especially difficult.


Ignores whitespaces, tab, newlines between tokens (keyword,
variable, function, etc) except when part of a string constant.


Optional semicolon at the end of the line. Good practice to do
so.


Double
-
slash (//) to comment out a line or remainder of line.
Use /* */ for block comments.


A literal is a data value that appears directly in a program:

vCount

= 12; Here 12 is the literal.


An identifier is simply a name for variables, functions, objects.


218

10.2 BASIC SYNTAX OF
JAVASCRIPT

Data Types


Three primitive data types: numbers, string of text,
boolean


Two composite data types: objects, arrays


Object data type is generic, however, JavaScript defines some
specialized types of objects. For example, Data object.


Numbers are represented by floating
-
point decimals, even
integers and fixed
-
point decimals.


Use escape sequences in strings that represent special
characters, such as
\
f (form feed) and
\
n (new line). String data
type contains built
-
in properties and methods, such as length.


Use date object for date and time values:

dteCurrentDate

= new Date(); //current date


Date object contains properties and methods to perform
date/time arithmetic needed in modern applications.

219

10.2 BASIC SYNTAX OF
JAVASCRIPT

Variables


Variable is a name associated with a data value. Name is
placeholder in memory.

var

sum; (declare) sum = 23; (assign) or
var

sum = 23;


Variables are
untyped
:
i

= 10; or
i

= “ten”;


Expressions and Operators


The same operators than C#: arithmetic(+,
-
,*,/), modulo (%),
increment (++) and decrement (
--
), equality (==), different is the
identity operator (===), value and data type must be the same.


Use + sign to concatenate strings, && is logical AND, || OR

Statements


Assignment: s = “Hello “ + name;


Function calls: alert(“Hello “ + name)


220

10.2 BASIC SYNTAX OF
JAVASCRIPT

Statement

Syntax

Description

break

break;

Exit from the innermost loop or switch statement

case

case
constant_expr

Label a statement within a switch statement

continue

continue;

Restart the innermost loop

do/while

Do


statements

while(
expression
)

An alternative to the while loop where the expression is evaluated at the bottom of the
loop

for

for (initialize, condition,
increment)


statements

The simple for loop where a counter variable is declared and initialized. The loop executes
until the condition is true.

for/in

For (
variable

in
object
)

Loop through properties of an object.

function

function name( [args])

{


statements

}

Declare a function where you may pass arguments.

if/else

if (
expression
)


statements

else if (
expression
)


statements

else


statements

Conditionally execute code. If statements is comprised of more than one line, use curly
braces to group code together.

return

return [
expression
];

Return from a function of return the value of
expression

from a function

Switch

Switch (expression)

{


statements

}

Multi
-
way branch to statements labeled with case or default.

var

var
var_name

[= value];

Declare and initialize a variable

while

while (
expression
)


statement

Basic loop statement where the expression is evaluated at the top of the loop

221

10.2 BASIC SYNTAX OF
JAVASCRIPT

Functions


Use function keyword to define a function:


To call this function:
fName
(“Robert”);


To return a value
from

a
function, use the

return
keyword at the

end
of the function

body.

222

10.2 BASIC SYNTAX OF
JAVASCRIPT







To validate form data, use the html document object model
(DOM). To reference the first form in the document:

document.forms
[0]


Within the form, elements collection containing all elements
inside the form tags.


JavaScript can interact with the DOM and perform client
-
side
logic.

223

10.2 BASIC SYNTAX OF
JAVASCRIPT


224

10.2 BASIC SYNTAX OF
JAVASCRIPT

225


Events


To respond to

events:




Some events can be

canceled.


That means also that

ASP.NET processing

(
postback
) is

canceled!


Event

Triggered when

Applies to

onabort

Loading interrupted

image

onblur

Element loses input
focues

select, text elements, window

onchange

Selecting or deselecting an item or changing the
value in an input control and moving focus to
another control

select, text input elements

onclick

Clicking once on a control. Return false to
cancel default action

Link, button elements

ondblclick

Clicking twice on a control

Document, link, image, buttons

onerror

Error occurs while loading an image

image

onfocus

Element receive focus

select, text, window

onkeydown

Key pressed, return false to cancel

document, image, link, text

onkeypress

Key pressed, combination of keydown and
keyup, return false to cancel

document, image, link, text

onkeyup

Key released

document, image, link, text

onload

Document or image finished loading

document, image

onmousedown

Clicking any mouse button, return false to
cancel

document, link, image, buttons

onmouseout

Mouse moves off the element

link, image, area

onmouseover

Mouse moves over an element

link, image, area

onmouseup

Releasing a mouse button

document, link, image, buttons

onreset

Form reset requested, return false to prevent
reset

form

onresize

Window is resized

window

onsubmit

Form submission requested, return false to
prevent submission

form

onunload

Document is unloaded

document

10.3
JAVASCRIPT

IN ASP.NET

JavaScript Events in ASP.NET


Since ASP page translates into HTML, you can use JavaScript.


To create JavaScript for control or document event, add
JavaScript handler and code directly into the page.


When using ASP controls, events do not display in
Intellisense
.


You must know into which HTML control the ASP control
translates into and use the correct event.


Button events for ASP and HTML control.


ASP button controls contain
OnClientClick

event that will generate JavaScript client
-

side event handler.


226

10.3
JAVASCRIPT

IN ASP.NET


OnClientClick

property was created to avoid with server
-
side
OnClick

property.


You can also add

JavaScript
events to

controls
using

attributes
collection of

any
ASP control:

TextBox1.Attributes

(“
onmouseover
”,


alert(‘Hover over TextBox1’);”);


227

10.3
JAVASCRIPT

IN ASP.NET

Dynamic JavaScript in ASP.NET


It is impractical to place large amount of JavaScript code into
attribute. Use <script> tags to place JavaScript into the page and
then reference specific code in event attribute.


So far, only static JavaScript blocks were used.


You can generate JavaScript in C# code using
Page.ClientScript

property. This allows for dynamic JS code generation!


ClientScriptManager

exposes two useful methods:


RegisterClientScriptBlock
(): Writes a script block at the beginning of the
web form( after <form
runat
=“server”> tag).


RegisterStartupScript
(): Writes a script block at the end of the web form(
before the closing </form> tag).


These methods perform the same task, they add script block to
rendered HTML page.

228

10.3
JAVASCRIPT

IN ASP.NET


RegisterClientScriptBlock
() is designed for functions to respond
to events.


RegisterStartupScript
() is designed for immediate JS code
.

229

10.3
JAVASCRIPT

IN ASP.NET


Debugging JavaScript


Must use IE and the following options:


Choose Tools


Internet Options from the menu in Internet Explorer.


In the Internet Options dialog

box
, choose the Advanced tab.


In the list of settings, under
the

Browsing
group, remove the

check
mark next to Disable

Script
Debugging (Internet

Explorer
). You can also
remove

the
check mark next to
Disable

Script
Debugging (Other) to

allow
debugging for Internet

Explorer
windows hosted in

other
applications.


Click OK to apply your change
.

230

10.3 INTRODUCTION TO
JQUERY


jQuery

is a library of JavaScript(extensive, powerful)


The main benefits of
jQuery

are:


Ease of use, manipulate Document Object Model (DOM) of an HTML page


Impressive visual effects, execute AJAX requests


Cross
-
browser compatibility


Supports new CSS3 selectors


Useful and powerful utilities


Additional
jQuery

User Interface library (
jQuery

UI)


Extensible by using
plugins


Widespread adoption


A
jQuery

statement is comprised of four components:


The first part must always be the
jQuery

function or its alias, the $ sign.


The second part is the selector, in the syntax example above, the p tag of the
html page.


The third part is the action, in this case modifying a
stylesheet
, the
css

command.


The last part is comprised of parameters that are supplied to the command,
in our example the color attribute and the color blue.



231

10.3 INTRODUCTION TO
JQUERY


First part is simply indicating that
jQuery

is being used.


Second part is the selector. You can select by the following:


HTML element type, such as table, p, h1, etc. [ $(‘p’) ]


Element ID property [ $(‘#
txtName
’) ]


Element class property [ $(‘.data’) ]


You can further narrow

down
the selector by

using
a filter. For
example

,
for table rows you can

select
even or odd rows:


$(‘#
specialTable

tbody

tr:even
’)


232

10.3 INTRODUCTION TO
JQUERY





Issue
when using Master pages: ID of controls will be changed
due to Master page acting as parent container.


All ID properties are prefixed with ctl00_ContentPlaceHolder1_


Use
clientID

property

in
C# code to avoid

this
issue.
ClientID

is

the
actual property

that
is generated

when
page is

constructed.

233

10.3 INTRODUCTION TO
JQUERY

234