Javascript

שישה ימים עם ג’אווהסקריפט

Tuesday, October 16, 12


Intro To JS



Intro To JS JS Events



Intro To JS JS Events Data




Functions




Functions OO JS




Functions OO JS Pro JS


[email protected]

http://mobileweb.ynonperek.com

לכל שאלה...


mailto:[email protected]




על השפה


על השפה

“We envisioned a much livelier Web consisting of pages that acted more like applications”


צד לקוח


Rendering Engine

<html><body> <h1>Hello World</h1> <script src="code.js"></script> <p>All your bases are belongs to us</p></body></html>


http://december.com/html/4/element/html.html


http://december.com/html/4/element/body.html


http://december.com/html/4/element/h1.html




http://december.com/html/4/element/script.html




http://december.com/html/4/element/p.html








Rendering Engine




















Rendering Engine


Hello World



















Rendering Engine


Hello WorldAll your bases arebelongs to us


















DOM :עבודהשיטת

Div

HTMLDivElement

HTML

JavaScript


DOM Code

באמצעות משתנים ,HTML המחוברים ל

אנו יכולים לשלוט במה שקורה על

המסך

<p id="text">Hello JavaScript</p>

var p = document.querySelector('p#text');






JS קובץטעינת

<script src="file.js"></script>






JS בצבע שינוי

var p = document.querySelector('p#text');p.style.color = 'white';


שינוי צבע לפי שעהvar p = document.querySelector('p#text');p.style.color = 'white'; var now = new Date();if ( now.getMinutes() > 10 ) { p.style.background = 'green';} else { p.style.background = 'red';}


מה הלאה...

https://developer.mozilla.org/en-US/docs/JavaScript/A_re-introduction_to_JavaScript

http://ynonperek.com/javascript-exer.html









Intro To JS


[email protected]


לכל שאלה...






טיפול באירועים


טיפול באירועים

Click

Event Queue


Main Loop

ממתין לאירוע

מטפל באירוע


Event Handlers


Event Handlers

Html Element


Event Handlers

Html Element

Event


Event Handlers

Html Element

Event

Code


Event Handlers

Html Element

Event

Code

el.addEventListener


Event Handlers

Html Element

Event

Code

Event Handler

el.addEventListener


סוגי אירועים

click change

dblclick blur

submit keypress

רשימה מלאה:http://www.tutorialspoint.com/html5/

html5_events.htm


http://www.tutorialspoint.com/html5/html5_events.htm




מה הלאה...

Events at MDN: https://developer.mozilla.org/en-US/docs/DOM/event

Example Code: https://github.com/ynonp/6-days-of-javascript

Events Exercises: http://ynonperek.com/course/fed/javascript-dom-ex.html


https://developer.mozilla.org/en-US/docs/DOM/event




https://github.com/ynonp/6-days-of-javascript




http://ynonperek.com/course/fed/javascript-dom-ex.html




[email protected]


לכל שאלה...






בעבוע אירועים

img

div

document



img

div

document

targetcurrentTarget



img

div

document

target

currentTarget


this המשתנה

המשתנה this בתוך קוד טיפול באירוע מתייחס לאלמנט שעליו הופעל האירוע


תאימות בין דפדפנים

http://www.quirksmode.org/js/events_advanced.html






מה הלאה...

Events at MDN: https://developer.mozilla.org/en-US/docs/DOM/event

Example Code: https://github.com/ynonp/6-days-of-javascript

Events Exercises: http://ynonperek.com/course/fed/javascript-dom-ex.html














[email protected]


לכל שאלה...






ארגון מידעמערכים

אובייקטים


מערכים

מערך הינו רשימה סדורה של ערכים


מערכים


var arr = [1, 'a', 'b', 2, 7];


מערכים


1 ‘a’ ‘b’ 2 7

var arr = [1, 'a', 'b', 2, 7];


מערכים

פנייה ישירה לאיבר במערך החל מ-0

1 ‘a’ ‘b’ 2 7

arr[2] = ‘d’


מערכים

פנייה ישירה לאיבר במערך החל מ-0

1 ‘a’ ‘b’ 2 7

arr[2] = ‘d’

‘d’


מתי נשתמש במערכים

רשימת אנשי קשר

רכיבים במתכון

רשימת שירים באלבום


אובייקטיםאובייקט מאפשר אחסון ערכים על פי מפתחות



var me = { name: 'Ynon Perek', web: 'http://mobileweb.ynonperek.com'};



name Ynon Perek

web http://mobileweb.ynonperek.com

var me = { name: 'Ynon Perek', web: 'http://mobileweb.ynonperek.com'};


http://www.ynonperek.com


פנייה ישירה

ניתן לבצע פנייה ישירה למפתח באמצעותסוגריים מרובעים או נקודה

me.web = 'http://publicspeakr.blogspot.co.il';

name Ynon Perek

web http://mobileweb.ynonperek.com

me[“web”]='http://publicspeakr.blogspot.co.il';


http://publicspeakr.blogspot.co.il






פנייה ישירה

ניתן לבצע פנייה ישירה למפתח באמצעותסוגריים מרובעים או נקודה

me.web = 'http://publicspeakr.blogspot.co.il';

name Ynon Perek

web http://mobileweb.ynonperek.comhttp://publicspeakr.blogspot.co.il

me[“web”]='http://publicspeakr.blogspot.co.il';








פעולות נוספות

אפשר לעדכן מפתח לא קיים - ואז הוא יתווסף לאובייקט כמפתח/ערך חדש

הפקודה delete מוחקת מפתח/ערך מאובייקט


קריאה ותרגול

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects












[email protected]


JavaScript Templates







<div class="entry"> <h1>{{name}}</h1> <span>{{details}}</span></div>




{ name: "Jimmy Jones", details: "A friend of Ghandi"}




{ name: "Jimmy Jones", details: "A friend of Ghandi"}

<div class="entry"> <h1>Jimmy Jones</h1> <span> A friend of Ghandi </span></div>

+


קריאת המשך

http://handlebarsjs.com/









Functions


הגדרת פונקציות

var foo = function(x, y) { return x + y;};

function bar(x, y) { return x + y;}


דוגמאות


ארגומנטים var sum = function() { var sum = 0; for ( var i=0; i < arguments.length; i++ ) { sum += arguments[i]; } return sum;}; console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));


ארגומנטים

ארגומנט שהועבר בקריאה אבל לא צוין arguments בהגדרה נכנס למערך

ארגומנט שצוין בהגדרה אבל לא הועבר undefined בקריאה מקבל ערך


var :משתנים

x

y

z

f1

f2

f3


דוגמא: פונקציה המייצרת אובייקט


פונקציות בג’אווהסקריפט

לפונקציות יש מקום מאוד מרכזי בשפה

Namespaces & Scoping הן מהוות את הבסיס ל

Object Oriented הן מהוות את הבסיס ל


this הפרמטר

לכל פונקציה ניתן להעביר משתנה נוסף this שנקרא

משתנה זה כולל מידע נוסף שהפונקציה יכולה להתייחס אליו

דוגמאות


קריאת המשך

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Functions

http://ynonperek.com/course/mobile/javascript-exer.html












Functions


Javascript

Technology

Transcript of Javascript