240 likes | 256 Views
Explore the fundamentals of JavaScript programming, from writing your first program to using functions and variables effectively. Learn how to create JavaScript source files, add comments, and hide code from incompatible browsers. Discover essential programming concepts and best practices in this introductory tutorial.
E N D
Topics • A First JavaScript Program • About the <script> tag • How to create a JavaScript source file • How to add comments to a JavaScript Program • How to hide JavaScript from incompatible browsers • About placing JavaScript in <head> or <body> sections of HTML documents
A First JavaScript Program • The <script> Tag • JavaScript programs are run from within an HTML document • <script> and </script> • Used to notify the browser that JavaScript statements are contained within
A First JavaScript Program • The <script> Tag • JavaScript • Object-based language • Object • Programming code and data that can be treated as an individual unit or component • Statements • Individual lines in a programming language • Methods • Groups of statements related to a particular object
A First JavaScript Program • Creating a JavaScript Source File • JavaScript programs can be used in two ways: • Incorporated directly into an HTML file • Using <script> tag • Placed in an external (source) file • Has file extension .js • Contains only JavaScript statements
A First JavaScript Program • Creating a JavaScript Source File • JavaScript source files • Use src attribute of <script> tag to denote source of JavaScript statements • Browser will ignore any JavaScript statements inside <script> and </script> if src attribute is used • Cannot include HTML tags in source file <script language=“JavaScript” src=“c:\source.js”> </script>
A First JavaScript Program • Creating a JavaScript Source File • Advantages of JavaScript source files • Makes HTML document neater (less confusing) • JavaScript can be shared among multiple HTML files • Hides JavaScript code from incompatible browsers
A First JavaScript Program • Adding comments to a JavaScript Program • Comments • Non-printing lines that are placed in the code to contain various remarks about the code • Makes it easier to understand the code operation • Two types • Line comments • // ignore all text to the end of the line • Block comments • /* ignore all text between these symbols */
A First JavaScript Program • Hiding JavaScript from Incompatible Browsers • Two methods • Place JavaScript in external source file • Enclose the code within HTML comments <!-- beginning of HTML block comment end of HTML block comments -->
A First JavaScript Program • Hiding JavaScript from Incompatible Browsers • Alternate message display • If browser doesn’t support JavaScript • Use <noscript> & </noscript> to place alternate message to users of back-level browsers
A Simple Program: Printing a Line of Text in a Web Page • Methods in window object • Callon-screen windows • window.alert( “argument” ); • Method calls alert window with window text "argument" • Outputs button with text and ‘OK’ button
Another JavaScript Program: Adding Integers • Variables • Variable name can be any combination of: • Letters, digits, underscores (‘_’) and dollar signs (‘$’) • Cannot begin with a digit • variables are case-sensitive
Another 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
Another 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
Another JavaScript Program: Adding Integers • 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)
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
Programmer-Defined Functions • Functions allow program modularization • Variables declared in function are local variables • Only known inside function in which defined • Most functions have list of parameters • Means for communicating info between functions & function calls • Local variables • When function called, arguments assigned to parameters in function definition
Programmer-Defined Functions • Motives for modularizing a program with functions • Makes program development more manageable • Allows software reusability • Avoid repeating code in program • Do not re-invent the wheel • Save time
Function Definitions • Function-definition format functionfunction-name(parameter-list) { Declarations and Statements }