Scribd
Upload
140 views

Java Script Basics

This document provides an overview of JavaScript basics including: - What JavaScript is and isn't - What JavaScript enables such as interactivity, data processing, and output production - How to put JavaScript into web pages through direct insertion, embedding, and external references - Key JavaScript language components like objects, attributes, methods, statements, and functions - Examples of JavaScript code for time-sensitive greetings, mouseover picture changes, and window manipulation

Uploaded by

raj4raj
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
140 views

Java Script Basics

This document provides an overview of JavaScript basics including: - What JavaScript is and isn't - What JavaScript enables such as interactivity, data processing, and output production - How to put JavaScript into web pages through direct insertion, embedding, and external references - Key JavaScript language components like objects, attributes, methods, statements, and functions - Examples of JavaScript code for time-sensitive greetings, mouseover picture changes, and window manipulation

Uploaded by

raj4raj
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 22

JavaScript Basics

English 3368
Overview
• JavaScript Concepts
• JavaScript in HTML documents
• JavaScript language
• JavaScript samples
JavaScript Basics
• What JavaScript is:
– Extension of HTML
– An object-based scripting language
• What JavaScript isn’t:
– Java
– A full object-oriented prog. environment
• What JavaScript enables:
– Interactivity
What Can JavaScript Do?
• Accept Input
– Text fields, check boxes, buttons, etc.
• Process Data
– Make decisions, manipulate variables
• Produce Output
– Messages, status lines, windows…
• Why?
– HTML doesn’t do much
What Can JavaScripts Do?
• Modify Pages on the Fly
– Change text, replace images, special effects
• Offer Selections to the User
– Drop down menus, check boxes, buttons
• Manipulate Windows
– Open windows, write to them, close them
• BUT: no reading or writing to user’s disk
Putting JavaScript into Pages
• Direct Insertion
– Inside <head> tags (deferred script)
– Within <body> (immediate script)
• Embedded inline
– Inside other HTML tags (as attribute values)
• External references
– In external .js files (as deferred functions)
JavaScript Language
• Objects
– Things on a page
• Attributes
– Properties of objects
• Methods
– Actions taken by objects
• Statements
– Lines of assembled components
• Functions
– Reusable groups of statements
JavaScript Language
• Objects
• Img, form, checkbox, button, textarea
• Attributes
• Height, width, src, href, bgcolor, name
• Methods
• Onclick, focus, alert, getDate(), scroll
• Statements
• Document.myimage.src=“somepic.jpg”
• Functions
• Function doSomething()
• {
• …… statements …..
• }
Event Handlers
• Special methods assoc.with certain objects.
• Called automatically when events occur
• You specify what happens
– onClick, onMouseDown, onMouseUp
– onFocus, onBlur, onKeyPress
– onLoad, onUnload, onSubmit
Object Hierarchy
• Fully-qualified location of an Object
• Allows multiple instances of similar objects
• Avoids duplication of object names
Window
Document
Form
Object
Property or method
Value or action
– Document.form1.button3.value=“Click me”
Programming JavaScript
• Variables
– Named elements that can change value
• Data types
– Integer, floating-point, boolean, string
• Operators
– Assignment, comparison, boolean, string
• Control statements
– Conditions, loops
• Keywords
– Reserved words with special meaning
Programming JavaScript
• Variables
– Howdy, numberRight, score, Ralph
• Data types
– 12, 987.654, true/false, “Texas Tech”
• Operators
– >=, ==, +=, ||, <, >, etc.
• Control statements
– If, if….else, for, etc.
• Keywords
– Var, true, false, int, const, new, return
Programming Rules
• Case matters
• Quotes (or not) matter
• Matching braces matter
• Use indenting and semicolons
<script language=“javascript”>
Function msgBox(boxText)
{
Alert(boxText);
}
</script>
JavaScript Example 1
• Time-sensitive welcome
– Direct insertion script
– Predefined Date() object
– If/Else control
– Variables
– Objects
– Methods
Example 1 Code
<h2>Example 1: Time-Sensitive Welcome</h2>
<p>In the next line, this web page says Good Morning, Good
Afternoon, or Good Night to the user, depending on what time
the browser's machine has. </p>
<h3>
<script language="javascript">
var d = new Date();
var h = d.getHours();
if (h < 12)
document.write("Good Morning.");
else
if (h < 17)
document.write("Good Afternoon.");
else
document.write("Good Evening.");
</script>
JavaScript Example 2
• Mouseover picture change
– Event handlers
– JavaScript as attribute values
– The “this” object
– Embedded quotes
Example 2 Code
<h2>Example 2: Mouseover Picture Change</h2>

<p>When you move your mouse over this picture,


JavaScript will swap in a second picture immediately
upon the Mouseover event.&nbsp; Immediately upon
Mouseout,the first picture will be immediately
swapped.</p>

<img border="1" src="../images/Locke3.gif" width="108"


height="151"
OnMouseOver="this.src='../images/Locke1.gif'"
ONMouseOut="this.src='../images/Locke3.gif'">
JavaScript Example 3
• Smooth Scrolling Button
– Event handler
– JavaScript as attribute value
– External .js function call
– Loop
• Resize Window Button
– Randomization
– arithmetic
Example 3 Code (html doc)
<html><head><title>3368 JavaScript Examples</title>
<link REL="stylesheet" HREF="3368style.css" TYPE="text/css">
<Script Language="Javascript" SRC="JavaEx.js"></Script>
</head>
. . . . .
<h2>Example 3: Manipulating the window through JavaScript</h2>
<p>When you click on this button, the window will resize to a
random size. </p>
<FORM>
<input type=button value="Smooth Scroll" OnClick="SmoothScroll()">
<input type=button value="Resize Window" OnClick="RandomWindow()">

</FORM>
Example 3 Code (.js file)
rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd()
{
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};

function rand(number)
{
return Math.ceil(rnd()*number);
};
Example 3 Code (.js file cont’d)
function SmoothScroll()
{
for (I=1; I<=500; I++)
{
window.scroll(0, 500-I);
}
};

function RandomWindow()
{
window.resizeTo(rand(900)+200, rand(400)+200);
window.scroll(1000, 1000);
};
Conclusion
• Where do you get help?
– Ask.com, google.com, etc.
• “free javascript code”, “javascript
window”,“javascript help”, etc.
– Books
• Idiot’s Guide, Bible of JavaScript

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy