This document provides an introduction to JavaScript scripting. It discusses how JavaScript was originally created by Netscape to enhance web page functions and displays. It then presents some simple JavaScript programs to print text on a web page using methods like document.write() and document.writeln(). The programs demonstrate using variables, data types, operators, and conditional statements.
13. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 2 <HTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > > 3 <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > Fig. 8.4: welcome.html --> 4 <!-- Printing multiple lines in a dialog box --> 5 6 <HEAD> 7 8 <SCRIPT LANGUAGE = "JavaScript" > 9 window.alert( "Welcome toJavaScriptProgramming!" ); 10 </SCRIPT> 11 12 </HEAD> 13 14 <BODY> 15 <P> Click Refresh (or Reload) to run this script again. </P> 16 </BODY> 17 </HTML>
14.
15.
16.
17.
18.
19.
20. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 2 < 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > HTML> 3 <!-- 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > Fig. 8.6: Addition.html --> 4 5 <HEAD> 6 <TITLE> An Addition Program </TITLE> 7 8 <SCRIPT LANGUAGE = "JavaScript" > 9 var firstNumber, // first string entered by user 10 secondNumber, // second string entered by user 11 number1, // first number to add 12 number2, // second number to add 13 sum; // sum of number1 and number2 14 15 // read in first number from user as a string 16 firstNumber = window.prompt( "Enter first integer", "0" ); 17 18 // read in second number from user as a string 19 secondNumber = window.prompt( "Enter second integer", "0" ); 20 21 // convert numbers from strings to integers 22 number1 = parseInt( firstNumber ); 23 number2 = parseInt( secondNumber ); 24 25 // add the numbers 26 sum = number1 + number2; 27 28 // display the results 29 document.writeln( "<H1>The sum is " + sum + "</H1>" ); 30 </SCRIPT> 31 32 </HEAD>
28. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 2 <HTML> 3 <!-- Fig. 8.14: comparison.html --> 4 <!-- Using if statements, relational operators, --> 5 <!-- and equality operators --> 6 7 <HEAD> 8 <TITLE> Performing Comparisons </TITLE> 9 10 <SCRIPT LANGUAGE = "JavaScript" > 11 var first, // first string entered by user 12 second; // second string entered by user 13 14 // read first number from user as a string 15 first = window.prompt( "Enter first integer:", "0" ); 16 17 // read second number from user as a string 18 second = window.prompt( "Enter second integer:", "0" ); 19 20 document.writeln( "<H1>Comparison Results</H1>" ); 21 document.writeln( "<TABLE BORDER = '1' WIDTH = '100%'>" ); 22 23 if ( first == second ) 24 document.writeln( "<TR><TD>" + first + " == " + second + 25 "</TD></TR>" ); 26 27 if ( first != second ) 28 document.writeln( "<TR><TD>" + first + " != " + second + 29 "</TD></TR>" ); 30 31 if ( first < second ) 32 document.writeln( "<TR><TD>" + first + " < " + second +
29. 33 "</TD></TR>" ); 34 35 if ( first > second ) 36 document.writeln( "<TR><TD>" + first + " > " + second + 37 "</TD></TR>" ); 38 39 if ( first <= second ) 40 document.writeln( "<TR><TD>" + first + " <= " + second + 41 "</TD></TR>" ); 42 43 if ( first >= second ) 44 document.writeln( "<TR><TD>" + first + " >= " + second + 45 "</TD></TR>" ); 46 47 // Display results 48 document.writeln( "</TABLE>" ); 49 </SCRIPT> 50 51 </HEAD>
30.
31. ANGGOTA KELOMPOK M HAFIIZH FARDHANI 5107100050 AINI RACHMANIA K.F. 5107100077 SITA IMMIAR WARDHANY 5107100080
Editor's Notes
Glowing “neon tubes” text with reflection (Intermediate) To reproduce the effects on this slide, do the following: On the Home tab, in the Slides group, click Layout , and then click Blank . On the Insert tab, in the Text group, click Text Box , and then on the slide, drag to draw the text box. Enter text in the text box, select the text, and then on the Home tab, in the Font group, select Arial Rounded MT Bold from the Font list, select 60 from the Font Size list, and then click Bold . On the Home tab, in the Paragraph group, click Center to center the text in the text box. On the Home tab, in the Font group, click Character Spacing , and then click More Spacing . In the Font dialog box, on the Character Spacing tab, in the Spacing list, select Expanded . In the By box, enter 2 . Select the text box. Under Drawing Tools , on the Format tab, in the bottom right corner of the WordArt Styles group, click the Format Text Effects dialog box launcher. In the Format Text Effects dialog box, click Text Fill in the left pane, select Gradient fill in the Text Fill pane, and then do the following: Click the button next to Preset colors , and then click Ocean (second row, second option from the left). In the Type list, select Linear . Click the button next to Direction , and then click Linear Diagonal (first row, first option from the left). In the Angle box , enter 45° . Also in the Format Text Effects dialog box, click Text Outline in the left pane. In the Text Outline pane, select Solid line , click the button next to Color , and then under Theme Colors click Black, Text 1 (first row, second option from the left). Also in the Format Text Effects dialog box, click Outline Style in the left pane. In the Outline Style pane, in the Width box, enter 0.75 pt . Also in the Format Text Effects dialog box, click 3-D Format in the left pane, and then do the following in the 3-D Format pane: Under Bevel , click the button next to Top , and then under Bevel click Hard Edge (third row, third option from the left). Next to Top , in the Width box, enter 4 pt , and in the Height box, enter 0.8 pt . Under Depth , click the button next to Color , and then under Theme Colors click Black, Text 1 (first row, second option from the left). In the Depth box, enter 4.5 pt . Under Surface , click the button next to Material , and then under Translucent click Powder (first option from the left). Click the button next to Lighting , and then under Special click Glow (third option from the left). Under Drawing Tools , on the Format tab, in the WordArt Styles group, click Text Effects , point to Glow , and then under Glow Variations click Accent color 5, 8 pt glow (second row, fifth option from the left). Under Drawing Tools , on the Format tab, in the WordArt Styles group, click Text Effects , point to Reflection , and then under Reflection Variations click Half Reflection, 4 pt offset (second row, second option from the left). Drag the text box vertically on the slide to position it slightly above the middle. Select the text box. On the Home tab, in the Drawing group, click Arrange , point to Align , and then do the following: Click Align to Slide . Click Align Center . To reproduce the background on this slide, do the following: Right-click the slide background area, and then click Format Background . In the Format Background dialog box, click Fill in the left pane. In the Fill pane, select Solid fill , and then click the button next to Color , and under Theme Colors click Black, Text 1 (first row, second option from the left).