Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Course Director Orcun Tagtekin

Similar presentations


Presentation on theme: "1 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Course Director Orcun Tagtekin"— Presentation transcript:

1 1 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Course Director Orcun Tagtekin otagtekin@fullsail.com ext:8956 A bit of my programming experience: C++, Java, VB6, C#, Coldfusion, PHP, Classic ASP, AS2/3, FLEX, DBML Computer Science Rollins College Digital Forensics UCF

2 2 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Code heavy course Difficult course combination Revisiting html/css concepts Pre-requisite programming knowledge

3 3 Remember to silence phones Drinks not allowed! All deadlines are final No late work will be accepted 10 day course You can miss 8 hours without documentation You can miss a maximum of 16 hours (with excusable documentation) Make-up assignment will be required Either two 15-minute breaks or one 30-min during lecture In labs, no official break If you arrive 15 minutes after the start of lecture or lab, you are 2 hours out If you will miss class, contact me ahead of time. Be proactive! Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E SWA Course Info

4 4 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E SWA Course Info Lecture Tips Lectures are fast-paced and concept-heavy. (chat, fb, youtube bad -> cnn only) Keep coding terminology in mind for the written exams. Most code examples in the lecture slides look like: Lecture slides will be available as pdfs at the end of each lecture. function identifier ( variable1, variable2 ) { statements; }

5 5 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E SWA Course Info Projects Labs 4 to 8 will consist of 5 small Projects. In the first 3 labs, you will be given time to create some designs for these projects. The aesthetics and usability in your designs and code will account for 10% of your overall grade. Turning in: All labs/assignments will be turned in to our dropbox at: afp://dropbox.fullsail.com/sfw1 Name your files as: lastname_firstname_lab#.zip

6 6 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E WeekDayLectureLab 1 1Overview / Introduction to JavaScriptAssignment / Design 2Loops, Conditionals, ObjectsAssignment / Design 3Advanced Object MethodologyAssignment / Design 2 4The Document Object ModelProject: Image Gallery 5Smart Forms: UsabilityProject: Smart Form 3 6 Midterm Written Exam Understanding AJAX Project: AJAX 7Smart Forms: AutocompletersProject: Autocompleter 8DOM AnimationsProject: Animated Obj. 4 9Analyzing Usability Practice Practical Final Written Exam 10Flash/ JS communicationPractical Exam

7 7 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Assessments ItemCourse % Labs 1, 2, and 3GPS points Quiz (5)%1 each Design5% Lab 4 Project5% Lab 5 Project5% Lab 6 Project5% Lab 7 Project5% Lab 8 Project5% Midterm Written Exam10% Final Written Exam15% Practical Exam40%

8 8 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E What is JavaScript? JavaScript is the scripting language of the web.

9 9 What is JavaScript? JavaScript is a client-side, object-oriented language. It is executed from the users browser, as part of a web document... Remember the 3 layers of a client-side web document: Content/Structure: The core html / xml-like structure Presentation: CSS styling layer Behavior: The last layer is what we call behavior. This allows us to attach interactivity to the document, using the browser. Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Brief History

10 10 How Does JavaScript Work Then? Every language has a medium, the output graphics renderer. C++/Cocoa/etc: the OS Flash: the Flash Player plugin Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Brief History

11 11 How Does JavaScript Work Then? JavaScripts medium is the browser. Good: JavaScript needs no plugin, it is native to all browsers. Bad: Anyone here enjoy IE6? Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Brief History

12 12 How Does JavaScript Work Then? In Flash, your code controls movieclips and objects inside the Flash Player. In JavaScript, our code controls the document (such as html), and the browser it is being rendered by. Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Brief History

13 13 What can JavaScript do for our sites? Lets look at some examples of JS in action: http://www.portagelibrary.info/ http://www.portagelibrary.info http://www.hotel-oxford.ro http://www.qlear.nl http://www.meebo.com...more Brief History

14 14 Browser Compatibility Well be using JavaScript 1.5, which has existed since IE 5.5 Every major browser has JS support, but most still only use v1.5 Firefox, Safari, Chrome, IE, Opera, AOL, Konqueror, Camino, etc... JavaScript is now maintained by the Mozilla Corporation, with v1.8 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Brief History

15 15 Why does this matter? Brief History JavaScript was the founding language of the scripting standards for ECMA (European Computer Manufacturer Association), known as ECMAScript Flash built ActionScript from this. So.. some of the basic syntax youve learned for Flash will carry over to JavaScript... some examples:

