Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
17 views

LAB 7 JavaScript

Uploaded by

Asad Akhlaq
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

LAB 7 JavaScript

Uploaded by

Asad Akhlaq
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

LAB 7 JavaScript

JavaScript Syntax

JavaScript can be implemented using JavaScript statements that are placed within the
<script>... </script> HTML tags in a web page.

You can place the <script> tags, containing your JavaScript, anywhere within you web page, but
it is normally recommended that you should keep it within the <head> tags.

The <script> tag alerts the browser program to start interpreting all the text between these tags
as a script. A simple syntax of your JavaScript will appear as follows.

The script tag takes two important attributes −

Language − This attribute specifies what scripting language you are using. Typically, its value
will be JavaScript. Although recent versions of HTML (and XHTML, its successor) have phased
out the use of this attribute.

Type − This attribute is what is now recommended to indicate the scripting language in use and
its value should be set to "text/JavaScript".

Your First JavaScript Script

Let us take a sample example to print out "Hello World".

We call a function document.write which writes a string into our HTML document.
his function can be used to write text, HTML, or both. Take a look at the following code.

Exercise 1. document.write window.alert


<html> <HTML>
<body> <HEAD>
<TITLE> Using window.alert </TITLE>
<script language="javascript"
<SCRIPT TYPE="text/javascript">
type="text/javascript"> window.alert( "Welcome
document.write("Hello World!"); to\nJavaScript\nProgramming!" );
</SCRIPT>
</script>
</HEAD>
</body> <BODY>
</html> <P>Click Refresh (or Reload) to run this script
again.</P>
This code will produce the following result
</BODY>
Hello World!
</HTML>

−
Exercise 2.
<html>
<head><title>First JavaScript Page</title></head>
<body>
<h1>First JavaScript Page</h1>
<script type="text/javascript">
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
</script>
</body></html>

Comments in JavaScript
JavaScript supports both C-style and C++-style comments, thus −
 Any text between a // and the end of a line is treated as a comment and is ignored by
JavaScript.
 Any text between the characters /* and */ is treated as a comment. This may span
multiple lines.
 JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats
this as a single-line comment, just as it does the // comment.
 The HTML comment closing sequence --> is not recognized by JavaScript so it should be
written as //-->.
Example
The following example shows how to use comments in JavaScript.
<script language="javascript" type="text/javascript">
<!--
// This is a comment. It is similar to comments in C++
/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>
Exercise 3.
JavaScript in <body> and <head> Sections and External File
You can put your JavaScript code in <head> and <body> section altogether as follows −

<html> <html>
<head> <head>
<script type="text/javascript"> <script>
function sayHello() { alert("head");
alert("Hello World") </script>
} </head>
</script> <body>
</head> <script> alert("start"); </script>
<body> <p>THis is text Wow</p>
<script type="text/javascript"> <p>some what in middel 1</p>
document.write("Hello World") <p>some what in middel 2</p>
</script> <script> alert("middle"); </script>
<input type="button" <p>some what in midde 3</p>
onclick="sayHello()" value="Say Hello" /> <p>some what in midde4</p>
</body> <p>finally end</p>
</html> <script>alert("end");</script>
</body>
</html>

JavaScript in External File


 Here is an example to show how you can include an external JavaScript file in your HTML
code using script tag and its src attribute.
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
</body>
Exercise 4. Write a JavaScript program that declare Variable that takes input from user.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Practice</title>

</head>
<body>
<h1>Using JavaScript</h1>
<script type="text/javascript">
var userNum;
userNum = prompt("Please enter your favorite Number.");
document.write(userNum);
// -->
</script>
</body>
</html>
Exercise 5. User input/output to:

Add two numbers To find Max Number

<SCRIPT TYPE="text/javascript"> <SCRIPT TYPE = "text/javascript">


var firstNumber, // first string entered by user var input1 = window.prompt( "Enter first number", "0" );
secondNumber, // second string entered by user var input2 = window.prompt( "Enter second number", "0" );
number1, // first number to add var input3 = window.prompt( "Enter third number", "0" );
number2, // second number to add var value1 = parseFloat( input1 );
sum; // sum of number1 and number2 var value2 = parseFloat( input2 );
// read in first number from user as a string var value3 = parseFloat( input3 );
firstNumber = window.prompt("Enter first integer", "0" ); var maxValue = maximum( value1, value2, value3 );
// read in second number from user as a string document.writeln( "First number: " + value1 +
secondNumber = window.prompt( "Enter second
integer", "0" ); "<BR>Second number: " + value2 +

// convert numbers from strings to integers "<BR>Third number: " + value3 +

firstNumber = parseInt(firstNumber); "<BR>Maximum is: " + maxValue );

number2 = parseInt( secondNumber ); // maximum method definition (called from above)

// add the numbers function maximum( x, y, z ) {

sum = firstNumber + number2; return Math.max( x, Math.max( y, z ) );

// display the results }

document.writeln( "<H1>The sum is " + sum + "</H1>" ); </SCRIPT>

</SCRIPT>

Exercise 6.
Write a JavaScript program that declare a Variable as a name of your favorite color.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Practice</title>
</head>
<body>
<h1>Exercise 5</h1>
<script>
var userColor;
userColor = prompt("What is the name of your favorite color?");
document.fgColor = userColor;
document.write("This is your favorite color!")
</script>
</body>
</html>
Exercise 7. Another Example of Variable and Variable Declaration
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
// We are in the default scope – the "window" object.
x = 3; // same as "window.x = 3"
var y = 4; // same as "y = 4" or "window.y = 4"
{ // Introduce a block to creat a local scope
x = 0; // Same as "window.x = 0"
var y = 1; // This is a local variable y
}
alert("x=" + x + ", y=" + y); // Print x=0, y=4
</script>
</head></html>
Exercise 8. Use variable that input your sentence to display.
<!DOCTYPE html>
<html>
<head>
<title> Exercise 8 </title>
</head>
<body>
<script type = "text/javascript">
var first = 1, second = 1, next, count;
str = prompt("Please input your sentence", "");
var words = str.split(" ");
words = words.sort();
words_len = words.length;
for (count = 0; count < words_len; count++)
document.write(words[count] + "<br/>");
</script>
</body>
</html>
Exercise 9. Write a JavaScript program to convert degrees centigrade into degrees Fahrenheit,
and to write the result to the page in a descriptive sentence. The JavaScript equation for
Fahrenheit to centigrade is as follows:
degFahren = 9 / 5 * degCent + 32

<!DOCTYPE html>
<html lang="en">
<head>
<title> Exercise 9</title>
</head>
<body>
<script>
var degCent = prompt("Enter the degrees in centigrade", 0);
var degFahren = 9 / 5 * degCent + 32;
document.write(degCent + " degrees centigrade is " + degFahren +
" degrees Fahrenheit");
</script>
</body>
</html>

Exercise 10. Write a JavaScript program that uses the prompt() function to get two numbers
from the user. It then adds those two numbers and writes the result to the page:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Exercise 10</title>
</head>
<body>
<script>
var firstNumber = prompt("Enter the first number","");
var secondNumber = prompt("Enter the second number","");
var theTotal = firstNumber + secondNumber;
document.write(firstNumber + " added to " + secondNumber +
" equals " + theTotal);
</script>
</body>
</html>
Exercise 11. Using document.write(), write code that displays the results of the 12 times table.
Its output should be the results of the calculations.
12 * 1 = 12
12 * 2 = 24
12 * 3 = 36
...
12 * 11 = 132
12 * 12 = 144
<!DOCTYPE html>
<html lang="en">
<head>
<title> Exercise 11</title>
</head>
<body>
<script>
var timesTable = 12;
for (var timesBy = 1; timesBy < 13; timesBy++) {
document.write(timesTable + " * " +
timesBy + " = " +
timesBy * timesTable + "<br />");
}
</script>
</body>
</html>

You might also like