Creative Web 2 - JavaScript
-
Upload
lukas-oppermann -
Category
Technology
-
view
89 -
download
0
Transcript of Creative Web 2 - JavaScript
![Page 1: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/1.jpg)
Creative Web 2.
![Page 2: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/2.jpg)
Git, like subversion (svn), is a…free versioning system
![Page 3: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/3.jpg)
A versioning system…saves changes to files in commits, !this keeps changes flexible and !file sizes small.
![Page 4: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/4.jpg)
Github is a…platform to collaborate using git !repositories
![Page 5: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/5.jpg)
Setting up git & github
![Page 6: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/6.jpg)
1. get a free github.com account"
2. download & install the github app"
• https://mac.github.com/"
• https://windows.github.com/"
3. Read the tutorial https://mac.github.com/
help.html
![Page 7: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/7.jpg)
A commit consists of…a commit message and the changes!to a file
![Page 8: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/8.jpg)
A commit message…should give you a brief idea of what changed with this commit
![Page 9: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/9.jpg)
Any file can be committed…code, image files, text documents, !presentations, …
![Page 10: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/10.jpg)
An introduction to JavaScript
![Page 11: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/11.jpg)
Linking external javascript files!"
<script type="text/javascript" src=“./libs/js/script.js"></script>""
src is the relative or absolute path to the file.""
type tells the brows what kind of script it is and"always needs to be text/javascript."
![Page 12: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/12.jpg)
In a JavaScript file…you can start writing js without any!more declarations.
![Page 13: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/13.jpg)
A variable is a container…that stores a value.
![Page 14: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/14.jpg)
Variables!"
Variables always need to be declared using the "var keyword.""
Otherwise they are defined globally, which could !lead to performance and security problems.!
![Page 15: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/15.jpg)
JavaScript has 4 types of variables!"
• string (text)!
• number (integer e.g. 3 or float e.g. 1.2)!
• object (key-value pairs)!
• array (key-value pairs with numbered keys)
![Page 16: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/16.jpg)
String!"
var variableName = ‘string’;""
A string is a simple text which needs to be "surrounded by single quotation marks."
![Page 17: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/17.jpg)
Number!"
var variableInt = 2; // integer"var variableFloat = 1.3; // float""
A number is defined without quotation marks."
![Page 18: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/18.jpg)
Objects!"
var obj = { "" ‘name’: ’Max’, "" ‘gender’: ’male’"};""
Objects are key-value pairs separated by :"The key has to be a string. The value may be a"string, object or even a function. "
![Page 19: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/19.jpg)
Objects!"
varObject.name "=> returns: Max"
varObject[‘gender’] "=> returns: male""
Object values are retrieved using the "dot-notation objectName.key or the "array-notation objectName[key].!
![Page 20: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/20.jpg)
Array objects!"
var arr = [ ‘item’, ’item 2’ ];"
Arrays are special objects. The key is assigned automatically and is an index (integer) starting "from 0."
![Page 21: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/21.jpg)
Array objects!"
arr[0] "=> returns: item""
Array object values are retrieved using the "array-notation arrayName[key].!
![Page 22: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/22.jpg)
A function…is a collection of commands.
![Page 23: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/23.jpg)
Function!"
var testFn = function( arguments ){"" // function code here"};""
Functions are stored to a variable and accept"arguments."
![Page 24: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/24.jpg)
Function!"
console.log( ‘message’ );""
To call a function use its name and provide "arguments if needed."
![Page 25: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/25.jpg)
Function!"
var helloWorld = function( name ){"" var say = ‘Hello ’+name+’.’;"" console.log(say);"};""
helloWorld(‘Peter’);"=> returns: Hello Peter""
You can call functions within functions and define "variables within functions.
![Page 26: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/26.jpg)
The idea of scope defines…where something is available.!"
You can’t access something that is"out of scope.
![Page 27: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/27.jpg)
Global scope!"
varName = ‘test’;""
Available everywhere. DO NOT USE THIS.
![Page 28: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/28.jpg)
Local scope!"
var varName = ‘test’; // inside the js document""
Available everywhere within the document.
![Page 29: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/29.jpg)
Local scope in function!"
var fn( ){" var varName = ‘test’;" console.log(varName); // returns: test"};""
console.log(varName); // returns: undefined""
Available within the function. Arguments are "always local variables to a function.
![Page 30: Creative Web 2 - JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c72b0d8b42a4e098b469e/html5/thumbnails/30.jpg)
Assignments1. Write an html pages and include an external js file."
• add a local variable"• add a function which does something with an
argument"• add a local variable to the function
2. Add an external css file and try the following"• use a css3 gradient on an html element"• use a transition on something using the :hover
pseudo-class"• use a box-shadow"• use border-radius on something