1 michael smotherman lectures 1:15pm fs2-207f brandon bombassei, alejandro campos labs 5pm-9pm...

1

Michael Smotherman lectures1:15pm

FS2-207F

Brandon Bombassei,Alejandro Campos

labs5pm-9pm9pm-1amFS2-106E

Course DirectorOrcun Tagtekin

[email protected]:8956

A bit of my programming experience:

C++, Java, VB6, C#, Coldfusion, PHP, Classic ASP, AS2/3, FLEX, DBML

Computer Science Rollins CollegeDigital Forensics UCF

mailto:[email protected]

2


FS2-207F



‣Code heavy course

‣Difficult course combination

‣Revisiting html/css concepts

‣Pre-requisite programming knowledge

3

• Remember to silence phones

• Drinks not allowed!

• All deadlines are finalNo 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!


FS2-207F



SWA Course Info

4


FS2-207F



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


FS2-207F



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


FS2-207F



Week Day Lecture Lab

1

1 Overview / Introduction to JavaScript Assignment / Design

2 Loops, Conditionals, Objects Assignment / Design

3 Advanced Object Methodology Assignment / Design

24 The Document Object Model Project: Image Gallery

5 Smart Forms: Usability Project: Smart Form

3

6 Midterm Written Exam

Understanding AJAX

Project: AJAX

7 Smart Forms: Autocompleters Project: Autocompleter

8 DOM Animations Project: Animated Obj.

4

9 Analyzing Usability Practice Practical

Final Written Exam

10 Flash/ JS communication Practical Exam

7


FS2-207F



Assessments

Item Course %

Labs 1, 2, and 3 GPS points

Quiz (5) %1 each

Design 5%

Lab 4 Project 5%

Lab 5 Project 5%

Lab 6 Project 5%

Lab 7 Project 5%

Lab 8 Project 5%

Midterm Written Exam 10%

Final Written Exam 15%

Practical Exam 40%

8


FS2-207F



What is JavaScript?JavaScript is the scripting

language of the web.

9

❖What is JavaScript?

❖ JavaScript is a client-side, object-oriented language.

❖ It is executed from the user’s 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.


FS2-207F



Brief History

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


FS2-207F



Brief History

11


❖ JavaScript’s medium is the browser.

• Good: JavaScript needs no plugin, it is native to all browsers.

• Bad: Anyone here enjoy IE6?


FS2-207F



Brief History

12


❖ 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.


FS2-207F



Brief History

13

❖What can JavaScript do for our sites?

❖ Let’s look at some examples of JS in action:

❖ http://www.portagelibrary.info/

❖ http://www.hotel-oxford.ro

❖ http://www.qlear.nl

❖ http://www.meebo.com

❖ ...more

Brief History

http://www.portagelibrary.info/

http://www.hotel-oxford.ro/

http://www.qlear.nl/

http://www.meebo.com/

14

❖Browser Compatibility

❖ We’ll 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


FS2-207F



Brief History

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 you’ve learned for Flash will carry over to JavaScript... some examples:

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

❖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!)


FS2-207F



Brief History

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.

❖ JavaScript’s 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

Writing JavaScript

20

❖Document Behaviors

❖ JavaScript is included as part of a web document (such as an html file)

❖ Our code is placed in an open <script></script> tag element

❖ The script tag will also require a mime-type declaration of “text/javascript”.

Writing JavaScript

21

❖ In the head, the script’s code is run before the body is rendered.

❖ In the body, the script’s code is run in the order of the elements around it.

Writing JavaScript

<head><script type=”text/javascript”></script>

</head>

<body><script type=”text/javascript”></script>

</body>

22

❖External Scripts

❖ The method we’ll 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 file’s url.

❖ Common practice is to use a “js” folder to contain your script files.

Writing JavaScript

<script type=”text/javascript” src=”js/myscript.js”></script>

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

❖“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)...

❖ We’ll be discussing far better approaches later on.

Writing JavaScript

document.write(“<p>Paragraph</p>”);

25


❖ 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.


FS2-207F



Writing JavaScript

alert(“Hello, world!”);

26


❖ In our documents, loading order is crucial...

• <head> runs before <body>

• 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

Lecture Activity

1. Begin by creating an html document

2. Create a script in the header, using an external file

<script type=”text/javascript” src=”js/day1.js”></script>

3. In that script, add an alert: alert(“Hello World”);

4. In the <body>, create an h1 with some text.

5. After that paragraph, add the same script tag again (with same src).

• Then add another h1 to the end of the body.

• Run the html document, notice the loading order of the content and alerts.

Writing JavaScript

28

JavaScript Variables

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

❖ 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

❖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

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

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


FS2-207F



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


FS2-207F



<br />5 mins.

36


FS2-207F



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. Here’s any empty array:

❖ Arrays can hold any value type, separated by comma

var myArr = [ ];

var myArr = [“First”, 2, function(){}, true];

37


FS2-207F



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


FS2-207F



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] // truemyArr[2][0] // 1

39


FS2-207F



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


FS2-207F



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


FS2-207F



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 object’s properties inside the literal, separating by comma...

person = {“name”:“Bob”, “age”:80, “rapper”:true};

person = {name:“Bob”, age:80, rapper:true};

key:value

key:value

42


FS2-207F



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


FS2-207F



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


FS2-207F



Writing JavaScript

❖Functions❖ Let’s 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 1var myCounter = function(){myctr++; // increments our number by 1document.write(myctr); // outputs the new result};

myCounter(); // will ouput “2” to the page

myCounter(); // will ouput “3” to the page

45


FS2-207F



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, we’ll 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


FS2-207F



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


FS2-207F



Writing JavaScript

❖Functions

var myctr = 1;

var myCounter = function(newct){

myctr += newct;

document.write(myctr);

};

myCounter(5);

myCounter(2);

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

JavaScript: Variable Scope

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 doesn’t exist in the current scope, through lexical scoping it will try to find the variable in a parent block.


FS2-207F



Writing JavaScript

51

❖Variable Scope


FS2-207F



Writing JavaScript

52


FS2-207F



Writing JavaScript

❖Functions

var myctr = 1; function myCounter ( newct ) {myctr += newct; document.write(myctr); };

myCounter(5);

53


FS2-207F



Writing JavaScript

❖Functions

var myctr = 1; function myCounter ( newct ) {var myctr = newct; };

myCounter(5);document.write(myctr);

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.

❖ You’ll notice JavaScript is only executed as it runs. Since the engine exists in the browser, we’ll 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.asp


FS2-207F



Writing JavaScript

55


FS2-207F



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


FS2-207F



labpm

1 michael smotherman lectures 1:15pm fs2-207f brandon bombassei, alejandro campos labs 5pm-9pm...

Documents

pm fs2

alejandro campos labs

f brandon bombassei

e brief history slide

e swa course info slide

zip slide

javascript work

e weekdaylecturelab