1 / 30

ECT 270 Client-side web application development

ECT 270 Client-side web application development. Introduction to JavaScript. What is Java Script?. JavaScript is not an all-purpose programming language What is JavaScript? JavaScript is NOT Java

hovan
Download Presentation

ECT 270 Client-side web application development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ECT 270 Client-side web application development Introduction to JavaScript

  2. What is Java Script? • JavaScript is not an all-purpose programming languageWhat is JavaScript?JavaScript is NOT Java • JavaScript is an interpreted web scripting language run from the Web browser ( as opposed to CGI scripting that runs on the server side)

  3. JavaScript as DHTML • JavaScript is part of a growing number of HTML extensions known as Dynamic HTML (DHTML). DHTML is comprised of • CSS (cascading style sheets) • DOM (document object module) • Scripting (Javascript and VBscript) • Together, these technologies make the Web what it is today, by enabling far more advanced interactivity and much flashier styling than would HTML on it’s own

  4. Background of JavaScript • Originally created by a team at Netscape and Sun as a subset of Java, with some differences: • Doesn’t need to be compiled, the browser has an interpreter that process the commands in a script • JavaScript commands can be embedded directly into an HTML file (not in a separate applet) • You don’t need to know Object Oriented Programming to use it.

  5. Current version of JavaScript • The European Computer Manufacturers Association (ECMA) is now in charge of the development of a JavaScript standard. • The current version of JavaScript is called ECMA-262 and is supported by most browsers. • Another client-side scripting language supported by Internet Explorer is VBScript

  6. Debugging JavaScript • Syntactic errors: In IE • Internet Options/Advanced • Check box:”Display a notification about every script error” • Check the line indicated and the ones above and below • In Notepad: Edit/Goto enter the line number • If you have syntactic errors the script will not run

  7. Debugging JavaScript • Semantic errors:the syntax is correct but will produce the wrong result • Calculate the average of two numbers • Correct: z = (x+y)/2; • Incorrect: a = x+y/2; • If x=10 and y=30 • z=20 • a=25

  8. JavaScript and HTML • You can place the JavaScript commands in a separate file • Then link the HTML file to that file by using the <SCRIPT> tag in the head of the file <SCRIPT SRC=URL LANGUAGE=“javascript”> other script commands and comments</SCRIPT> • SCRIPT is the tag, LANGUAGE is the attribute, javascript is the value

  9. <!- - Hide this script from browsers that don’t support JavaScript // Stop hiding from other browsers - -> JavaScript and HTML • You can place the JavaScript commands directly in the HTML file • The <SCRIPT> tag can go in the <HEAD> or the <BODY> <SCRIPT LANGUAGE=“JavaScript”> script commands and comments</SCRIPT>

  10. Keep in mind … • JavaScript is case sensitive (commands, objects, methods, function names etc ..) • Each JavaScript command line must end with a semi-colon (;) • One-line comment: // comment • Multi-line comment: /* comment */

  11. <pre> </pre> 07_JSOutput.htm Sending output to the Web page • document.writeln(“string”); • positions output cursor on next line when finished • document.write(“string”); • Leaves the output cursor where it is when done executing • The string can contain any text or HTML source code document is the object, write is the method

  12. JavaScript Variables • A variable is a named element in a program, used to store and retrieve information • Variable names are case sensitive, cannot contain spaces, and must start with a letteror an underscore • When you have more than one word in a variable name, start with a lowercase first letter and capitalize the first letter of any subsequent word: currentDate

  13. Declaring a JavaScript variable • var variableName;(indicates that variableName is a program variable, it doesn’t occupy any space) • var variableName = value; • variableName = value;(also assign an initial value to the variable) • You do NOT need to declare the variable type

  14. 07_JSVar.htm Different types of variables • Numeric: 13, 22.3,-3.1415, 5.1E2 (5.1x102) • String: any group of characters within quotation marks. “This is a string”, ‘another string’, ‘3.14’, “” (the empty string) • Boolean: can only be true or falsevarisBad = true; • Null variable: is a variable that has no value (assigned yet)varnoGivenValue;

  15. The Date object • JavaScript doesn’t have a Date data type. You need to create a date object that contains date information. dateVariable = newDate(“month, day, year, hours:minutes:seconds”); ordateVariable = newDate(year, month, day, hours,minutes,seconds); taxDay = new Date (“April, 15,2003,24:0:0”);or = new Date (2003,3,15,); today = new Date ();

  16. Dates in JavaScript • Seconds and minutes: 0-59 • Hours:0-23 • Week Days:0 (Sunday) – 6 (Saturday) • Day: 1-31 (day of the month) • Months:0 (January) –11 (December) • Year: since 1900 • Time: in millisecond since January 1, 1970 taxDay = new Date (2003,15,3,0,0,0);

  17. Date methods For retrieving date and time value • dateVariable.getFullYear(); • dateVariable.getMonth(); • dateVariable.getDate(); • dateVariable.getDay(); • dateVariable.getHours(); • dateVariable.getMinutes(); • dateVariable.getSeconds(); taxDay = new Date (2003,15,3,0,0,0); taxDay.getMonth(); //returns 3

  18. Date methods

  19. Arithmetic operators x=5+3; ‘x equals 8y=x++; ‘y equals 9z=-y ‘y equals -9 07_JSMath.htm

  20. JavaScript built-in object for math calculations • Math.abs(numberVariable) • Returns the absolute value of numberVariable • Math.sin(numberVariable) • Calculates the sine of numberVariable, where numberVariable is an angle epressed in radians • Math.cos(numberVariable) • Calculates the cosine of numberVariable, where numberVariable is an angle expressed in radians • Math.round(numberVariable) • Rounds the value of numberVariable to the closet integer • Math.ceil(numberVariable) • Rounds the value of numberVariable up to the next highest integer • Math.floor(numberVariable) • Rounds the value of numberVariable down to the next lowest integer • Math.random() • Returns a random number between 0 and 1

  21. Addition vs Concatenation result = var1 + var2 • If both are number variables: • Adds var1 to var2 • Assigns the result to the variable result • result is a number variable • If at least one of the two is a string: • Concatenate var1 and var2 • Assigns the result to the variable result • result is a string variable

  22. Assignment operators • This operators are used with any data type to assign a specific value to a variable x=5; ‘x equals 5x+=6; ‘x equals 11x-=2; ‘x equals 9x*=3; ‘x equals 27x/=9; ‘x equals 3

  23. JavaScript functions • A function is used to group related, script statements together in reusable units. A function might perform actions or calculates a value • It consists of: • A function name: it identifies the function and it is used to call the function when needed) • A set of parameters: a list of variable names that will contain the values used by the function, grouped within () • A command block: a set of commands that are executed when the function is used. The commands are grouped within {} function function_name (par1, par2, ..){JavaScript commands}

  24. Performing an action with a function • Define the function in the <HEAD> and always before the command that calls the function function showDate (date){document.write(“Today is “+date);} • Call (or run) the function when needed, passing the parameters by value. var ThisDay = “10/29/2002”;showDate(ThisDay); Today is 10/29/2002

  25. 07_JSFct2.htm Returning a value from a function • You can use a function to calculate a value • You need a return command and a variable at the end of the function’s command block function average(num1, num2){ var avrg = (num1+num2)/2; return avrg;} Declaring the function var x= 10;var y=30;var z= average(x,y);document.write(“the average is “+z); Function is calledParameters 10 and 30 are passedz =result of function

  26. 07_JSScope.htm Variable scope • The scope of a variable is the range of statements over which it is visible. • Local variables Any variable declared (var) within the body of a function, exists only within that function • Global variables are variables declared outside the body of a function.They are available through the script. • Any variable not explicitly declared using var is global

  27. The window object and methods • The window object represents a browser window. Window methods are • window.alert("string“); Shows an alert window with text string, and 'OK' button • window.prompt(“string of character”, “default value”);Prompts user for input • Window.confirm(“string”);If the OK button is clicked, the confirm method returns the value “true” • window.close(); • window.open(URL, windowname);

  28. 07_JSStatusBar.htm Service functions • window.status status bar function changes the text displayed in the status bar (bottom left corner of the browser window)<a href=“http://www.cs.depaul.edu” onMouseover=“window.status=`CTI homepage`; return true”onMouseout=“window.status=“”>CTI</a> • document.lastModified reflects when the page was last modifiedvar modifiedDate=document.lastModified;document.write(modifiedDate);

  29. function average(num1, num2){ var avrg = (num1+num2)/2; return avrg;} Average revisited firstNumber = window.prompt("Enter an integer","0"); secondNumber = window.prompt("Enter another","0"); x=parseInt (firstNumber); y=parseInt (secondNumber); var z= average(x,y); document.writeln(“First number “+x); document.writeln(“Second number “+y); document.writeln(“The average of x and y is “+z); Transform string input into an integer Call functionReturn average 07_JSAverage.htm 07_JSMathFct.htm

More Related