16 16 Brief History ActionScript if statement if(i==2){ //...; } Javascript if statement if(i==2){ //...; } ActionScript for loop for(i=0; i<2; i++){ //...; } Javascript for loop for(i=0; i<2; i++){ //...; }

17 17 Similarities Comments, Conditionals, Loops, Operators (==, !=, +, -, ++, --, *, /, etc) As a plugin, Flash has the advantage of updating AS anytime. ActionScript 3 uses ECMA4 JavaScript 1.5 uses ECMA3 (Thanks IE!) Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Brief History

18 18 Similarities There will be some major syntax differences. While ActionScipt is strictly typed, and uses classical inheritance, JavaScript is loosely typed, and uses prototype inheritance. JavaScripts loose syntax makes it fairly easy to learn, but make sure you observe the syntax differences in each lecture. As we explore JavaScript further you will see some of the major differences in the syntax for these two languages. Brief History

19 19 Writing JavaScript

20 20 Document Behaviors JavaScript is included as part of a web document (such as an html file) Our code is placed in an open tag element The script tag will also require a mime-type declaration of text/javascript. Writing JavaScript

21 21 In the head, the scripts code is run before the body is rendered. In the body, the scripts code is run in the order of the elements around it. Writing JavaScript

22 22 External Scripts The method well be using most often is to have all your script information in an external document (file.js) with a.js extension. Makes archiving project code easier and separates your code from the document. Add an src attribute to the script tag pointed to the files url. Common practice is to use a js folder to contain your script files. Writing JavaScript

23 23 Comments Single-line (useful for testing, should be removed before production level) Multi-line (always use in production level scripts) Writing JavaScript // This is a single line comment. /* This is a multiline comment. Comment ends with */

24 24 Hello, World! One method for writing content to our screen is an object-oriented method targeting the document itself: Any value passed into this method is written into the document (such as an html file)... Well be discussing far better approaches later on. Writing JavaScript document.write( Paragraph );

25 25 Hello, World! Another common method for testing values in JavaScript is the alert(expression) method. This will create a modal dialog box from the browser window containing whatever literal you pass: Because this is modal, it will halt the execution of your code until the dialog box is closed. For this reason, it is the most commonly used value testing method. Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript alert(Hello, world!);

26 26 Hello, World! In our documents, loading order is crucial... runs before scripts are executed in the order they are placed Inside the body, all document elements load sequentially (line by line). lecture activity... Writing JavaScript

27 27 Lecture Activity 1. Begin by creating an html document 2. Create a script in the header, using an external file 3. In that script, add an alert: alert(Hello World); 4. In the, create an h1 with some text. 5. After that paragraph, add the same script tag again (with same src). 6. Then add another h1 to the end of the body. 7. Run the html document, notice the loading order of the content and alerts. Writing JavaScript

28 28 JavaScript Variables

29 29 Variables Just like ActionScript, variable declaration begins with the var keyword Variable assignment uses the assignment operator ( = ) However, JavaScript does not use strict data typing. We use loose typing. This means the engine will determine the data type automatically (string, number, boolean, array, etc). Example: Writing JavaScript var name = Mike;

30 30 Identifiers The name of a variable is the identifier. Can have: letters, numbers, underscore, or $ Cannot have spaces Cannot begin with a number Is case-sensitive Should use camel-casing Writing JavaScript legal var bobDole; legal var _taxes; legal var $; legal var mike9; 30

31 31 Variables Multiple variables can be declared on the same line, separating by comma. You can also declare without values (meaning they are undefined). Writing JavaScript var name=Mike, course=SFW1, month=2;var name, course, month;var name, course=SFW1, month;var a = b = c = d = 10; 31

32 32 Writing JavaScript Values Values are top-level in JavaScript, and are represented by Literals: String literal: any character set can go here Number literal: 0, 103, 42, 3.145, 20.1, 6.02e23 Boolean literal: true or false Array literal: [ 1, true, 3 ] Object literal: { a:value, b:true } Function literal: function(){ statements; }

33 33 Writing JavaScript String Operations Remember to escape quote characters if the outside quotes are the same: var myStr = I need some \quotes\ to be here.; To combine two strings together (concatenate), use + var myStr = Incomplete + sentence; // returns Incomplete sentence If you add a number to a string, the resulting format is always a string: var myStr = 6 + 2;// 62 Other math operations will result in a number: var myStr = 6 / 2;// 3

34 34 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Number Operations Arithmetic Operators: +, -, /, * Keep in mind order of operations, etc: 4 + 6 * 5 - 10 / 5 = ? How about now?: 4 + ( 6 * 5 - 10 ) / 5 = ? You can shorten quick operations with +=, -=, *=, /= myNum = myNum + 5; myNum += 5; You can increment or decrement numbers by 1 with ++ or -- myNum++; myNum--;

35 35 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E 5 mins.

36 36 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Arrays Arrays are a unique data type that can hold a collection of values. In JavaScript, arrays are constructed by the brackets [ and ], known as an array literal. Heres any empty array: Arrays can hold any value type, separated by comma var myArr = [ ];var myArr = [First, 2, function(){}, true];

37 37 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Arrays Arrays are indexed numerically, beginning at 0 To access or set a value, use an index number inside [ ] next to the name (setting a value simply uses the assignment operator) myArr[4] = 5th value;var myArr = [First, 2, function(){}, true]; 0 1 2 3 alert( myArr[3] ); // true

38 38 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Arrays Since arrays can store any value, this includes nesting arrays inside arrays... Accessing the values here is done with multiple brackets [#][#] var myArray = [ true, bob, [1, 2] ]; myArr[0] // true myArr[2][0] // 1

39 39 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Objects Objects and arrays are similar.. both are used to store multiple values. Arrays store by numerical index Objects store by a key index Keys in objects are names (similar to variables), used to index a value inside the object. Create a new object using the literal... {} var house = {}; // initialize an object

40 40 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Objects Accessing or setting values can be done just like array access: Can also be done with dot syntax: var house = {}; house[location] = Orlando, FL; key value house.location = Orlando, FL; key value

41 41 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Objects The most efficient way to create objects is by key: value pairings, also known as associative pairing. Similar to making an array, we declare the objects properties inside the literal, separating by comma... person = {name:Bob, age:80, rapper:true}; key:value

42 42 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Objects Again, similar to arrays, we can nest objects inside objects. person = {birthday:{month:02, day:12}, name:Bob};person[birthday][month]person.birthday.month

43 43 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Functions Functions provide us a way to save a block of code so we can execute it later instead, and can be invoked as many times as we want. In JavaScript though, functions are values like all our other data types. Invoking the function is as simple as calling the identifier using ( ) var fn = function(arguments){code;};fn();

44 44 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Functions Lets create an example. First, we need to initialize a Number to store our counter, then create our function. var myctr = 1; // initialize our variable at 1 var myCounter = function(){ myctr++; // increments our number by 1 document.write(myctr); // outputs the new result }; myCounter(); // will ouput 2 to the page myCounter(); // will ouput 3 to the page

45 45 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Passing Data to Functions Our functions would be very limited if they could only execute the same thing every time. We can create dynamic results by passing variable arguments to our function. To do so, well simply invoke some identifiers. If we want to pass more than 1, separate by comma... Two important rules will apply to these new variables.. 1) if a variable of the same name already exists globally, the global will be ignored, 2) these variables will only exist inside this function var identifier = function( var1, var2 ) { statements; }

