Gen AI in Business - Global Trends Report 2024.pdf
JavaScript
1.
2. WHAT WE RE GOING TO DO
Pretest & Review of Javascript Basics
Digging in –
Event Handling
HTML Forms Validation
JS Libraries
Testing/Debugging
3.
4. WHAT IS JAVASCRIPT
Object based (not object oriented) programming
language
very limited object creation
a set of pre-defined objects associated with
HTML document structure
many HTML tags constitute JS Objects
Browser functionality
provides a limited API to Browser functionality
5. JAVASCRIPT…JAVA ?
There is no relationship other than the fact that Java and JavaScript
resemble each other (and C++) syntactically
JavaScript is pretty much the de-facto standard for client-side scripting
6. WHAT CAN IT BE USED FOR
Some pretty amazing things….
Text animation
graphic animation
simple browser based application
HTML forms submission
client-side forms data validation (relieving the server of this task)
web site navigation
7. PUTTING JAVASCRIPT INTO YOUR HTML
in an external file
collect commonly used functions together into external function
libraries on the server
added benefit of privacy from all but the most curious users
in-line with your HTML
as an expression for an HTML tag attribute
within some HTML tags as Event Handlers
9. PROGRAMMING FUNDAMENTALS
Value Types
String Sample
Number 2.52 , 5 , .5
Boolean true, false
Null null
Object - all properties and methods belonging to the object or array
Function - a function definition
10. VARIABLES
Naming
start with alpha followed by alphameric (and _)
Creating
use the var keyword
var myName
definition and initialization can be combined
var myName = Dick
11. ARRAYS
One dimensional arrays
var myarray = new Array( ) //empty array
var myarray1 = new Array(10) // 10 elements
var myarray2 = new Array(2,4,6) // 3 elements initialized to 2, 4,
and 6 respectively
0 based - myarray[0] is first element
12. USER DEFINED OBJECTS
Implemented as associative arrays
var point = new Object() // empty object
point.x = 5 ; point.y = 3; // no longer empty
var newpoint = {x:4 , y:5} // object literal form
var anotherpoint = new Object( )
anotherpoint = newpoint //object assignment
13. USER DEFINED FUNCTIONS
Function definition:
function sum(x,y) { return x + y; }
Function Constructor
var sum = Function( x , y , return x + y; )
Function literal format (Javascript 1.2)
var sum = Function(x,y) {return x + y;}
a function assigned to a property of an object is called a method of the
object
within the body of a function arguments[] contains an array of the
arguements
14. BUILT-IN FUNCTIONS
Many commonly used functions are built into the language for:
string manipulations
math operations
built-in object methods
parsing
dynamic expression evaluation
15. OBJECT HIERARCHY
window
link anchor layer form applet image area
history document location toolbar
text radio button fileUpload select
textarea
password
checkbox reset
submit
option
16. OBJECTS
window - the current browser window
window.history - the Netscape history list
window.document - the html document currently in the
browser client area
window.location - the browser location field
window.toolbar - the browser toolbar
window.document.link - an array containing all of the links in
the document
window.document.anchor - an array of all the anchor points in
the document
17. OBJECTS (MORE…)
Window.document.layer - a named document layer
window.document.applet - a named java applet area
window.document.image- a named image tag
window.document.area - a named area
window.document.form - a named form or the default
form
ect, ect
18. A FEW EXAMPLES...
window.location = http://www.yahoo.com
will take you to the specified URL (like a goto)
window.history.back()
back( ) is a method on history
will be like clicking the back button in Nav 3
in Nav 4 will take you back to prev window
window.history.goto(1)
takes you back to first URL in history array
19. THE OBJECT MODEL
It is very important to understand the object model
each object has its own properties, some of which are read only
some of which you can be set directly by assignment (as location)
each object also has a set of behaviors called methods
22. OBJECT EVENT HANDLERS
Most of the objects that make up the Document Object
Model respond to asynchronous, user generated events
through predefined event handlers that handle the event
and transfer control to a user provided event handling
function
Each object has particular events that they will respond to
the way you specify an event handler is by adding an
additional attribute to the HTML tag that specifies the
event and the particular handler
<input name=bt1 type=button value=ok onClick= abc( ); >
if the button is click the function abc( ) will be run
25. THE FORM OBJECT
Tag : <form name = n method = get|post action=URL>
Properties:
action - action attribute of tag
elements[ ] - creeated from like named form elements
encoding - ENCTYPE attribute of tag
length - length of an elements array
method - method attribute of tag
name - name attribute of tag
target - target attribute of tag, where to display response page
Methods
handleEvent( )
reset( ) - reset all elements to initial value
submit( ) - submit to server for processing (like submit button)
27. PROPERTIES AND METHODS
Tag: <input name=name type=fieldtype ….>
Properties:
defaultValue - value attribute of tag
form - form that this field is an element of
name - name attribute of tag
type - type attribute of tag (text, password, textarea, hidden)
value - user entered value or value attribute of tag
Methods:
blur( ) * - unselects any selected text
focus( ) * - readies the field for user input
handleEvent( ) *
select( ) * - selects the text in the field
* doesn t apply to hidden fields
28. ADDITIONAL EVENTS
onKeyDown =
as soon as the key is depresses
allows filtering of key strokes before the character is displayed
onKeyUp =
as soon as key is released
onKeyUp = signals the end of a key down and a key up sequence
30. CHECKBOX OBJECT
Properties:
checked - true if checked, false otherwise; setting doesn t cause a click
defaultChecked - true if CHECKED attribute is present, false otherwise
name - name attribute of the tag
type - type attribute of the tag
value - value attribute of the tag
Methods:
click( ) -
handleEvent( ) -
Additional events
onMouseDown =
onMouseUp =
31. RADIO OBJECT
one of n choices
Properties:
checked - true if checked, false otherwise; setting doesn t cause a click
defaultChecked - true if CHECKED attribute is present, false otherwise
name - name attribute of the tag
type - type attribute of the tag
value - value attribute of the tag
Methods:
click( ) -
handleEvent( ) -
Additional events
onMouseDown =
onMouseUp =
32. SELECT OBJECT
Properties:
length - number of option elements
option[ ] - element array of the options tags
name - name attribute of the tag
selectedIndex - index of selected option
options[i].defaultSelected -
options[i].index
options[I].selected
Methods:
blur( ) -
focus() -
handleEvent( ) -
40. It may be used in case of conflict with other
frameworks.
jQuery( div );
The full name of $() function is
41. var
foo
=
jQuery.noConflict();
//
now
foo()
is
the
jQuery
main
function
foo( div ).hide();
Avoid $() conflict with other
frameworks
//
remove
the
conflicting
$
and
jQuery
var
foo
=
jQuery.noConflict(true);
42. $( p ).html( <div>Hello
$!</div> );
//
escape
the
content
of
div.b
$( div.a ).text($( div.b ).html());
Getting and Setting Inner HTML Content
43. //
get
the
value
of
the
checked
checkbox
$( input:checkbox:checked ).val();
Getting and Setting Values
//
set
the
value
of
the
textbox
$( :text[name= txt ] ).val( Hello );
//
select
or
check
lists
or
checkboxes
$( #lst ).val([ NY , IL , NS ]);
44. Handling CSS Classes
//
add
and
remove
class
$( p ).removeClass( blue ).addClass( red );
//
add
if
absent,
remove
otherwise
$( div ).toggleClass( main );
//
test
for
class
existance
if
($( div ).hasClass( main ))
{
//…
}
45. //
just
show
$( div ).show();
//
reveal
slowly,
slow=600ms
$( div ).show( slow );
//
hide
fast,
fast=200ms
$( div ).hide( fast );
//
hide
or
show
in
100ms
$
( div ).toggle(100);
Showing or Hiding Element