![Simple Program: Printing a Line of Text in a Web Page Correct method call syntax: object.method( “string”, “[additional arguments]” ); document.writeln( “<H1 >argument</ H1>” ); - Case-sensitive , seperti semua fungsi pada JavaScrip t - Menggunakan method writeln - Mencetak string, yang dapat terdiri dari teks apapun dan tag HTML - String harus dikelilingi oleh tanda petik ( “…” ) Statement terminators Seluruh kalimat atau syntax harus diakhiri dengan titik koma (;)](https://image.slidesharecdn.com/tugaspw6-100318083950-phpapp02/85/Tugas-Pw-6-4-320.jpg)
![JavaScript Program: Adding Integers Good programmers write many comments Helps other programmers decode script Aids debugging Comment Syntax: One-line comment: // [text] Multi-line comment: /* [text] */ parseInt(); Function accepts a string and returns an integer value Not a method because we do not refer to an object name number1 = parseInt( firstNumber ); Operates right-to-left (due to the "=" sign)](https://image.slidesharecdn.com/tugaspw6-100318083950-phpapp02/85/Tugas-Pw-6-18-320.jpg)
Tugas Pw [6]
- 1. JAVA SCRIPT: INTRODUCTION TO SCRIPTING
- 2. INTRODUCTION TO SCRIPTING JAVA SCRIPT JavaScript scripting language - Pertama kali dibuat oleh netscape - meningkatkan fungsi dan tampilan pada web - Dapat digunakan untuk merancang program komputer Jscript - JavaScript yang dikembangkan oleh microsoft
- 3. Simple Program: Printing a Line of Text in a Web Page Browser includes JavaScript Interpreter -Memroses perintah – perintah pada JavaScript Whitespace - Blank lines, space characters, tab characters -Biasanya diabaikan oleh browser -Digunakan untuk kemudahan dalam pembacaan dan kejelasan <SCRIPT>…</SCRIPT> tag: -Menutup keseluruhan script - Attribute LANGUAGE=“JavaScript” Menandai bahasa scripting (JavaScript default pada IE5 & Netscape) -Tag harus ditutup pada akhir script
- 4. Simple Program: Printing a Line of Text in a Web Page Correct method call syntax: object.method( “string”, “[additional arguments]” ); document.writeln( “<H1 >argument</ H1>” ); - Case-sensitive , seperti semua fungsi pada JavaScrip t - Menggunakan method writeln - Mencetak string, yang dapat terdiri dari teks apapun dan tag HTML - String harus dikelilingi oleh tanda petik ( “…” ) Statement terminators Seluruh kalimat atau syntax harus diakhiri dengan titik koma (;)
- 5. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 2 <!-- Fig. 8.1: welcome.html --> 3 4 <HTML> 5 <HEAD> 6 <TITLE> A First Program in JavaScript </TITLE> 7 8 <SCRIPT LANGUAGE = "JavaScript" > 9 document.writeln( 10 "<H1>Welcome to JavaScript Programming!</H1>" ); 11 </SCRIPT> 12 13 </HEAD><BODY></BODY> 14 </HTML>
- 7. Simple Program: Printing a Line of Text in a Web Page Object: document methods: - writeln Positions output cursor on next line when finished - write Leaves the output cursor where it is when done executing Both begin output where previous statement stopped Line breaks inserted in two ways: document.writeln( “Have a <br> Nice Day!” ) document.writeln( “Have a \n Nice Day!” )
- 8. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 2 <HTML> 3 <!-- Fig. 8.2: welcome.html --> 4 5 <HEAD> 6 <TITLE> Printing a Line with Multiple Statements </TITLE> 7 8 <SCRIPT LANGUAGE = "JavaScript" > 9 document.write( "<FONT COLOR='magenta'><H1>Welcome to " ); 10 document.writeln( "JavaScript Programming!</H1></FONT>" ); 11 </SCRIPT> 12 13 </HEAD><BODY></BODY> 14 </HTML>
- 10. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 2 <HTML> 3 <!-- Fig. 8.3: welcome.html --> 4 5 <HEAD><TITLE> Printing Multiple Lines </TITLE> 6 7 <SCRIPT LANGUAGE = "JavaScript" > 8 document.writeln( 9 "<H1>Welcome to<BR>JavaScript<BR>Programming!</H1>" ); 10 </SCRIPT> 11 12 </HEAD><BODY></BODY> 13 </HTML>
- 12. Simple Program: Printing a Line of Text in a Web Page Methods in window object - Call on-screen windows window.alert( “argument” ); Method calls alert window with window text " argument" Outputs button with text and ‘ OK’ button Scripts restart when page reloaded/refreshed
- 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 to\nJavaScript\nProgramming!" ); 10 </SCRIPT> 11 12 </HEAD> 13 14 <BODY> 15 <P> Click Refresh (or Reload) to run this script again. </P> 16 </BODY> 17 </HTML>
- 15. JavaScript Program: Adding Integers Variables - Location in memory where values are stored - Variable name can be any valid identifier Identifier = series of characters Letters, digits, underscores (‘ _ ’) and dollar signs (‘ $ ’) Cannot begin with a digit Valid identifiers: Welcome , $value , _value , m_inputField1 , C3PO and R2D2 Invalid identifiers: 7button , Say\Hello and field#5 Identifiers are case-sensitive
- 16. JavaScript Program: Adding Integers Variable name convention - Begin with lowercase first letter - Every following word has first letter capitalized goRedSox , bostonUniversityRules Declarations var name1, name2 Indicate that name1 and name2 are program variables
- 17. JavaScript Program: Adding Integers Method window.prompt( “arg1”, “arg2” ) - Calls window that allows user to enter value to use in the script arg1 : text that will appear in window arg2 : text that will initially appear in input line firstNumber = window.prompt(); Assigns value entered by the user in prompt window to variable first " =" a binary operator Assigns value of right operand to left operand
- 18. JavaScript Program: Adding Integers Good programmers write many comments Helps other programmers decode script Aids debugging Comment Syntax: One-line comment: // [text] Multi-line comment: /* [text] */ parseInt(); Function accepts a string and returns an integer value Not a method because we do not refer to an object name number1 = parseInt( firstNumber ); Operates right-to-left (due to the "=" sign)
- 19. JavaScript Program: Adding Integers sum = number1 + number2; Adds number1 and number2 Assigns result to variable sum - String concatenation: Combines string and another data type Other data type can be another string Example: If age = 20, document.writeln( “I am ” + age + “years old!” ); Prints: I am 20 years old!
- 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>
- 22. Memory Concepts - Variables: Name corresponds to location in memory Have 3 attributes: Name Type Value - Memory When a value assigned to a variable, it overwrites any previous value Reading values is non-destructive sum = number1 + number2 Does not change number1 or number2
- 23. Arithmetic - Binary Operators Used in arithmetic operations - Modulus operator ( % ) Yields remainder after division Examples: 43 % 5 = 3 8.7 % 3.4 = 1.9 24 % 6 = 0
- 24. Arithmetic
- 25. Arithmetic - Arithmetic operations Operate right to left (like the ‘ = ’ sign) - Rules of operator precedence Operations execute in a specific order
- 26. Decision Making: Equality and Relational Operators if structure: Program makes decision based on truth or falsity of condition - If condition met (true) Statement(s) in body of structure executed - If condition not met (false) Statement(s) in body of structure skipped Format: - if (condition) { statement; (additional statements); } Semi-colon (‘ ; ’) Do not place after condition Place after every statement in body of structure
- 27. Decision Making: Equality and Relational Operators Equality and Relational Operators:
- 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>
- 31. ANGGOTA KELOMPOK M HAFIIZH FARDHANI 5107100050 AINI RACHMANIA K.F. 5107100077 SITA IMMIAR WARDHANY 5107100080
Editor's Notes
- #2: 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).