Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
JavaScript, also known as ECMAScript, is a prototype-based, object-oriented scripting language that is dynamic, weakly typed and has first-class functions. It is also considered a functional programming language like Scheme and OCaml because it has closures and supports higher-order functions.
PHP is a general-purpose scripting language originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document.
SQL often referred to as Structured Query Language, is a database computer language designed for managing data in relational database management systems (RDBMS), and originally based upon relational algebra and calculus.
Showing posts with label JavaScript Tutorial. Show all posts
Showing posts with label JavaScript Tutorial. Show all posts
The object in a Web pages are organized in a hierarchy. All objects have properties and methods. In addition, some objects also have "events". Events are things that happen, usually user actions, that are associated with an object. The "event handler" is a command that is used tospecify actions in response to an event. Below are some of the most common events :
onLoad - occurs when a page loads in a browser
onUnload - occurs just before the user exits a page
onMouseOver - occurs when you point to an object
onMOuseOut - occurs when you point away from an object
onSubmit - occurs when you submit a form
onClick - occurs when an object is clicked
Events and Object
Event are things that happen, actions, that are associated with an object. Below are some common events and the object the are associated with :
Event
Object
onLoad
Body
onUnload
Body
onMouseOver
Link, Button
onMouseOut
Link, Button
onSubmit
Form
onClick
Button, Checkbox, Submit, Reset, Link
Example : <FORM onSubmit="functionName()">
Image Rollover Example
With the "window.html" file open, View the Source
Put the cursor after the line "<A HREF=" and enter :
The Document object represents the Web page that is loaded in the browser window, and the content displayed on that page, including text and form elements.
Document Methods
you can use the methods of the document object to work on a Web page. Here are the most common document methods :
write() - write a string to the Web Page
open() - open a new document
close() - closes the document
Document Example
Keep the "userdefined.html" file open
Put the cursor after the String example and enter :
You will notice that the result of all four variable are printed on one line and without spaces between the results. You can avoid this by including some formatting in your "document.write" statement.
Document Formatting Example
Open "write.html" and View the source
Put cursor after "<!- enter function -->" and enter :
<SCRIPT language="JavaScript">
function newPage(){
var userName=prompt("Please enter your name :","")
document.write("<H1>Welcome" + userName + "</H1><BR>")
document.write("<H2>to your new home page.</H2>")
}
</SCRIPT>
Put the cursor after "<!- enter link here -->" and enter :
<A HREF="JavaScript:newPage()">Create-a-Page!</A>
Save the changes and Refresh the Page
Document Properties
Use the roperties of the document object to set the colors of the page, the title and display the date document
was last modified. JavaScript has about 150 defined color wors you can use or you can provide the hexadecimal RGB codes. HEre are the most common document properties :
bgColor
fgColor
linkColor
vlinkColor
title
lastModified
Document Example
Keep the "write.html" file open
Put the cursor after the last "document.write" and enter :
document.bgColor="red"
Save the changes and Refresh the page
Window Object
The window object represents the browser window. You can use it to open a Web page in a new window and to set the attributes for window. There are only two main window properties. The are :
status - set the status bar message
self - stores the name of the current window
Window Methods
The window methods are mainly for opening and closing new windows. The following at=re the main window methods. They are :
alert() - to display a message box
confirm() - to display a confirmation box
prompt() - to display a prompt box
open() - to open a new window
close() - to close a window
Window Example
Open the "window.html" file and View the Source
Put the cursor after "<!- Enter the funtion here -->" and enter :
<SCRIPT language="JavaScript">
function openWin(){
window.open("windowtoo.html")
}
</SCRIPT>
Put the cursor after "<!- Add link here -->" and enter :
<A HREF="JavaScript:openWin()">New Window!</A>
Save the changes and Refresh the page
Window Attributes
If the default new window does not suit your needs, you can specify different features of the window when you open it. The complete syntax of the "wndow.open" is as follow :
window.open(URL,windowName,featureList)
By default, if you don't specify any features, the a window will have all of them. If you specify anny one feature, then the window will have only those you set equal to 1. The following are the window attributes :
toolbar
menubar
scrollbars
resizeable
status
location
directories
Window Attributes Example
With the "window.html" file open, View the Source
Put the cursor on the line "window.open" and edit it yo :
JavaScript supports programming with objects. Obkects a way of organizing the variables. The different screen elements such as Web Pages, forms, text boxes, image, and buttons are treated as objects.
Properties and Methods
Every objrcts has it's own propeties and methods.
Properties define the characteristics of an object.
Examples : color, lenght, name, height, width
Methods are the actions that the object can perform or that can be performed on the object.
Examples : alert, confirm, write, open, close
Naming Objects
Objects are organized in a hierarchy. To refer to an object use :
objectName
To refer to a property of an object use :
objectName.propertyName
To refer a method of an object use :
objectName.methodName()
Build-In Objects
Some of the built-in language objects of JavaScript offer more advanced operations such as :
Math - provides for math calculation
Date - provides date and time information
String - provides for string manipulation
Math Object
The Math object provides methods for many mathematical calculations, including : abs(), pow(), random(), round(), sqrt().
format : Math.method(#)
Math Example
keep the "userdefined.html" file open
Put the cursor in the BODY section and enter :
<SCRIPT language="JavaScript">
var theNumber=3.14
myNum=Math.round(theNumber)
</SCRIPT>
Save the changes and Refresh the page
Date Object
The Date object provides the day, date, and time information.
Format : dateObject.method()
Date Example
Keep the "userdefined.html" file open
Pit the cursor in the BODY section and enter :
<SCRIPT language="JavaScript">
var rightNow=new Date()
theYear=rightNow.getFullYear()
</SCRIPT>
Save the changes and Refresh the page
String Object
The String object provides methods and properties for tring manipulation and formatting.
Format : stringName.method()
String Example
Keep the "userdefined.html" file open
Put the cursor after the Date example and enter :
<SCRIPT language="JavaScript">
var theString="my name"
varPrintString=theString.bold()
varnumChars=theString.length
</SCRIPT>
Programmers use variables to store values. A variable can hold several types of data. In JavaScript you don'y have to declare a variable's data type before using it. Any variable can hold any JavaScript data type, including :
String data
Numbers
Boolean values (T/F)
Variable Names
There are rules and conventions is naming variables in any programming language. It's good practice to use descriptive names for variables. The following are the JavaScript rules :
The variable name must start with a letter or an underscore. firstName or _myName
You can use numbers in a variable name, but not as the first character. name01 or tuition$
You can't use space to separate characters. userName not user Name
Capitalize the first letter of every word except the first. salesTax or userFirstName
Variables
To declare variables, use the keyword var and variable name :
var userName
To assign values to variables, add an equal sign and the value :
var userName="Smith"
var price=100
Functions
With functions, you can give a name to a whole block of code, allowing you to reference it from anywhere in your program. JavaScript has built-in functions for several predefined operations. Here are three some functions.
alert("message")
confirm("message")
prompt("message")
Functions Example
Open "functions.html" and View the Source
Put the cursor after "// add code here" and enter :
var userName
var willDoSurvey
userName=prompt("Enter you name","")
alert("Thank you," + userName)
Save the changes and Refresh the page
User-Defined functions
With user-defined functions, you can name a block of code and call it when you need it. You define a function in the HEAD selection of a web page. It's defined with the function keyword, followed by the function name and any arguments.
function functionName(argument)
{ statements }
User-Defined Example
Open "userdefined.html" and View yhe Source
Put the cursor after "<!- enter function -->" and enter :
<SCRIPT language="JavaScript">
function showAlert() {
alert("this is a user-defined function.")
}
</SCRIPT>
In the BODY, put the cursor after "<! enter the button def here ->" and enter :
<INPUT type-"button" value="Run the Function" onClick="showAlert()">
JavaScript was released by Netscape an Sun Microsystems in 1995. However, JavaScript isn't the same thing as Java.
What is JavaScript
It's a programming language.
It's an interpreted language.
It's object-based programming.
It's widely used and supported.
It's accessible to the beginer.
Uses of JacaScript
Use it to add multimedia elements
With JacaScript you can show, hide, change, resize images, and create image rollovers. You can create scrolling text across the status bar.
Create pages dynamically
Based on the user's choices, the date, or other external data, JavaScriptcan produce pages that are customized to the user.
Interact with the user
It can do some processing of forms and can validate user input when the user submits the form.
Writing JavaScript
JavaScript code is typically embedded in the HTML, to be interpreted and run by the client's browser. Here are some tips to remember when writing JavaScript commads.
JavaScript code is case sensitive
What space between words and tabs are ignored
Line breaks are ignored except within a statement
Javascript statements end with a semi-colon ;
The SCRIPT Tag
The <SCRIPT> tag alerts a browser that JavaScripts code follows. It's typically embedded in thr HTML.
Put the cursor after <!- Enter code below ---> and enter the following :
<SCRIPT language="JavaScript">
alert("Welcome to the script tags test page.")
</SCRIPT>
Save the changes by choosing Save from the File menu.
Then Refresh the browser by clicking the Refres or Reload button.
Implementing JavaScript
There are three wasy to add JavaScript commands your Web Pages.
Embedding code
Inline code
External file
External File
You can use the SRC attribute of the <SCRIPT> tag to call Java Script code from an external text file. This is
usefull if you have a lot of code or you want to run in from several pages, because any number of pages can call the same external JavaScript file. The text file itself contains no HTML tags. It's call by the following tag :
<SCRIPT SRC="filename.js">
</SCRIPT>
External Example
Open "external.html" in a browser
View the Source
Put the cursor after <!- Enter code here --> and enter :
