JavaScript and HTML Text
JavaScript is a client-side scripting language that runs entirely inside the web browser.
To call it up, you place it between opening <script> and closing </script> HTML tags. A typical HTML “Hello World” document using JavaScript might look like:
“Hello World” displayed using JavaScript
<html>
<head><title>Hello World</title></head>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
<noscript>
Your browser doesn't support or has disabled JavaScript
</noscript>
</body>
</html>
Explanation of the code
<noscript> and </noscript>:These are used when you wish to offer alternative HTML to users whose browser does not support JavaScript or who have it disabled.
Using these tags is up to you, as they are not required, but you really ought to use them because it’s usually not that difficult to provide static HTML alternatives to the operations you provide using JavaScript. However, the remaining examples to come will omit <noscript> tags,
because we are focusing on what javascript can do.
Including JavaScript Files
In addition to writing JavaScript code directly in HTML documents, you can include files of JavaScript code either from your website or from anywhere on the Internet.
The syntax for this is as follows:
<script type="text/javascript" src="script.js"></script>
Debugging JavaScript Errors
When you’re learning JavaScript, it’s important to be able to track typing or other coding errors. Unlike PHP, which displays error messages in the browser, JavaScript handles error messages in a way that changes according to the browser used.
How to access JavaScript error messages in each of the most commonly used browser
Google Chrome: Click the menu icon that looks like a page with a corner turned; then select
Developer→JavaScript Console. You can also use the shortcut Ctrl-Shift-J on a PC, or CommandShift-J on a Mac.
Opera: Select Tools→Advanced→Error Console.
Functions
As with PHP, JavaScript functions are used to separate out sections of code that perform a particular task. To create a function, declare it in the manner shown in
A simple function declaration
<script>
function product(a, b)
{
return a*b
}
</script>
This function takes the two parameters passed, multiplies them together, and returns the product.
The program opens a window where we see
Type something here
a textbox and a button called ClickMe. We enter some text in the textbox, for example rbgtech. Then we click at the Button ClickMe. The method alert opens a dialog box and displays
The value of the textbox is: rbgtech
Then click OK to close the dialog box.
Real Life Example
<HTML>
<COMMENT> Function.html </COMMENT>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function sqrttable(myWindow)
{
myWindow.document.write("<B> Square Root Table </B><BR>");
myWindow.document.write("<HR>");
myWindow.document.write("<TABLE BORDER=1 CELLSPACING=5>");
myWindow.document.write("<TR><TD>Number</TD><TD>Squareroot</TD></TR>");
for(var i=1;i<=20;i++)
{
myWindow.document.write("<TR><TD>" + i + "</TD><TD>" + Math.sqrt(i) +
"</TD></TR>");
}
myWindow.document.write("</TABLE>");
myWindow.document.write("<HR>");
}
function display()
{
var dynWindow = window.open("","Title","width=200,height=300,scrollbars",
+ "resizable");
sqrttable(dynWindow);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="Show it">
<input type=button value="show table" onClick="display()">
</FORM>
</BODY>
</HTML>
Explanation of the code
In the example above we show the use of two functions. The HTML commands to display a table of the square roots of the integers from 1 to 20 are embedded in the JavaScript code.
The Document Object Model(DOM)
Within JavaScript, there is a hierarchy of parent and child objects, which is what is known as the Document Object Model
DOM helps in modifying and reading links e.t.c
About document.write
It’s necessary to have a quick and easy way to display
the results of expressions. In PHP (for example) there are the echo and print statements, which simply send text to the browser, so that’s easy. In JavaScript, though,there are the following alternatives.
Using console.log
The console.log function will output the result of any value or expression passed to
it in the console of the current browser. This is a special mode with a frame or win‐
dow separate to the browser window, and in which errors and other messages can be
made to display
Using alert
The alert function displays values or expressions passed to it in a pop-up window,
which requires you to click a button to close.
Writing into Elements
It is possible to write directly into the text of an HTML element, which is a fairly elegant solution
Using document.write
The document.write function writes a value or expression at the current browser
location, and is therefore the perfect choice for quickly displaying results, because it
keeps all the examples short and sweet, by placing the output right there in the
browser next to the web content and code
Having gone through an overview of javascript,download some books already posted on Books Downloads tab to read more,the next publish will be implementing javascript and php keep following
0 Comments