Javascript Basic (ppt)

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

14 Δεκ 2013 (πριν από 4 χρόνια και 18 μέρες)

100 εμφανίσεις

Web Programming


Java Script Basic


Java Script Framework


JQuery


Core


Selector


Attributes


Traversing


Events


Effects


JQueryUI


Web Programming


Generate HTML Dynamically


User Events


Syntax


Function


Object & Class


Class Methods

Web Programming

Use the
<script>
tag (also use the
type

attribute to define
the

scripting language)

<html>

<head>

<script type="text/
javascript
">

...

</script>

</head>

<body>

<script type="text/
javascript
">

...

</script>

</body>

</html>

Web Programming

Scripts can be provided locally or remotely

accessible JavaScript file using
src

attribute

<html>

<head>

<script language="JavaScript"


type="text/javascript”


src="http://somesite/myOwnJavaScript.js">

</script>

<script language="JavaScript"


type="text/javascript"


src="myOwnSubdirectory/myOwn2ndJavaScript.js">

</script>

Web Programming


JavaScript is dynamically typed
language.


var

answer = 42

answer = “Thanks for all the fish…”


x = "The answer is " + 42

// returns "The answer is
42"

y = 42 + " is the answer"
// returns "42 is the
answer"


"37"
-

7
// returns 30

"37" + 7
// returns 377


Web Programming


You can call
myfunction() or myfunction(20)


function myfunction(value){


if (value){


this.area=value;


} return this.area;

}

Web Programming


Alert box


User will have to click "OK" to proceed


alert("sometext")


Confirm box


User will have to click either "OK" or "Cancel" to
proceed


confirm("sometext")


Prompt box


User will have to click either "OK" or "Cancel" to
proceed after entering an input value


prompt("sometext","defaultvalue")

Web Programming


Conditional statement


if, if.. else, switch


Loop


for loop, while loop


try...catch


throw

Web Programming


onabort
-

Loading of an image is interrupted


onblur
-

An element loses focus


onchange
-

The content of a field changes


onclick

-

Mouse clicks an object


ondblclick

-

Mouse double
-
clicks an object


onerror

-

An error occurs when loading a
document or an image


onfocus
-

An element gets focus


onkeydown
-

A keyboard key is pressed

Web Programming


onkeypress

-

A keyboard key is pressed or held
down


onkeyup

-

A keyboard key is released


onload

-

A page or an image is finished loading


onmousedown

-

A mouse button is pressed


onmousemove

-

The mouse is moved


onmouseout

-

The mouse is moved off an
element


onmouseover

-

The mouse is moved over an
element


onmouseup

-

A mouse button is released

Web Programming


onreset

-

The reset button is clicked


onresize
-

A window or frame is resized


onselect

-

Text is selected


onsubmit
-

The submit button is clicked


onunload
-

The user exits the page

Web Programming

<html>

<head>

<script type="text/
javascript
">


function
upperCase
() {


var

x=
document.getElementById
("
fname
").value


document.getElementById
("
fname
").value=
x.toUpperCase
()


}

</script>

</head>

<body>

Enter your name:

<input type="text" id="
fname
"
onblur
="
upperCase
()">

</body>

</html>

Web Programming

<form method="post"
enctype="multipart/form
-
data" action="?"
name="au" id="au">


<input name="uname" type="text">


<input type="Submit" name="Submit"
value="Create"/>

Web Programming

<form method="post"
enctype="multipart/form
-
data" action="?"
name="au" id="au">


<input name="uname" type="text">


<input type="button" name="Submit"
value="Create" onclick="submitAdduser();"/>

Web Programming

<script type="text/
javascript
">


function
submitAdduser
(){



var

objAdd

=
document.forms
['au'];



if(
objAdd.uname.value
==null||
objAdd.uname.v
alue
==""){




alert('Please insert name !!!');




objAdd.uname.focus
();




return false;



}







objAdd.submit
();


}

</script>

Web Programming


jQuery : Lightweight and popular


ExtJS: Rich and Comercial


DoJo : Reusable in many Framework


jMaki : JAVA and PHP support (Widget style)


GWT :Google


YUI : Yahoo


Prototype


mooTools

Web Programming


http://jquery.com


Focus on the interaction between JavaScript
and HTML


(Almost) every operation boils down to:


Find some stuff


Do something to it

Web Programming


Absolutely everything starts with a call to
the
jQuery()
function


Since it’s called so often, the
$
variable it
set up as an alias to jQuery


if you’re also using another library you can
revert to the previous $ function with
jQuery.noConflict();

Web Programming

<html>


<head>


<script type="text/
javascript
"
src
="jquery.js"></script>


<script type="text/
javascript
">


// we will add our
javascript

code here


</script>


</head>


<body>


<a
href
="">Link</a>


<!
--

we will add our HTML content here
--
>


</body>


</html>

Web Programming


$(document).ready(function() {


$("a").click(function() {


alert("Hello world!");


});


});

Web Programming


each(callback)


length


eq(position)


get()


get(index)


index(subject)

Web Programming

Web Programming

Selector

Use

for

#id

Matches a single element with the given id attribute.

element

Matches all elements with the given name.

.class

Matches all elements with the given class.

*

Matches all elements.

selector1,sel
ector2,

selectorN

Matches the combined results of all the specified
selectors.


Web Programming

Selector

Use

for

ancestor descendant

Matches all descendant elements specified
by "descendant" of elements specified by
"ancestor".

parent > child

Matches all child elements specified by
"child" of elements specified by "parent".

prev

+ next

Matches all next elements specified by
"next" that are next to elements specified
by "
prev
".

prev

~ siblings

Matches all sibling elements after the "
prev
"
element that match the filtering "siblings"
selector.


Web Programming

Selector

Use

for

:first

Matches the first selected element.


:last

Matches the last selected element.


:not(selector)

Filters out all elements matching the given selector.


:even

Matches even elements, zero
-
indexed.


:odd

Matches odd elements, zero
-
indexed.


:
eq
(index)

Matches a single element by its index.


:
gt
(index)

Matches all elements with an index above the given
one.


:
lt
(index)

Matches all elements with an index below the given
one.


:header

Matches all elements headers, like h1, h2, h3 and so
on.


:animated

Matches all elements that are currently being
animated.


See others selector at
http://docs.jquery.com/Selectors


Content filters


Visibility filters


Attribute Filters


Child filters


Forms


Form Filter

Web Programming

Web Programming

Attr

Use

for

attr
(name)

Access a property on the first matched element. This
method makes it easy to retrieve a property value from
the first matched element. If the element does not
have an attribute with such a name, undefined is
returned. Attributes include title, alt,
src
,
href
, width,
style, etc.


attr
(properties)

Set a key/value object as properties to all matched
elements.

attr
(
key,value
)

Set a single property to a value, on all matched
elements.


attr
(
key,fn
)

Set a single property to a computed value, on all
matched elements.


removeAttr
(name)

Remove an attribute from each of the matched
elements.


http://docs.jquery.com/UI


Accordion


Datepicker


Dialog


Progressbar


Slider


Tabs

Web Programming

Web Programming