46 46 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Passing Data to Functions These variable arguments will store data that is passed to the function, so if we wanted to fill var1 and var2 with data, we would invoke the function, and pass some data, separated by comma again: Now inside our function we call on these variables.. such as: myFn(value1, value2); var myFn = function(var1, var2) { alert( var1 + var2 ); };

47 47 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Functions var myctr = 1; var myCounter = function(newct){ myctr += newct; document.write(myctr); }; myCounter(5); myCounter(2);

48 48 Writing JavaScript Returning Values If a return gives back no value, it instead returns undefined. This technique is commonly used to end a function early, during execution. var myFn = function(){ return; alert(No.); // this line will never run }; var worked = myFn(); // worked is now equal to undefined

49 49 JavaScript: Variable Scope

50 50 Variable Scope Scope is the lifetime of a variable.. it defines where the variable is created, and where it can be accessed. JavaScript uses Lexical Scoping. This has 2 meanings: A scope level will check parent levels for variables, and A new scope level in JavaScript can only be made with a function. If a variable doesnt exist in the current scope, through lexical scoping it will try to find the variable in a parent block. Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript

51 51 Variable Scope Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript

52 52 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Functions var myctr = 1; function myCounter ( newct ) { myctr += newct; document.write(myctr); }; myCounter(5);

53 53 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript Functions var myctr = 1; function myCounter ( newct ) { var myctr = newct; }; myCounter(5); document.write(myctr);

54 54 Interpreted Code Most languages get compiled from their environment, and output a resulting file. Most compiled languages also have immediate error feedback, since the code is rendered from the development environment. Youll notice JavaScript is only executed as it runs. Since the engine exists in the browser, well be relying on browser tools to report errors to us. Firefox best tools for this.. such as Web Developer. Example (error checking with Firefox and Web Developer): JS Reference: http://www.w3schools.com/jsref/default.asphttp://www.w3schools.com/jsref/default.asp Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Writing JavaScript

55 55 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Lab 1 Ready For Lab 1? Download the Lab 1 instructional pdf from our server: Read and follow all of the instructions! Practice Assignment: Due at end of lab for attendance. Design Templates: Due before lecture 4.

56 56 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E lab pm


Download ppt "1 Michael Smotherman lectures 1:15pm FS2-207F Brandon Bombassei, Alejandro Campos labs 5pm-9pm 9pm-1am FS2-106E Course Director Orcun Tagtekin"

Similar presentations


Ads by Google