Javascript - Your Web Site @ UNC Charlotte

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

25 Ιαν 2014 (πριν από 3 χρόνια και 4 μήνες)

263 εμφανίσεις

JavaScript Introduction

Antonis Stylianou

Java


HTML
-

Static, limited


Java
-

Programming Language


Compiled, separate file (applet) downloaded to client and
executed on client.


Can create “stand alone” application


Complex


Need programming experience


Used for


Interactive Web Graphics


Creating web browser applications


Writing stand
-
alone applications compilation required

JavaScript


Scripting language created by Netscape.



Extends functionality and adds sophistication to Web
pages


Based upon Java syntax

but simpler than Java, easy to
learn/use


Fewer features, less versatile


Embedded in HTML code


Allows control of page elements


Reacts to user actions


Instructions (code) downloaded as text


Platform independent


Object Oriented


Interpreted by the browser

JavaScript


It is not fully extensible
--

users can write
their own objects and functions, these are
not the same as classes and inheritance.


Limited client
-
server interaction
--

it can’t
talk to servers or talk different protocols.


Integrated into HTML
-

downloaded with
HTML page.

5

JavaScript Uses


Validate data entered on HTML forms


Create visually appealing content


React to user actions = dynamic pages


Add interactivity


Customize pages


Entertainment


Display time, date


Applications
-

Calculators, calendars, page
building, …


Cookies


Build new pages on fly

Strengths of JavaScript


Quick Development: Scripts can be developed
in a relatively short period of time.


Easy to Learn: By learning just a few
commands and simple rules of syntax, along
with how objects are used, it is possible to
begin creating fairly sophisticated programs.


Platform Independence: Can be used across
many platforms with many browsers.


Small Overhead: JavaScript programs tend to
be fairly compact and quite small.

Weaknesses of JavaScript


No (or little) code hiding: Because of the
source code of JavaScript is often included as
part of the HTML source code for a
document, it is difficult to prevent the code
from being copied and used.


Lack of Debugging and Development Tools:
This has improved over the years still can be
seen as a weakness.

Alternatives?


VBScript


Client
-
side only on Internet Explorer


PERLScript


Server Side vs. Client Side


JavaScript can be executed on client or the
server


Server side


Invoked from browser


Run on the server


Results passed on to the browser


Client side


Invoked and Run on the browser

JavaScript


Where to Put Your JavaScript Code:


JavaScript scripts and programs can be
included


in the header of an HTML file.


in the body of an HTML file.


in external file.



<script language=“JavaScript”



src=“http://www.uncc.edu/myScript.js”>

Object
-
Oriented


Object = individual unit or component


Objects have


Qualities or attributes


Things they can do


In JavaScript these are


Properties


Methods

Object Examples

Object
Attribute
Things it can do
Computer
Brand name
Model Name
Processor Type
Processor Speed
Disk Drive
Boot up
Run an application
Perform math calculations
Shut down
Disk Drive
Brand name
Model name
Storage capacity
Transfer rate
Access time
Store information
Retrieve information
Delete information
JavaScript Object Example

Object
Attribute
Things it can do
document
bgColor
linkColor
vlinkColor
title
clear()
close()
writeln()
write()


To reference
properties

and
methods



document.title



document.bgColor



document.writeln(<H1>My Heading</H1>)


Variables and their values: numbers, strings, etc.


Expressions, e.g., number1 = number2 * 3


Control structures, e.g., i
f then, while


Functions, e.g., y = parseInt (x)


Objects, e.g., document, form, image, …


properties, e.g., value of a form field


methods, e.g., writeln


events, e.g.,
OnMouseOver


Arrays

JavaScript Elements

<html>

<head>


<script language=“JavaScript">


<!
--

hide script contents from old browsers.



document.writeln(“Hello World”);


// end the hiding here.
--
>


</script>

</head>

<body></body>

</html>

JavaScript Example

<html>

<head>


<script language=“JavaScript“ src=“hello.js”>


</script>

</head>

<body></body>

</html>



And in separate hello.js file



// Script to write Hello World in document



document.writeln(“Hello World”);



Note: JavaScript is case sensitive.

Or …

Advantages of js Source File


Neater HTML document


Reusability of code


Hiding of JavaScript code


Implicit data types:


numbers:
-
5, 0 or 67.534218


strings: "Click here" or ‘Control pad’


logical values: true or false


"non
-
atomic" element: object or function


special value: null


Variables can hold data of any type:


var height = 7


var age = "19"


var dogId = "Lucky's dog"


declared using
var

keyword, initialization optional

Data Types

Some JavaScript resources


Web Developer Virtual Library


Web Designer’s Paradise


WebReference.com