├── README.md ├── Week1 ├── code │ ├── part1.js │ └── part2.js ├── docs │ └── introduction_js.md └── readme.md ├── week2 ├── code │ ├── coercion.md │ ├── this.js │ └── thisreduce.js ├── docs │ ├── 1.Scope.md │ ├── 2.ExecutionContext.md │ ├── coercion.md │ └── readme.md ├── drafts │ ├── Closure.md │ ├── Objects.md │ ├── Prototypes.md │ ├── Scope(Global-Function-Block).md │ ├── call-apply-bind.md │ ├── es6 class.md │ ├── executioncontext&callstack.md │ ├── iife.md │ └── readme.md └── iife.md ├── week3 ├── code │ ├── examples.html │ ├── index.html │ ├── readme.md │ └── scripts │ │ ├── attributes.js │ │ ├── events.js │ │ ├── examples.js │ │ ├── manipulating.js │ │ ├── readme.md │ │ ├── selectingElements.js │ │ ├── style.js │ │ └── traversing.js ├── drafts └── drafts3 │ ├── DOM Attributes.md │ ├── Keyboard Events.md │ ├── LoadAndCustomEvent.md │ ├── Manipulating Style.md │ ├── ModulePatterns.md │ ├── Selectors.md │ ├── Traversing DOM with JavaScript.md │ ├── Understanding-DOM.md │ ├── createlement-appendchild-textcontent-innerhtml.md │ ├── mouse events.md │ └── readme.txt └── week4 ├── arraymethods.js ├── async.js ├── class.js ├── code.js ├── movies ├── index.html ├── scripts │ ├── data.js │ ├── helpers.js │ └── main.js └── style.css ├── prototype.js └── rest.js /README.md: -------------------------------------------------------------------------------- 1 | # Bootcamp Homepage 2 | 3 | ## WEEK 1 4 | 5 | ### Resources 6 | - [Introduction to Js](https://github.com/81-javascript-bootcamp/bootcamp-homepage/blob/main/Week1/docs/introduction_js.md) 7 | 8 | ### Code 9 | - [Introduction to Js](https://github.com/81-javascript-bootcamp/bootcamp-homepage/blob/main/Week1/docs/introduction_js.md) 10 | 11 | ### Further Learning 12 | - [Introduction to Js](https://github.com/81-javascript-bootcamp/bootcamp-homepage/blob/main/Week1/docs/introduction_js.md) 13 | -------------------------------------------------------------------------------- /Week1/code/part1.js: -------------------------------------------------------------------------------- 1 | // Value 2 | // 1, true, "hello", function(){} 3 | 4 | // Variable 5 | var hello; 6 | console.log(hello); 7 | let foo = "Hello World"; 8 | foo = "Başka bir şey"; 9 | const bar = "Hello World!"; 10 | //bar = "Başka bir değer"; 11 | let firstName = "John" 12 | const API_KEY = "sadasdnaskldanskdasnkdkasnd" 13 | // const PI = 3.14 14 | const car = {model: "Porsche", type: "Sports"}; 15 | car.model = "BMW"; 16 | //let firstName 17 | //let FIRSTNAME 18 | 19 | 20 | // Primitive values - Reference Values 21 | // typeof 22 | // primitive values 23 | // - number 24 | // - string 25 | // - boolean 26 | // - undefined 27 | // - null 28 | // - symbol 29 | 30 | // reference values 31 | // - objects 32 | // - arrays 33 | // - functions 34 | 35 | let number = 30; 36 | let isOkay = true; 37 | let text = "Hello"; 38 | 39 | let person = {name: "John"}; 40 | 41 | 42 | 43 | 44 | 45 | 46 | let name = "Mehmet"; 47 | let displayName = name; 48 | // let displayName = "Mehmet" 49 | 50 | name = "Ahmet"; 51 | 52 | console.log(name); 53 | console.log(displayName); 54 | 55 | // araba => 10101010101 56 | let araba = { 57 | type: "Sport", 58 | name: "Porche" 59 | }; 60 | 61 | // araba => 11001010101 62 | let baskabirAraba = { 63 | type: "Sport", 64 | name: "Porche" 65 | }; 66 | 67 | let baskaAraba = araba; 68 | 69 | baskaAraba.name = "Mercedes"; 70 | 71 | console.log(araba.name); 72 | console.log(baskaAraba.name); 73 | 74 | 75 | console.log(araba === baskaAraba); 76 | 77 | console.log(araba === baskabirAraba); 78 | 79 | 80 | let a = null; 81 | console.log(a); 82 | // null 83 | 84 | let b; 85 | console.log(b); 86 | // undefined 87 | 88 | let d = {}; 89 | console.log(d.name); 90 | // undefined 91 | 92 | if(null){console.log("Hello")} 93 | if(undefined){console.log("hELLO")} 94 | 95 | console.log(null !== undefined); 96 | console.log(null == undefined); 97 | 98 | 99 | 100 | // value, expression, statement 101 | // value üreten şeyler: expression 102 | let a = 5; 103 | let b = 3 + 5; 104 | // statement: bir aksiyon gerçekleştiren 105 | if(3>5){ 106 | console.log("işlem"); 107 | } 108 | 109 | // operators 110 | let z = 5 + 6; 111 | let b = 3 * 5; 112 | 113 | // arithmetic operators 114 | //+, *, -, **, /, %, ++, -- 115 | 116 | let toplam = 8; 117 | //toplam = toplam + 1; 118 | // toplam ++ 119 | 120 | let toplam = 8; 121 | //let a = toplam++; // a = 8, toplam = 9 122 | let b = ++toplam; // b= 9, toplam=9 123 | 124 | 125 | // assignment operators 126 | let a = 3; 127 | // += 128 | let x = 5; 129 | x += 3; 130 | x -= 3; 131 | // x = x - 3 132 | // x = 5 + 3; 133 | 134 | let text = "Hello" + " " + "World" 135 | 136 | // comparison operators 137 | // == equals to 138 | // === equal value and equal type 139 | // != not equal to 140 | // !== not equal value and not equal type 141 | // > greater than < less than >= <= 142 | // ? ternary 143 | 144 | 3 === "3" 145 | 146 | let age = 100; 147 | let isOld = age > 90 ? "Yes" : "No"; 148 | console.log(isOld); 149 | 150 | // logical operators 151 | // && logical and 152 | // || logical or 153 | // ! logical not 154 | 155 | console.log((3 > 2) && (5>4)) 156 | console.log((1 > 5) || (3 > 6) || (10 > 8)) 157 | 158 | const ornek = 3 && 5 && 1 && 0 && 2; 159 | console.log(ornek); 160 | 161 | const ornek2 = 0 || false || undefined || 0 || null; 162 | console.log(ornek2); 163 | 164 | const firstName = person && person.name && person.name.firstName; 165 | // optional chaining 166 | const firstName = person?.name?.firstName 167 | 168 | let isOpen = true; 169 | function toggleDrodown(){ 170 | isOpen = !isOpen 171 | } 172 | 173 | if(!!name){ 174 | 175 | } 176 | -------------------------------------------------------------------------------- /Week1/code/part2.js: -------------------------------------------------------------------------------- 1 | 2 | function multiply(a,b){ 3 | console.log(a*b) 4 | } 5 | 6 | // If else statements 7 | if(3>5){ 8 | console.log("3, 5ten büyüktür"); 9 | }else{ 10 | console.log("3, 5ten küçüktür"); 11 | } 12 | 13 | function logTruthiness(val){ 14 | if(val){ 15 | console.log("Truthy!"); 16 | }else{ 17 | console.log("Falsy!"); 18 | } 19 | } 20 | 21 | logTruthiness(true); 22 | // Truthy 23 | 24 | logTruthiness({}); 25 | // Truthy 26 | 27 | logTruthiness([]); 28 | // Truthy 29 | 30 | logTruthiness("some string"); 31 | // Truthy 32 | 33 | logTruthiness(3.14); 34 | // Truthy 35 | 36 | logTruthiness(new Date()); 37 | // Truthy 38 | 39 | logTruthiness(false); 40 | logTruthiness(null); 41 | logTruthiness(undefined); 42 | logTruthiness(NaN); 43 | logTruthiness(0); 44 | logTruthiness(""); 45 | // Falsy 46 | 47 | 48 | const getFee = function(){ 49 | return isMember ? "$2.00" : "$10.00"; 50 | } 51 | 52 | if(a == 5){ 53 | console.log("a 5tir") 54 | }else if(a === 3){ 55 | console.log("a 3 tür") 56 | }else{ 57 | console.log("a 3 ya da 5 değildir"); 58 | } 59 | 60 | // Switch case 61 | let price = 1; 62 | 63 | switch (price){ 64 | case 1: 65 | alert("So cheap"); 66 | break; 67 | case 2: 68 | alert("Affordable"); 69 | break; 70 | case 3: 71 | alert("too expensive"); 72 | break; 73 | default: 74 | alert("Unkown price"); 75 | } 76 | 77 | /* 78 | // Loops 79 | // while loop 80 | let sayi1 = 10 81 | while(sayi1<10){ 82 | console.log(sayi1); 83 | sayi1++; 84 | } 85 | 86 | // do..while loop 87 | let sayi2 = 10; 88 | do{ 89 | console.log(sayi2); 90 | sayi2++; 91 | } while(sayi2 < 10) 92 | 93 | */ 94 | 95 | for(let i=0; i<10; i++){ 96 | if(i ===2){ 97 | continue; 98 | } 99 | console.log(i); 100 | } 101 | let i=10 102 | for(; i< 10 ; i++){ 103 | break; 104 | } 105 | 106 | // Functions 107 | // Function Declarations ve Function Expressions 108 | 109 | /* 110 | multiply(3,5); 111 | addition(3,5); 112 | 113 | function multiply(a,b){ 114 | console.log(a*b) 115 | } 116 | 117 | const addition = function (a,b){ 118 | console.log(a + b); 119 | } 120 | 121 | multiply(3,5); 122 | addition(3,5); 123 | */ 124 | 125 | /* 126 | console.log(degisken); 127 | let degisken = 5; 128 | console.log(degisken); 129 | */ 130 | 131 | arr.forEach(function(item, index){ 132 | 133 | }); 134 | 135 | /* 136 | (function multiply(a,b){ 137 | console.log(a*b) 138 | })(3,5); 139 | 140 | */ 141 | 142 | /// RegEx 143 | /* 144 | const regexp = new RegExp("pattern", "flags"); 145 | const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 146 | 147 | re.test("a@b.com"); 148 | */ 149 | -------------------------------------------------------------------------------- /Week1/docs/introduction_js.md: -------------------------------------------------------------------------------- 1 | ## JavaScript'e giriş 2 | Javascript en başta "web sitelerini interaktif hale getirmek" için oluşturulmuştur. 3 | JavaScript'de yazılan programlar "script" olarak adlandırılır ve web sayfasının HTML'i içersinde yer alır. 4 | 5 | > En başta JavaScript'in ismi "LiveScript" di. Ancak o zamanlar Java çok popülerdi ve Java'nın kardeşi olarak bu dile JavaScript ismini vermek bu popülariteden faydalanmak için güzel bir fırsattı. Daha sonra JavaScript hızla gelişerek ECMAScript adını aldı ve şu an Java ile hiçbir bağlantısı bulunmuyor. 6 | 7 | Günümüzde JavaScript sadece tarayıcıda değil sunucu tarafında da çalışabilmektedir, daha doğrusu JavaScript engine içeren herhangi bir cihazda çalışabilir. 8 | 9 | V8 – Chrome ve Opera. 10 | 11 | SpiderMonkey – Firefox. 12 | 13 | IE için “Chakra", Microsoft Edge için “ChakraCore”... 14 | 15 | ### JavaScript ile tarayıcıda neler yapılabilir? 16 | 17 | - Sayfaya yeni HTML eklemek, var olanı değiştirmek, stillendirmek. 18 | - Kullanıcı aksiyonlarıyla çalışmak (Mouse tıklamaları, klavye tuşlarına basılması, mouse imlecinin hareketi) 19 | - Uzak sunuculara istekler yollamak, dosya yüklemek ve indirmek, 20 | - Cookiler yazmak ce okumak, kullanıcıya mesajlar göstermek, 21 | - Client-side data tutmak (LocalStorage) 22 | 23 | ### Hello, World! 24 | Şimdi JavaScript'i çalıştırmak için bir ortama ihtiyacımız var. Tarayıcının iyi bir seçim olabileceğini bu aşamada biliyoruz. 25 | 26 | #### Script tag'i 27 | JavaScript kodları HTML'de hemen her yere script tagları içersinde yerleştirilebilir. 28 | 29 | ```html 30 | 31 | 32 | 33 |

Script öncesi...

34 | 35 | 38 | 39 |

Script sonrası

40 | 41 | 42 | ``` 43 | 44 | >type attribute'u: 50 | 51 | ``` 52 | 53 | ### Daha fazlası 54 | - JavaScript en başta sadece tarayıcıda çalışacak şekilde tasarlandı, ancak şu an başka ortamlarda da kullanılabilmekte 55 | - JavaScript, tarayıcıda HTML, CSS ile entegre çalışarak şu anda alternatifsiz pozisyonda 56 | - Şu anda JavaScripte transpile olabilen(çevrilebilen) bir çok dil de bulunmakta. (Typescript, CoffeScript, Flow...) 57 | 58 | ### Tasks 59 | - Kullanıcıya "Hello, World" mesajı çıkartan bir alert gösteriniz. 60 | - Yukarıdaki taski external script kullanarak yapınız. 61 | -------------------------------------------------------------------------------- /Week1/readme.md: -------------------------------------------------------------------------------- 1 | ##Gelecek hafta hazırlık 2 | 3 | ```js 4 | for(var i = 1; i<=10; i = i + 2){ console.log("Guncel deger", i); } 5 | for(let i = 1; i<=10; i = i + 2){ console.log("Guncel deger", i); } 6 | ``` 7 | -------------------------------------------------------------------------------- /week2/code/coercion.md: -------------------------------------------------------------------------------- 1 | // true + false 2 | // 1 + 0 3 | // 1 4 | 5 | 6 | // 12 / "6" 7 | // 12 / 6 8 | // 2 9 | 10 | 11 | // "number" + 15 + 3 12 | // "number" + 15 13 | // "number15" 14 | // "number15" + 3 15 | // "number153" 16 | 17 | // 15 + 3 + "number" 18 | // 15 + 3 19 | // 18 20 | // 18 + "number" 21 | // "18number" 22 | 23 | 24 | // [1] > null 25 | // "1" > null 26 | // 1 > 0 27 | // true 28 | 29 | // [] + [] 30 | // "" + "" 31 | // "" 32 | 33 | // "foo" + + "bar" 34 | // "foo" + NaN 35 | // "fooNaN" 36 | 37 | // "true" == true 38 | // NaN == 1 39 | // false 40 | 41 | 42 | // ["x"] == "x" 43 | // "x" == "x" 44 | // true 45 | 46 | 47 | // [] + null + 1 48 | // [] + null 49 | // "" + null 50 | // "null" 51 | // "null" + 1 52 | // "null1" 53 | 54 | 55 | // 0 || "0" && {} 56 | // "0" && {} 57 | // {} 58 | 59 | 60 | //[1,2,3] == [1,2,3] 61 | // false 62 | console.log({}+[]+{}+[1]) 63 | // {}+[]+{}+[1] 64 | // +[]+{}+[1] 65 | // 0 + {} + [1] 66 | // 0 + "[object Object]" + [1] 67 | // "0[object Object]" + [1] 68 | // "0[object Object]" + "1" 69 | // "0[object Object]1" 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /week2/code/this.js: -------------------------------------------------------------------------------- 1 | /// THIS 2 | 3 | // 1. Implicit 4 | 5 | const user = { 6 | name: "Joe", 7 | age: 30, 8 | greet(){ 9 | console.log("Hello, my name is " + this.name); 10 | } 11 | } 12 | 13 | user.greet(); 14 | 15 | const user = { 16 | name: "Joe", 17 | age: 30, 18 | greet(){ 19 | /// this = user 20 | console.log("Hello, my name is " + this.name); 21 | }, 22 | mother: { 23 | name: "Stacey", 24 | greet(){ 25 | /// this = mother 26 | console.log("Hello, my name is " + this.name); 27 | } 28 | } 29 | } 30 | 31 | user.mother.greet(); 32 | 33 | 34 | // 2. Explicit 35 | // call, apply, bind 36 | 37 | function greet(language1, language2){ 38 | console.log("Hello, my name is " + this.name + " and I know " + language1 + ", " + language2) 39 | } 40 | 41 | function greet2(languages){ 42 | const userLanguages = languages.join(", "); 43 | console.log("Hello, my name is " + this.name + " and I know " + userLanguages) 44 | } 45 | 46 | const user = { 47 | name: "Mary", 48 | age: 26 49 | } 50 | 51 | greet.call(user, "JavaScript", "Python"); 52 | 53 | let languages= ["JavaScript", "Python"]; 54 | greet.apply(user, languages); 55 | 56 | let myFunc = greet.bind(user, "JavaScript", "Python"); 57 | 58 | let myFunc2 = greet2.bind(user, languages) 59 | 60 | myFunc(); 61 | 62 | 63 | // 3. new Binding 64 | 65 | function User(name, age){ 66 | this.name = name; 67 | this.age = age; 68 | } 69 | 70 | 71 | const Joe = new User("Joe", 27); 72 | 73 | Joe.name 74 | Joe.age 75 | 76 | 77 | // 4. lexical binding 78 | 79 | const user = { 80 | name: "Joe", 81 | age: 27, 82 | languages: ["JavaScript", "Python", "Rust"], 83 | greet(){ 84 | const hello = "Hello, my name is" + this.name + " and I know"; 85 | 86 | const langs = this.languages.reduce((str, lang, i) => { 87 | if(i === this.languages.length - 1){ 88 | return str + " and " + lang 89 | } 90 | 91 | return str + "," + lang; 92 | }, "") 93 | 94 | console.log(hello + langs); 95 | } 96 | } 97 | 98 | user.greet(); 99 | 100 | 101 | // 5. window binding 102 | window.age = 27; 103 | 104 | function sayAge(){ 105 | // this = window. 106 | console.log("My age is" + this.age); 107 | } 108 | 109 | sayAge(); 110 | /// window.sayAge(); 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /week2/code/thisreduce.js: -------------------------------------------------------------------------------- 1 | const arr = [1,2,3,4,5,6]; 2 | 3 | arr.reduce(function(accumulator, currentValue){ 4 | // 1. accumulator = 0, currentValue = 1, accumulator = 1 5 | // 2. accumulator = 1, currentValie = 2, accumulator = 3; 6 | // 3. accumuaator = 3, currentValue = 3, accumulator = 6 7 | ///..... 8 | return accumulator + currentValue; 9 | }, 0) 10 | 11 | 12 | arr.reduce(function(acc, crr){ 13 | return acc*crr 14 | }, 1) 15 | 16 | 17 | const user = { 18 | name: "John", 19 | sayMyName(){ 20 | setTimeout(()=>{ 21 | console.log("Says " + this.name + " after 1 second"); 22 | }, 1000); 23 | } 24 | } 25 | 26 | user.sayMyName(); 27 | 28 | 29 | -------------------------------------------------------------------------------- /week2/docs/1.Scope.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /week2/docs/2.ExecutionContext.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /week2/docs/coercion.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /week2/docs/readme.md: -------------------------------------------------------------------------------- 1 | 1. Coercion 2 | - Explicit Coercion 3 | - Implicit Coercion 4 | 5 | 2. Scope (Mehmet ve Umutcan) 6 | - Global Scope 7 | - Function Scope 8 | - Block Scope 9 | - Hoisting 10 | - Let vs Var 11 | 12 | 3. Closures (Nisan) 13 | 14 | 4. IIFE (Gürhan) 15 | 16 | 5. Execution context, call stack (Selen) 17 | 18 | 6. This keyword 19 | 20 | 7. Objects (Gizem) 21 | - https://javascript.info/object#square-brackets 22 | 23 | 8. Prototypes (Mahmut) 24 | 25 | 9. bind, apply, call (Tolunay) 26 | 27 | 10. ES6 Class keyword (Bahar) 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /week2/drafts/Closure.md: -------------------------------------------------------------------------------- 1 | # Closure 2 | 3 | Namı değer Closure, diğer adıyla backpack'ten size bu yazıda bahsetmeye çalışacağım. Öncelikle aralarda bahsi geçen bazı kavramları biliyor olduğunuzu varsayarak bu yazıyı yazdığımı belirtmek isterim. Örneğin: **Global Memory**, **Heap**, **Call Stack**, **Execution Context**... Evet artık hazırsanız başlayabiliriz. 4 | 5 | Ben bu konudan bahsederken backpack terimini kullanmayı daha yararlı görüyorum. Bu yüzden metafor olarak bunu kullanarak devam edeceğim bu yazıda. 6 | 7 | Peki nedir bu Backpack? 8 | 9 | Bildiğiniz gibi herhangi bir fonksiyon execute edildiği anda (çağırıldığında) kendi Execution Context'ini ve beraberinde Local Memory'sini yaratır. Bunu bir mini program gibi düşünebiliriz. En dışta her zaman Call Stack'in en altında bulunan ve her şeyden önce oluşturulan Global Execution Context gelir. Burada globalde tanımlı variable ve function'larımız bulunur. Bu context içerisinde çağrılan her fonksiyon çağrılma sırasına göre Call Stack'e push edilir. Ve en son çağırılan function önce işleme alınır (LIFO - Last In First Out). İşleme alınan function işi bittiğinde yani return olduğu anda Call Stack'ten pop edilir ve Garbage Collector tarafından memory'den silinir. Bu da demek oluyor ki, bizim mini program gibi çalışan functionlarımız'ın içerisinde bulunan ve local memory'i de tutulan (local state) datalarımız da silinmiş olur. Kod üzerinde inceleyerek devam edelim; 10 | 11 | ```javascript 12 | function createFunction() { 13 | function multiplyBy2(num) { 14 | return num * 2; 15 | } 16 | return multiplyBy2; 17 | } 18 | const generatedFunc = createFunction(); 19 | const result = generatedFunc(3); // 6 20 | ``` 21 | Bildiğiniz üzere JavaScript'te bir fonksiyon başka fonksiyonu return edebilir. Bu örnekte **createFunction** fonksiyonu çağırılıyor ve **multiplyBy2** fonksiyonunu Global Memory'de bulunan **generatedFunc** değişkenine atıyor. Burada kilit nokta; **generatedFunc** ile **createFunction** arasında herhangi bir bağlantı olmayışıdır. **generatedFunc** sadece **createFunction**'ın tek çağırımlık bir sonucudur. JavaScript'in sekron çalışmasından dolayı generatedFunc bir kez çağırılıp herhangi bir değer return ettikten sonra (Bu örnekte 6 değeri return ediliyor) memory'den local memory'sinde bulunan **num** (Bu örnekte num = 3) değeriyle birlikte silinecek. Tekrar çağırıldığında da sıfırdan oluşturulacak ve local memory'si de haliyle yeniden oluşturulmuş olacak. 22 | 23 | Peki ben fonksiyonumun çağırılmasından sonra önceki çağırımını hatırlamasını istiyorsam ne olacak? 24 | 25 | Yani function'ım return olsun ama içerisinde kendisine ait olan datalar kaybolmasın. Tekrar bu function'ı çağırdığımda önceki çağırımını hatırlasın istiyorum. Bir nevi function'a kalıcı bir hafıza (cache/persistent memory) kazandırmak istiyorum diyebiliriz. Burada aslında Backpack'in daha uzun adını da sizinle paylaşmak ve isim üzerinden ilerlemek isterim. 26 | 27 | ### Persistent Lexical Scope Reference Data (P.L.S.R.D) 28 | 29 | Aslında bu uzun ama bir o kadar da Closure'u açıklayan bir tanımlama. Örnek kod üzerinden ilerleyerek devam edelim. 30 | ```javascript 31 | function outer() { 32 | let counter = 0; 33 | function incrementCounter() { 34 | counter++; 35 | } 36 | return incrementCounter; 37 | } 38 | const myFunction = outer(); 39 | myFunction() // 1 40 | myFunction() // 2 41 | ``` 42 | Kodu satır satır inceleyecek olursak; Global Memory'de bir **outer** fonksiyonum ve henüz undefined durumunda olan **myFunction** adında bir değişkenim var. **outer** fonksiyonu çağrılıyor bu da demek oluyor ki kendi Execution Context'i oluşacak. Aynı zamanda fonksiyon Call Stack'e de eklenecek. Bu şekilde Call Stack yardımıyla JS Engine bizim işlemlerimizin sırasını da takip etmiş oluyor. 43 | 44 | Kodda gördüğümüz üzere **outer** fonksiyonu, **incrementCounter** adında bir fonksiyonu kendi scope'unda tanımlayıp sonrasında return ediyor. Daha sonra bu return olan **outer** fonksiyonu Call Stack'ten çıkarılıyor ve Garbage Collector tarafından temizleniyor. Yani artık daha sonra dönüp bakabileceğim outer'a ait bir Execution Context'im yok. Devamında dönen **incrementCounter** fonksiyonunu **myFuncion** adında başka bir değişkene atıyoruz. Burada **myFunction'ının** ilk çağırımında **1**, ikinci çağırımında **2** değerini elde ediyoruz. Bu da demek oluyorki **myFunction** önceki değerini hatırlayan kalıcı bir hafızaya (state'te) sahip. İşte bu nokta da tanıma tekrar dönebiliriz. 45 | 46 | **incrementCounter** fonksiyonu return olurken beraberinde Lexical Scope'unda ne varsa hepsini **Backpack**'ine atıyor. Lexical Scope'unda **counter = 0** değeri mevcut. Bunu **[[scope]]** adında bir hidden property'nin içerisine alarak **reference**'ını heap'e taşımış oluyor. Artık benim globalde erişebileceğim **incrementCounter**'e ait kalıcı bir değerim mevcut. Ve ben bu fonksiyonu ne zaman çağırırsam önce kendi scope'una bakacak ve orada counter'ı bulamayıp bir üst scope olan Global Scope'una gidecek. Backpack'ine bakacak ve oradan counter'a erişip gerekli işlemleri gerçekleştirebilecek. 47 | 48 | Closure'u kullandığımız bir çok alan var. Bunlardan bazıları: 49 | 50 | - Iterator ve Generator'lar 51 | - Module Pattern 52 | - Asynchronous JavaScript (Callback ve Promise'ler) 53 | - Functional Programming (Curriying) 54 | 55 | Bu konu anlat anlat bitmez. O yüzden bir yerde noktalamam gerekiyor 🙂 Bu sebeple daha fazla devam etmiyorum. Fakat bu yazıyı okurken "bu ne ya ilk kez duydum" dediğiniz şeyler varsa ve bunları araştırmanıza vesile olduysam ne mutlu bana. İyi kodlamalar 😇 56 | -------------------------------------------------------------------------------- /week2/drafts/Objects.md: -------------------------------------------------------------------------------- 1 | # Objects 2 | 3 | JavaScriptte 8 tane veri tipi vardır. Bunların yedi tanesi primitive olarak adlandırılır(string, boolean, number, bigInt, null, undefined,symbol). 4 | Diğer veri tipi de objectdir. 5 | 6 | Objectler ise veriyi key ve value olarak tutmamızı sağlar. 7 | 8 | Objeler {...} arasında tanımlanır. 9 | 10 | ```javascript 11 | let propertyName: { 12 | key: value 13 | } 14 | ``` 15 | 16 | Objeler key değerlerine göre saklanır. 17 | 18 | Boş bir object yaratmak için : 19 | 20 | ```javascript 21 | let user = new Object(); // "object constructor" syntax 22 | let user = {}; // "object literal" syntax 23 | ``` 24 | # Özellikleri 25 | 26 | ```javascript 27 | let user = { // an object 28 | name: "John", // by key "name" store value "John" 29 | age: 30 // by key "age" store value 30 30 | }; 31 | ``` 32 | 33 | Burada tanımlanan user property name olarak geçer. Object içerisindeki name ise key olarak adlandırılır aynı zamanda da (name ya da identifier olarak da bilinir) 34 | 35 | İkinci name age ise 30 valuesuna sahiptir aynı zaman da name inde value değeri John'dur. 36 | 37 | 38 | Objelerde istediğimiz zaman ekleme, silme ve okuma işlemleri yapabiliriz. 39 | 40 | // get property values of the object: 41 | 42 | ```javascript 43 | alert( user.name ); // John 44 | alert( user.age ); // 30 45 | ``` 46 | 47 | ```javascript 48 | user.isAdmin = true; // Bu şekilde objeye değer ekleme yapabiliriz. 49 | delete user.age; // Objeden eleman silme işlemini de bu şekilde gerçekleştirebiliriz. 50 | ``` 51 | **Obje tanımlamaları yaparken boşluk içeremez, özel karakterlerle( $ ve _ gibi) ve rakamlarla başlayamaz.** 52 | 53 | // this would give a syntax error 54 | 55 | ```javascript 56 | user.likes birds = true 57 | ``` 58 | // bu gösterimde arada boşluk içerdiği için çalışmayacaktır. 59 | 60 | Alternatif olarak **square bracket notation** gösterimiyle string olarak nesneye eleman ekleyebiliriz. 61 | 62 | ```javascript 63 | let user = {}; 64 | // set 65 | user["likes birds"] = true; 66 | // get 67 | alert(user["likes birds"]); // true 68 | // delete 69 | delete user["likes birds"]; 70 | user: { 71 | "likes birds": true // Burada user objesini quare bracket notation gösterimiyle set ettiğimizde alacağımız sonuç bu şekilde olacaktır. 72 | } 73 | ``` 74 | 75 | user["likes birds"] = true; // Bu gösterimde ise köşeli paranter içerisinde key değerini verdiğimizde o objeye erişip value değerini okuyabilir ya da değiştirebilir. 76 | 77 | # Object propertylerine erişim 78 | 79 | ```javascript 80 | let user: { 81 | name: "John", 82 | age: 30 83 | } 84 | // 1 85 | user.name; 86 | // 2 87 | user["name"]; 88 | ``` 89 | 90 | **user["likes birds"] = true; ** 91 | // Yukarıda tanımladığımız objeye de köşeli paranter içerisinde key değerini verdiğimizde o objeye erişip value değerini okuyabilir ya da değiştirebiliriz. 92 | 93 | **Genellikle objeleri real kod ortamında bu şekilde kullanırız.** 94 | 95 | ```javascript 96 | function makeUser(name, age) { 97 | return { 98 | name: name, 99 | age: age, 100 | // ...other properties 101 | }; 102 | } 103 | ``` 104 | 105 | let user = makeUser("John", 30); 106 | alert(user.name); // John 107 | 108 | ``` 109 | Yukarıdaki fonksiyonun parametleriyle objenin propertyleri aynı değer böyle olduğunda **shorthand** kullanabiliriz. 110 | ```Javascript 111 | function makeUser(name, age) { 112 | return { 113 | name, // same as name: name 114 | age, // same as age: age 115 | // ... 116 | }; 117 | } 118 | ``` 119 | 120 | # Property adlandırılması 121 | 122 | Değişkenlerde for, let, return gibi isim değerleri kullanamayız fakat objelerde tanımlayabiliriz. 123 | 124 | 125 | ```Javascript 126 | // these properties are all right 127 | let obj = { 128 | for: 1, 129 | let: 2, 130 | return: 3 131 | }; 132 | alert( obj.for + obj.let + obj.return ); // 6 133 | ``` 134 | 135 | # Nested JS Objects 136 | 137 | ```Javascript 138 | let person = { 139 | firstName: "James", 140 | lastName: "Bond", 141 | age: 25, 142 | address: { 143 | id: 1, 144 | country:"UK" 145 | } 146 | }; 147 | person.address.country; // returns "UK" 148 | ``` 149 | 150 | # Method shorthand 151 | 152 | ```Javascript 153 | let person = { 154 | firstName: 'John', 155 | lastName: 'Doe', 156 | greet: function () { 157 | console.log('Hello, World!'); 158 | }, 159 | getFullName: function () { 160 | return this.firstName + ' ' + this.lastName; 161 | } 162 | }; 163 | console.log(person.getFullName()); // 'John Doe' 164 | ``` 165 | 166 | # The “for…in” loop 167 | 168 | ```Javascript 169 | let user = { 170 | name: "John", 171 | age: 30, 172 | isAdmin: true 173 | }; 174 | for (let key in user) { 175 | // keys 176 | alert( key ); // name, age, isAdmin 177 | // values for the keys 178 | alert( user[key] ); // John, 30, true 179 | } 180 | ``` 181 | 182 | # Sorular 183 | 184 | 1-) 185 | ```Javascript 186 | let school = { 187 | name: 'Vivekananda School', 188 | displayInfo : function(){ 189 | console.log(`${school.name.split(' ')[0]}`); 190 | } 191 | } 192 | school.displayInfo(); // Çıktısı ne olur ? 193 | ``` 194 | 195 | 2-) 196 | ```Javascript 197 | const object1 = new Object(); 198 | object1.property1 = 42; 199 | 200 | console.log(object1.hasOwnProperty('property1')); // Çıktısı ne olur ? 201 | ``` 202 | 203 | 3-) 204 | ```Javascript 205 | 206 | let a = { 207 | x: "y" 208 | } 209 | console.log("x" in a); // Çıktısı ne olur ? 210 | ``` 211 | -------------------------------------------------------------------------------- /week2/drafts/Prototypes.md: -------------------------------------------------------------------------------- 1 | Prototypal Inheritance 2 | 3 | String array ya da objelerle birlikte .length .join() .split() gibi built-in metodları nasıl kullanabildiğimizi hiç düşündünüz mü? Bunların hepsi aslında prototypal inheritance denen bir kavramdan geliyor. 4 | 5 | Genellikle birden fazla obje yaratmamız gereken ya da birşeyleri alıp özelliklerini extend etmeyi ve kullanmayı istediğimiz durumlarla karşılarız. JavaScript'te, bu gibi durumlar için objelerin özel bir gizli özelliği [[Prototype]] (burada adlandırıldığı gibi) vardır; bu, null veya başka bir objeye referans edebilir. Bu objeye "prototip" denir. 6 | 7 | Objeden bir propertyi okuduğumuzda ve eksik olduğunda, JavaScript onu prototipten otomatik olarak alır. Programlamada böyle bir şeye "prototypal inheritance" denir. Bununla ilgili bazı örnekleri ve bunun üzerine inşa edilen bazı dil özelliklerini inceleyeceğiz. 8 | 9 | let animal = { 10 | eats: true 11 | }; 12 | let rabbit = { 13 | jumps: true 14 | }; 15 | 16 | rabbit.__proto__ = animal; // sets rabbit.[[Prototype]] = animal 17 | 18 | Şimdi rabbitten bir propertyi okursak ve bu eksikse, JavaScript onu animaldan otomatik olarak alır. 19 | 20 | Örneğin: 21 | 22 | let animal = { 23 | eats: true 24 | }; 25 | let rabbit = { 26 | jumps: true 27 | }; 28 | 29 | rabbit.__proto__ = animal; // (*) 30 | 31 | // Artık her ikisini de rabbit'te bulabilirsiniz. 32 | alert( rabbit.eats ); // true (**) 33 | alert( rabbit.jumps ); // true 34 | 35 | 36 | Burada (*) satırı, animalı bir rabbit prototipi olarak ayarlar. 37 | 38 | Daha sonra, alert rabbit.eats (**) propertysini okumaya çalıştığında, bu rabbitte değildir, bu nedenle JavaScript [[Prototype]] referansını takip eder ve animalda bulur (aşağıdan yukarıya bakın): 39 | 40 | Burada 'animal rabbitin prototipidir' veya 'rabbit prototip olarak animaldan miras kalır' diyebiliriz. 41 | 42 | Dolayısıyla, hayvanın birçok yararlı özelliği ve metodu varsa, otomatik olarak tavşanda kullanılabilir hale gelirler. Bu tür özelliklere "inheritance" denir. 43 | 44 | Hayvanda bir metodumuz varsa, rabbitte de çağrılabilir: 45 | 46 | let animal = { 47 | eats: true, 48 | walk() { 49 | alert("Animal walk"); 50 | } 51 | }; 52 | 53 | let rabbit = { 54 | jumps: true, 55 | __proto__: animal 56 | }; 57 | 58 | // walk prototipten alınmıştır. 59 | rabbit.walk(); // Animal walk 60 | 61 | Method prototipten otomatik olarak şu şekilde alınır: 62 | animal: 63 | eats: true 64 | walk: function -------> rabbit: jumps: true 65 | 66 | Prototip zinciri daha da uzun olabilir: 67 | 68 | let animal = { 69 | eats: true, 70 | walk() { 71 | alert("Animal walk"); 72 | } 73 | }; 74 | 75 | let rabbit = { 76 | jumps: true, 77 | __proto__: animal 78 | }; 79 | 80 | let longEar = { 81 | earLength: 10, 82 | __proto__: rabbit 83 | }; 84 | 85 | // walk prorotip zincirinden alınmıştır. 86 | longEar.walk(); // Animal walk 87 | alert(longEar.jumps); // true (from rabbit) 88 | 89 | Şimdi longEar'dan bir şey okursak ve bu eksikse, JavaScript onu rabbitte ve sonra animalda arayacaktır. 90 | 91 | __Proto__’un değeri bir obje veya null olabilir. Diğer türler göz ardı edilir. 92 | 93 | Çok açık olsa da tekrar söylemekte yarar var. Bir obje sadece bir tane [[Prototype]]'a sahip olabilir. Bir objenin iki farklı objeden kalıtım alamaz. 94 | 95 | Not: Lütfen __proto__ 'nun [[Prototype]] özelliği ile aynı olmadığını unutmayın. __proto__ bir nevi [[Prototype]] için bir getter / setter olarak kullanılır. Daha sonra önemli olan kısımları tekrar göreceğiz, şimdilik sadece aynı şey olmadığını aklımızda tutalım. 96 | 97 | Prototip sadece özelliklerin okunması için kullanılır. Veri özelliklerinin yazılma/silinme ( getter/setter değil) işi doğrudan obje üzerinden yapılır. 98 | 99 | Aşağıdaki örnekte rabbit'e kendi walk metodu atanmıştır: 100 | let animal = { 101 | eats: true, 102 | walk() { 103 | /* Bu metod rabbit tarafından kullanılmayacaktır. */ 104 | } 105 | }; 106 | 107 | let rabbit = { 108 | __proto__: animal 109 | } 110 | 111 | rabbit.walk = function() { 112 | alert("Rabbit! Bounce-bounce!"); 113 | }; 114 | 115 | rabbit.walk(); // Rabbit! Bounce-bounce! 116 | 117 | Artık rabbit.wal() metodu doğrudan kendi içerisinde bulur ve çalıştırır. Prototip kullanmaz. 118 | Kısaca prototiplere ve prototip zincirlerine bu şekilde değinebiliriz. Bir sonraki konuda görüşmek üzere! 119 | 120 | //Kaynaklar: 121 | //https://javascript.info/ 122 | -------------------------------------------------------------------------------- /week2/drafts/Scope(Global-Function-Block).md: -------------------------------------------------------------------------------- 1 | # Scope(Kapsam) 2 | 3 | Scope, kodunuzun içinde bulunan **değişkenlerin**, **fonksiyonların** ve **objelerin**, görünürlük ve erişebilirliğini ifade eder. 4 | 5 | ### Global Scope 6 | 7 | Bir JavaScript dosyası içerisinde sadece bir **Global Scope** vardır. Bir değişken herhangi bir fonksiyon içerisinde tanımlanmamış ise Global scope içindedir. Global scope içerisinde bulunan değişkenlere, diğer scope'lar içinden erişilebilir/değiştirilebilir. 8 | ```javascript 9 | var fruit = "Elma"; 10 | console.log(fruit); //elma 11 | 12 | function getFruit(){ 13 | console.log(fruit); //fruit burada erişebilirdir. 14 | } 15 | 16 | getFruit(); //elma 17 | ``` 18 | 19 | ### Function Scope 20 | 21 | Bir fonksiyon içerisinde tanımlanan değişken, sadece o fonksiyon içinde erişilebilirdir. Fonksiyon dışında bu değişkene erişilemez. **var**, Function scope için değişkeni tanımlayan anahtar sözcüktür. 22 | ```javascript 23 | function foo(){ 24 | var fruit = "Elma"; 25 | console.log(fruit); 26 | } 27 | 28 | foo(); //elma 29 | console.log(fruit) //Can't find variable: fruit 30 | ``` 31 | 32 | ### Block Scope 33 | 34 | Block Scope, **koşul ifadeleri (if, switch)** ve **döngüler (for, while)** içindeki alandır. Genel olarak, **{süslü parantez}** görülen her yer bir bloktur. ES6'da hayatımıza giren **const** ve **let** anahtar sözcükleri, geliştiricilerin değişkenleri bir blok içerisinde tanımlamasına izin verir. Bu da bu değişkenlerin yalnızca karşılık gelen blok içinde erişilebilir olduğu anlamına gelir. 35 | ```javascript 36 | function foo(){ 37 | if(true){ 38 | var fruit1 = "elma"; 39 | const fruit2 = "muz"; 40 | let fruit3 = "çilek"; 41 | } 42 | console.log(fruit1); 43 | console.log(fruit2); 44 | console.log(fruit3); 45 | } 46 | 47 | foo(); 48 | //elma 49 | //Can't find variable: fruit2 50 | //Can't find variable: fruit3 51 | ``` 52 | 53 | -------------------------------------------------------------------------------- /week2/drafts/call-apply-bind.md: -------------------------------------------------------------------------------- 1 | 2 | **Call ve Apply** 3 | 4 | Call ve Apply fonksiyonları Function objemizin __proto__ objesinde bulunan iki adet fonksiyondur. Bu fonksiyonların görevleri aynı olsa da kullanımları arasında ufak bir fark vardır. Şimdi ilk olarak Mozilla’nın dokümanlarından bu fonksiyonların ne iş yaptığını anlamaya çalışalım. 5 | 6 | > **Call() fonksiyonu, verilen this anahtar değeriyle(obje) ve bağımsız olarak sağlanan bağımsız argümanlarla bir fonksiyonu çağırır. Argümanlar fonksiyona tek tek gönderilir. (Örnek: test(obj,arg1,arg2,arg3))** 7 | > 8 | > **Apply() fonksiyonu, verilen this anahtar değeriyle(obje) ve bağımsız olarak sağlanan değişkenlerle bir fonksiyonu çağırır. Argümanlar fonksiyona argüman listesi şeklinde gönderilir. (Örnek: test(obj,[arg1,arg2,arg3]))** 9 | 10 | Yani anlaşılacağı üzere ikisinin görev tanımı aynı tek farkı Call fonksiyonu için kaç parametre varsa onların hepsini tek tek yazmamız gerekiyor. Apply için ise parametreye bir dizi verilebilir. 11 | Bu fonksiyonların ne yaptığını anlamak için şu örneğimize bakalım. 12 | 13 | const obj1 = { 14 | number1: 10, 15 | number2: 20, 16 | } 17 | const obj2 = { 18 | number1: 30, 19 | number2: 50, 20 | } 21 | function addNumbers(num){ 22 | console.log(this.number1 + this.number2 + num ); 23 | } 24 | addNumbers(100); // NaN 25 | 26 | Buradaki çıktının neden **_NaN olduğuyla_** ilgili bir fikri olan var mı ? Fikri olmayanlar için açıklamak gerekirse, şu anda global scope’ta bulunan objemiz window objesi olduğu için ve this anahtar kelimesi bu objeyi gösterdiği için bu sonucu aldık. Window objesinin içinde number1 veya number2 şeklinde property bulunmuyor. Bu nedenle aslında “undefined + undefined + 100” gibi bir toplama yapıyoruz ve bunun sonucunda “NaN” sonucunu elde ediyoruz. 27 | 28 | Peki bu örnekte addNumbers fonksiyonunun hem obj1 hem de obj2 objesi için çalışmasını istersek ne yapabiliriz ? İşte burada yardımımıza **call ve apply fonksiyonları** koşuyor. Burada, yukarıdaki tanımlara göre call veya apply fonksiyonlarını kullanırsak this anahtar kelimesi, call fonksiyonuna hangi objeyi argüman olarak gönderirsek onu gösterecektir. 29 | 30 | const obj1 = { 31 | number1:10, 32 | number2:20 33 | } 34 | const obj2 = { 35 | number1:30, 36 | number2:50 37 | } 38 | 39 | function addNumbers(num) { 40 | console.log(this.number1 + this.number2 + num); 41 | } 42 | 43 | addNumbers.call(obj1,100); // 10+20+100 = 130 44 | addNumbers.call(obj2,100); // 30+50+100 = 180 45 | 46 | Burada call metoduna birinci argüman olarak **obj1'i** gönderdiğimizde this anahtar kelimesi bu objeyi gösterdiği için sonucumuz 130 çıktı. Aynı şekilde, **obj2'i** gönderdiğimizde de 180 sonucunu aldık. Yani, bir fonksiyonu call fonksiyonuyla farklı objeler ile kullanabildik. 47 | 48 | Başka bir örnekle devam edelim. 49 | 50 | var person = { 51 | fullName: function(city, country) { 52 | return`${this.firstName} ${this.lastName}, ${city} ${country}` 53 | }, 54 | } 55 | var person1 = { 56 | firstName:"John", 57 | lastName: "Doe" 58 | } 59 | person.fullName.call(person1, "Oslo", "Norway"); // John Doe,Oslo,Norway 60 | 61 | Görüleceği üzere fonksiyonu call ile çağıracağımız zaman bütün parametreleri tek tek yazmamız gerekiyor. Az parametre olduğunda çok sorun yok gibi peki boyutu 100 olan bir veri bütünü olsa hepsini tek tek elle mi yazmalıyız? Bu konuda bize Apply yardımcı oluyor. 62 | 63 | var person = { 64 | fullName: function(age,city, country) { 65 | return`${this.firstName} ${this.lastName},${age}, ${city} ${country}` 66 | } 67 | } 68 | var person1 = { 69 | firstName:"John", 70 | lastName: "Doe" 71 | } 72 | var otherInformations = ["26","Oslo", "Norway"] 73 | 74 | person.fullName.apply(person1, otherInformations );//John Doe,26, Oslo,Norway 75 | 76 | 77 | **Bind Fonksiyonu** 78 | 79 | Bind fonksiyonu da mantık olarak call ve apply fonksiyonlarına oldukça fazla benzer. Ancak kullanım olarak bu fonksiyonlardan farklıdır. 80 | > **Bind() fonksiyonu, içine verilen objeye göre yeni bir fonksiyon kopyası yaratır. Oluşan bu kopya fonksiyonu daha sonradan argüman listesi ile beraber gönderilen objeye kullanabiliriz.** 81 | 82 | Anlamak için örneğimize bakalım. 83 | 84 | const obj1 = { 85 | number1:10, 86 | number2:20 87 | }; 88 | 89 | function getNumbersTotal(number3,number4) { 90 | return this.number1 + this.number2 + number3 + number4; 91 | } 92 | /* obj1'i this parametresinin göstereceği şekilde 93 | bağlayarak yeni bir fonksiyon oluşturuyoruz. 94 | */ 95 | 96 | const copyFunc = getNumbersTotal.bind(obj1); 97 | 98 | console.log(copyFunc(30,40)); //100 99 | 100 | 101 | 102 | Burada da bind fonksiyonunun kullanımını görüyoruz. Aslında mantık olarak call ve apply’a benzese de yapı olarak epey farklı. Call ve Apply fonksiyonları bir fonksiyonu hemen çalıştırırken, bind fonksiyonu bize yeni bir kopya üretmektedir. Oluşturulan bu kopyayı ise istediğimiz herhangi bir bağlamda(context) kullanabiliriz. 103 | 104 | Aklınızda şu şekilde bir sorunun döndüğünü tahmin ediyorum. 105 | 106 | > **“Bind, Call ve Apply mantık olarak aynıysa hangisini nerelerde kullanacağım ?”** 107 | 108 | Javascript’e yeni başlayanların bu soruyu sorması oldukça normal. Cevabını şu şekilde verebiliriz. 109 | 110 | > **Bind fonksiyonundan, fonksiyonumuzu başka bir bağlamda daha sonradan kullanabilmek adına yararlanabiliriz (örnek,Javascript Olayları — JS Events). Call ve Apply Fonksiyonlarını ise bir fonksiyonu hemen bir obje ile çağırmak için kullanabiliriz.** 111 | 112 | -------------------------------------------------------------------------------- /week2/drafts/es6 class.md: -------------------------------------------------------------------------------- 1 | EcmaScript6 ile gelen Class yapısı ile Nesne Yönelimli Programlama prensiplerini kullanabiliyoruz. (Halen ES6’yı desteklemeyen tarayıcılar vardır.) Classlarda tıpkı fonksiyonlar gibi başka bir ifade içinde tanımlanabilir, değer döndürebilir, atanabilir. 2 | Class yapısı neyi sağlar? 3 | • prototype-based inheritance, 4 | • constructors, 5 | • super calls, 6 | • instance and static methods 7 | 8 | Class yapısını bir örnek üzerinde inceleyelim. 9 | 10 | ```javascript 11 | class User{ 12 | constructor(name) { 13 | this.name = name 14 | } 15 | get name() { 16 | return this._name; 17 | } 18 | set name(value) { 19 | if(value.length < 4){ 20 | alert("Name is too short.") 21 | return; 22 | } 23 | this._name = value; 24 | } 25 | 26 | sayHi(){ 27 | return `Hi, ${this.name}` 28 | } 29 | } 30 | 31 | let user = new User("John"); 32 | alert(user.name); //John 33 | user.sayHi() //Hi, John 34 | user = new User(""); // Name is too short. 35 | ``` 36 | 37 | Örnekte User adında bir class tanımlanmaktadır. 38 | Constructor: Javascript’te class yapısı tanımlamak için oluşturulan fonksiyonlar, constructor (yapıcı metot) olarak adlandırılır. 39 | Constructor ile de türetilen “user” objesinin ilk değer atamaları yapılmaktadır. 40 | new User: new ile yeni bir obje oluşturulmaktadır. “user” objesi ile User classına erişebilmekteyiz. 41 | Getters/setters: Set name’de this._name’ e yeni değer ataması(setter method), get name ile değerin(getter method) return edilmesi sağlanmakta. 42 | 43 | Class inheritance 44 | Extends Anahtar Kelimesi ve super 45 | 46 | ```javascript 47 | class Animal { 48 | constructor(name) { 49 | this.speed = 0; 50 | this.name = name; 51 | } 52 | 53 | run(speed) { 54 | this.speed = speed; 55 | alert(`${this.name} runs with speed ${this.speed}.`); 56 | } 57 | 58 | stop() { 59 | this.speed = 0; 60 | alert(`${this.name} stands still.`); 61 | } 62 | } 63 | 64 | class Rabbit extends Animal { 65 | hide() { 66 | alert(`${this.name} hides!`); 67 | } 68 | 69 | stop() { 70 | super.stop(); // call parent stop 71 | this.hide(); // and then hide 72 | } 73 | } 74 | 75 | let rabbit = new Rabbit("White Rabbit"); 76 | rabbit.run(5); // White Rabbit runs with speed 5. 77 | rabbit.stop(); // White Rabbit stands still. White Rabbit hides! 78 | ``` 79 | 80 | Classları geliştirmek için extends anahtar kelimesini kullanılmaktadır. Bu örnekte Rabbit adında bir sınıf oluşturulmakta ve bu sınıfı Animal sınıfından extends edilmekte. 81 | Extend edilen bu sınıf Anaimal classının metot ve nesnelerine erişip, kullanabilmektedir. Bunu super ile parent classının fonksiyonlarını çağrılıp yapmaktadır. 82 | Aynı özellik ve fonksiyonları tekrar yazmadan classı genişleterek kullanabilmekteyiz. 83 | -------------------------------------------------------------------------------- /week2/drafts/executioncontext&callstack.md: -------------------------------------------------------------------------------- 1 | # Execution Context 2 | 3 | Execution Context, JavaScript engine'in JavaScript kodunu okumak için oluşturduğu ve kodun çalıştırıldığı ortama dair bilgilerin tutulduğu soyut kavrama denir. 4 | 5 | Bir JavaScript kodu çalıştığında öncelikle bilgiler **_memory_** denilen bir yerde tanımlanır ve daha sonra sırasıyla **_execute_** edilir. Bu ilk etapta olan tanımlama global ortamda gerçekleşeceğinden buna **global execution context** denir. 6 | 7 | Herhangi bir fonksiyon çağırıldığında ise yeni bir execution context oluşur. Bu yeni oluşturulan ortamdaki bilgilerin tanımlanması ve excute edilmesine ise **local execution context** denir. 8 | 9 | Bir execution context 2 fazdan oluşur: 10 | 11 | 1. Creation Phase 12 | 2. Execution Phase 13 | 14 | ### Memory Creation Phase 15 | 16 | Bu fazda üç şey meydana gelir: 17 | 18 | 1. Scope belirlenir 19 | 2. Scope Chain belirlenir 20 | 3. `this` değerine karar verilir 21 | 22 | - İlk etapta scope belirlenir. JavaScript'te bir kodun çalıştırılması için öncelikle o kodun ait olduğu ortam taranır. Kodun global ortamda mı yoksa bir fonksiyon tarafından üretilmiş local bir contextte mi çalıştırıldığına bakılır. Bu scope bilgi contextte tutulur. 23 | 24 | ![enter image description here](https://ui.dev/post-images/global-variables-in-creation-phase.png) 25 | 26 | \*İkinci etapta ise scope chain belirlenir. Bunun için aşağıdaki kodu inceleyebiliriz. 27 | 28 | var num = 3; 29 | 30 | function foo() { 31 | var num = 6; 32 | function bar() { 33 | return num * 2; 34 | } 35 | return bar(); 36 | } 37 | 38 | foo(); // 12 39 | 40 | Burada ilk olarak global execution context tanımlanacaktır. Window ve this gibi global object değerleri belirlendikten sonra num ve foo fonksiyonlarının değerleri tanımlanacaktır. 41 | 42 | `foo()` fonksiyonu çağırıldığı andan itibaren foo için yeni bir execution context oluşturulacaktır. Bu contextin içerisinde ise num ve bar() değerleri tanımlanacaktır. 43 | 44 | `bar()` fonksiyonuna return edildiğinde yani bu fonskiyon çağırıldığında ise bar fonksiyonu için yeni bir context oluşturulacak ve buradaki variableların değerleri belirlenecektir. `bar()` fonksiyonundaki num değeri artık global scopetaki num değeri değil foo fonksiyonundaki num değeri yani 6 olur. Scope chain, `bar()` fonksiyonundaki num değerinin 6 olduğuna karar vermek adına parent ve children scopelara bakılmasıdır. 45 | 46 | [![image](https://www.linkpicture.com/q/Screen-Shot-2021-01-29-at-17.56.33.png)](https://www.linkpicture.com/view.php?img=LPic6014247b679dc716004883) 47 | 48 | - Üçüncü olarak this değeri belirlenir. Global ortamda this değeri global objecte eşitken bir functional execution contextte o fonskiyonun scopeuna bağlı tanımlanır. **_this_** in değeri belirlenirken referans alınan şey ait olduğu fonksiyon olur. 49 | 50 | ### Execution Phase 51 | 52 | Yukarıdaki örneklerde de görüldüğü gibi JavaScript engine her bir işlemi tek tek ve sırasıyla yapar. JavaScript engine her zaman tek bir contexti execute eder. 53 | 54 | Herhangi bir fonksiyon çağırıldığında execution context globalden çıkar ve o fonksiyonu execute etmek için yeni bir context oluşturur. Oradaki tanımlama ve execution sürecinin bitmesini bekler ve oradaki süreç ancak tamamen bittiğinde global ortamına geri döner. Bütün işlemleri sırayla yapması ve aynı anda sadece bir tek context işleyecek şekilde execution thread oluşturması nedeniyle JavaScript **_single-threaded_** olarak tanımlanır. 55 | 56 | # Call Stack 57 | 58 | JavaScript single-threaded bir dil olduğu için her seferinde tek bir fonksiyon execute edilmektedir. Bir JavaScript kodu çalıştırıldığında bütün fonksiyonların çağırıldığı (call) ve depolandığı (stack) ortamı anlamamıza yarayan soyut kavrama **_call stack_** denir. Call stacke giren bütün fonksiyonlar yukarıdan aşağı sıralanır ve sırası ile en son giren fonskiyon ilk önce çıkar, buna **_Last In First Out (LIFO)_** da denmektedir. Her şeyin tek tek ve sırayla işlenmesi nedeniyle call stack aynı zamanda **_senkron_** bir yapıdadır. Bu sebeple JavaScript de single-threaded ve senkron bir dil olarak tanımlanmaktadır. 59 | 60 | ![enter image description here](https://res.cloudinary.com/media-resource/image/upload/v1563577182/babscraig.com/call_stack_u2vvsi.jpg) 61 | 62 | Call stack kavramını anlamak JavaScript'te asenkronluğu anlamak için de oldukça önemlidir. 63 | 64 | Örnek olarak aşağıdaki kodu inceleyebiliriz. 65 | 66 | function first() { 67 | console.log("first"); 68 | } 69 | function second() { 70 | setTimeout(function() { 71 | console.log("second"); 72 | }, 5000); 73 | } 74 | first(); 75 | second(); 76 | console.log("third"); 77 | //first 78 | //third 79 | //second 80 | 81 | Burada fonksiyonlar çağırılma sırası ile call stacke eklenip, last in first out kuralı ile execute edilir. Bu sebeple öncelikle `first()` fonksiyonu call stacke girer ve execute edilerek çıkar. Daha sonra `second()` fonksiyonu girer ancak second fonksiyonunda çağırılan `setTimeout` fonksiyonu asenkronluğu sağlayan bir Web API'dır. Bu fonksiyon ilk parametre olarak bir callback fonksiyonu alır. İkinci olarak da milisaniye cinsinden bir zaman değeri alır. `second()` fonksiyonu execute edilip call stackten çıkacaktır ancak içerisindeki setTimeoutta çağırılan callback fonksiyonu, **_callback queue_** denilen önce girenin önce çıktığı (_first in first out_) başka bir ortamda tutulur. Son olarak da `third()` fonksiyonu callback stacke girip execute edilir ve çıkar. 82 | 83 | First ve third fonksiyonlarının return ettiği değerler direkt olarak execute edildiği için "first" ve "third" console'a basılır. setTimeout() fonksiyonundaki callback, browser tarafında işlenmeye devam edilmektedir ve belirlenen süre dolduğunda yani 5 saniye geçtiğinde callback queue'ya alınır. 84 | 85 | Callback queue'ya bir fonksiyon geldiğinde orayı sürekli dinleyen ve oradaki fonksiyonların execute edilmesinden sorumlu olan bir **_event loop_** mekanizması vardır. setTimeout() ile 5 saniye sonra callback queueya geleceği sözü verilen callback fonksiyonu buraya geldiğinde event loop tetiklenir ve fonksiyon execute edilir. JavaScript'te asenkronluk bu şekilde sağlanır. 86 | 87 | ![enter image description here](https://res.cloudinary.com/media-resource/image/upload/v1563577216/babscraig.com/event_loop_mirspd.jpg) 88 | 89 | > Call stack sonsuz sayıda fonksiyon almamaktadır. Kendi kendini tekrar eden (recursive) bir fonksiyon çağırıldığında ve durdurulmadığında **_stack overflow_** hatası alınacaktır. 90 | -------------------------------------------------------------------------------- /week2/drafts/iife.md: -------------------------------------------------------------------------------- 1 | # IIFE 2 | 3 | ## IIFE nedir ? 4 | 5 | JavaScriptte yalnızca bir kez kullanacağımız ve sonrasında tekrar ihtiyacımız olmayacak fonksiyonlar kullanmak zorunda kalabiliriz. 6 | Bu tarz durumlarda tercih ettiğimiz fonksiyonlara "Immediately Invoked Function Expression" (IIEF) adı verilir. 7 | Bu fonksiyonlar tanımlandıkları yerde hemen çağrılarak çalıştırılır. 8 | 9 | ## Kullanım örnekleri nelerdir ? 10 | 11 | Normalde bir fonksiyona ihtiyacımız olduğunda "Function Declaration" ya da "Function Expression" kullanırız ve bu fonksiyonları ihtiyaç duyduğumuz her an çağırıp yeniden kullanabiliriz. 12 | 13 | Function Declaration: 14 | 15 | function calc (p1, p2) { 16 | 17 | return p1 * p2; 18 | } 19 | 20 | alert(calc (4, 3)); 21 | 22 | //12 23 | 24 | Function Expression: 25 | 26 | let calc = function (p1, p2) { 27 | 28 | return p1 * p2; 29 | } 30 | 31 | alert(calc (4,3)); 32 | 33 | //12 34 | 35 | 36 | Fakat IIEF kullanmayı tercih ettiğimiz durumlarda daha farklı bir yol izleriz. 37 | Alttaki örnek kullanımda görüldüğü gibi fonksiyonumuzu parantez içine aldıktan hemen sonra () kullanarak fonksiyonu tanımlandığı yerde çağırmak istediğimizi belirtiriz. 38 | 39 | * Genel kullanım ; 40 | 41 | ( function () { 42 | 43 | let message = "Hello"; 44 | 45 | alert(message); // Hello 46 | 47 | }) (); 48 | 49 | * İsimlendirilerek kullanım; 50 | 51 | ( function doSomething() { 52 | 53 | // do something 54 | 55 | }) (); 56 | 57 | * "Arrow Function" biçiminde kullanım; 58 | 59 | ( () => { 60 | 61 | // do something 62 | 63 | }) (); 64 | 65 | 66 | ## Syntax Hataları 67 | 68 | Fonksiyonu saracak parantezleri kullanmadığımız takdirde JavaScript kod akışında "function" görüp bunu fonksiyon tanımı olarak algılar. 69 | Fakat fonksiyona karşılık gelen bir isim bulamadığı için alttaki hatayı verecektir. 70 | 71 | // Error: Unexpected token ( 72 | 73 | // <-- JavaScript fonksiyon ismini bulamadı. ('i gördü ve hemen hata verdi. 74 | 75 | function () { 76 | 77 | let mesaj = "Merhaba"; 78 | 79 | alert(mesaj); // Merhaba 80 | 81 | } (); 82 | 83 | İlk durumda karşılaştığımız hatanın sebebi fonksiyonun isimsiz olmasıydı fakat bu problemi fonksiyonu isim ile tanımlayarak da çözemeyiz. 84 | Çünkü JavaScript, fonksiyon tanımlamalarının anında çalışmasına izin vermez ve yine hata verir. 85 | 86 | // Alttaki örnekte ise fonksiyonu anında çalıştırmak için kullandığımız () hata verecektir. Çünkü bu şekilde tanımlanan bir fonksiyon anında çalıştırılamaz. 87 | 88 | function message () { 89 | 90 | let mesaj = "Merhaba"; 91 | 92 | alert(mesaj); // Merhaba 93 | 94 | } (); 95 | 96 | 97 | Bu tarz hataları almamak için fonksiyonumuzu () ile sarmamız gerekir. 98 | 99 | 100 | ## IIFE kullanım amacı ve faydaları nelerdir ? 101 | 102 | IIFE'nin temel kullanım amacı, fonksiyon içinde yer alan değerlere dışarıdan erişimi engelleyerek izole bir kapsam oluşturmaktır. 103 | Alttaki örnekten de anlaşılacağı üzere, fonksiyonu saran parantezler sayesinde fonksiyon içindeki değerler sadece bu fonksiyon çağrıldığında kullanılabilecek durumdadır ve dışarıdan erişime izin verilmez. 104 | Bu sayede fonksiyon içindeki değerlerin yanlışlıkla değiştirilmesi gibi istenmeyen durumların önüne geçilmiş olur. 105 | 106 | Bu durumun bir örneğini görelim. 107 | 108 | ( function () { 109 | 110 | let firstName = "Steve"; 111 | } 112 | ) (); 113 | 114 | console.log(firstName); 115 | 116 | // Uncaught ReferenceError: firstName is not defined 117 | 118 | Yukarıdaki fonksiyonumuzu çalıştırdığımızda herhangi bir hata ile karşılaşmasak da fonksiyon dışında bir yerde firstName değerine ulaşmak istediğimizde hata aldık. 119 | Çünkü belirtilen değer sadece fonksiyon içinde erişilebilir durumdaydı. 120 | IIFE fonksiyon içinde izole bir kapsam oluşturarak dışarıdan erişimi engellemiş oldu. 121 | -------------------------------------------------------------------------------- /week2/drafts/readme.md: -------------------------------------------------------------------------------- 1 | Drafts 2 | -------------------------------------------------------------------------------- /week2/iife.md: -------------------------------------------------------------------------------- 1 | # IIFE 2 | 3 | ## IIFE nedir ? 4 | 5 | JavaScriptte yalnızca bir kez kullanacağımız ve sonrasında tekrar ihtiyacımız olmayacak fonksiyonlar kullanmak zorunda kalabiliriz. 6 | Bu tarz durumlarda tercih ettiğimiz fonksiyonlara "Immediately Invoked Function Expression" (IIEF) adı verilir. 7 | Bu fonksiyonlar tanımlandıkları yerde hemen çağrılarak çalıştırılır. 8 | 9 | ## Kullanım örnekleri nelerdir ? 10 | 11 | Normalde bir fonksiyona ihtiyacımız olduğunda "Function Declaration" ya da "Function Expression" kullanırız ve bu fonksiyonları ihtiyaç duyduğumuz her an çağırıp yeniden kullanabiliriz. 12 | 13 | Function Declaration: 14 | 15 | function calc (p1, p2) { 16 | 17 | return p1 * p2; 18 | } 19 | 20 | alert(calc (4, 3)); 21 | 22 | //12 23 | 24 | Function Expression: 25 | 26 | let calc = function (p1, p2) { 27 | 28 | return p1 * p2; 29 | } 30 | 31 | alert(calc (4,3)); 32 | 33 | //12 34 | 35 | 36 | Fakat IIEF kullanmayı tercih ettiğimiz durumlarda daha farklı bir yol izleriz. 37 | Alttaki örnek kullanımda görüldüğü gibi fonksiyonumuzu parantez içine aldıktan hemen sonra () kullanarak fonksiyonu tanımlandığı yerde çağırmak istediğimizi belirtiriz. 38 | 39 | * Genel kullanım ; 40 | 41 | ( function () { 42 | 43 | let message = "Hello"; 44 | 45 | alert(message); // Hello 46 | 47 | }) (); 48 | 49 | * İsimlendirilerek kullanım; 50 | 51 | ( function doSomething() { 52 | 53 | // do something 54 | 55 | }) (); 56 | 57 | * "Arrow Function" biçiminde kullanım; 58 | 59 | ( () => { 60 | 61 | // do something 62 | 63 | }) (); 64 | 65 | 66 | ## Syntax Hataları 67 | 68 | Fonksiyonu saracak parantezleri kullanmadığımız takdirde JavaScript kod akışında "function" görüp bunu fonksiyon tanımı olarak algılar. 69 | Fakat fonksiyona karşılık gelen bir isim bulamadığı için alttaki hatayı verecektir. 70 | 71 | // Error: Unexpected token ( 72 | 73 | // <-- JavaScript fonksiyon ismini bulamadı. ('i gördü ve hemen hata verdi. 74 | 75 | function () { 76 | 77 | let mesaj = "Merhaba"; 78 | 79 | alert(mesaj); // Merhaba 80 | 81 | } (); 82 | 83 | İlk durumda karşılaştığımız hatanın sebebi fonksiyonun isimsiz olmasıydı fakat bu problemi fonksiyonu isim ile tanımlayarak da çözemeyiz. 84 | Çünkü JavaScript, fonksiyon tanımlamalarının anında çalışmasına izin vermez ve yine hata verir. 85 | 86 | // Alttaki örnekte ise fonksiyonu anında çalıştırmak için kullandığımız () hata verecektir. Çünkü bu şekilde tanımlanan bir fonksiyon anında çalıştırılamaz. 87 | 88 | function message () { 89 | 90 | let mesaj = "Merhaba"; 91 | 92 | alert(mesaj); // Merhaba 93 | 94 | } (); 95 | 96 | 97 | Bu tarz hataları almamak için fonksiyonumuzu () ile sarmamız gerekir. 98 | 99 | 100 | ## IIFE kullanım amacı ve faydaları nelerdir ? 101 | 102 | IIFE'nin temel kullanım amacı, fonksiyon içinde yer alan değerlere dışarıdan erişimi engelleyerek izole bir kapsam oluşturmaktır. 103 | Alttaki örnekten de anlaşılacağı üzere, fonksiyonu saran parantezler sayesinde fonksiyon içindeki değerler sadece bu fonksiyon çağrıldığında kullanılabilecek durumdadır ve dışarıdan erişime izin verilmez. 104 | Bu sayede fonksiyon içindeki değerlerin yanlışlıkla değiştirilmesi gibi istenmeyen durumların önüne geçilmiş olur. 105 | 106 | Bu durumun bir örneğini görelim. 107 | 108 | ( function () { 109 | 110 | let firstName = "Steve"; 111 | } 112 | ) (); 113 | 114 | console.log(firstName); 115 | 116 | // Uncaught ReferenceError: firstName is not defined 117 | 118 | Yukarıdaki fonksiyonumuzu çalıştırdığımızda herhangi bir hata ile karşılaşmasak da fonksiyon dışında bir yerde firstName değerine ulaşmak istediğimizde hata aldık. 119 | Çünkü belirtilen değer sadece fonksiyon içinde erişilebilir durumdaydı. 120 | IIFE fonksiyon içinde izole bir kapsam oluşturarak dışarıdan erişimi engellemiş oldu. 121 | -------------------------------------------------------------------------------- /week3/code/examples.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Document 9 | 10 | 11 |

Heading

12 |

Hey, you're not permitted in there. It's restricted. You'll be deactivated for sure.. Don't call me a mindless philosopher, you overweight glob of grease! Now come out before somebody sees you. Secret mission? What plans? What are you talking about? I'm not getting in there! I'm going to regret this. There goes another one. Hold your fire. There are no life forms. It must have been short-circuited. That's funny, the damage doesn't look as bad from out here. Are you sure this things safe? 13 | 14 | Close up formation. You'd better let her loose. Almost there! I can't hold them! It's away! It's a hit! Negative. Negative! It didn't go in. It just impacted on the surface. Red Leader, we're right above you. Turn to point... oh-five, we'll cover for you. Stay there... I just lost my starboard engine. Get set to make your attack run. 15 | 16 | The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions. Aaah....This is a consular ship. Were on a diplomatic mission. If this is a consular ship...were is the Ambassador? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner. 17 | 18 | What a piece of junk. She'll make point five beyond the speed of light. She may not look like much, but she's got it where it counts, kid. I've added some special modifications myself. We're a little rushed, so if you'll hurry aboard we'll get out of here. Hello, sir. Which way? All right, men. Load your weapons! Stop that ship! Blast 'em! Chewie, get us out of here! Oh, my. I'd forgotten how much I hate space travel. 19 | 20 | Run, Luke! Run!

21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /week3/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Document 9 | 10 | 11 |
12 |

13 | This is title 14 | 15 |

16 | 17 | 18 | 19 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi aspernatur dignissimos dolor eaque enim eos et 20 | excepturi explicabo impedit obcaecati, 21 | perferendis porro possimus quam quia quos rem sint voluptatem.

22 | 23 |
24 |

Another Paragraph

25 |

26 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dicta dolorem, eligendi eveniet fugiat nisi, non omnis porro quo recusandae sit tempore, totam veritatis voluptates voluptatum? Eum impedit rerum voluptas. 27 |

28 |
29 | 30 | This has a bg class 31 | 32 | This also has a bg class 33 | 34 | 37 | Example link 38 | 39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /week3/code/readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /week3/code/scripts/attributes.js: -------------------------------------------------------------------------------- 1 | // getAttribute, setAttribute, hasAttribute, removeAtrribute 2 | 3 | const addresses = document.querySelectorAll("input[name='address']") 4 | addresses.forEach((element) => { 5 | const inputElement = element; 6 | const id = inputElement.getAttribute("id"); 7 | const type = inputElement.getAttribute("type"); 8 | inputElement.setAttribute("data-read", "yes"); 9 | inputElement.setAttribute("data-selected", "no"); 10 | let hasElementId = inputElement.hasAttribute("id"); 11 | console.log(id, type, hasElementId, inputElement.dataset) 12 | inputElement.getAttribute("data-read"); 13 | }) -------------------------------------------------------------------------------- /week3/code/scripts/events.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", function(){ 2 | const btn = document.querySelector("button"); 3 | 4 | btn.addEventListener("click", function(event){ 5 | //console.log(event); 6 | //alert("Buton tiklandi"); 7 | }); 8 | 9 | // Mouse events 10 | /* 11 | * 12 | * mousedown 13 | mouseup 14 | click 15 | dblclick 16 | mousemove 17 | mousenter/ mouseleave 18 | mouseover / mouseout 19 | * 20 | * */ 21 | 22 | document.addEventListener("mousemove", function(e) { 23 | // console.log("Mouse hareket ediyor"); 24 | }); 25 | 26 | title.addEventListener("mouseenter", function(e) { 27 | //console.log("Titlein uzerinde"); 28 | }); 29 | 30 | 31 | // Keyboard Events 32 | /* 33 | keydown 34 | keypress 35 | keyup 36 | */ 37 | 38 | document.addEventListener("keydown", function(e){ 39 | if(e.keyCode === 13){ 40 | console.log("Entera basildi"); 41 | }else{ 42 | console.log("Baska bir tusa basildi") 43 | } 44 | }); 45 | 46 | 47 | 48 | title.addEventListener("click", function(e) { 49 | console.log("title tiklandi"); 50 | }) 51 | 52 | const insideButton = document.querySelector("#inside-button"); 53 | 54 | 55 | insideButton.addEventListener("click", function(event){ 56 | event.stopPropagation(); 57 | console.log("icerdeki buton tiklandi"); 58 | }) 59 | 60 | const link = document.querySelector("a"); 61 | 62 | link.addEventListener("click", function(event){ 63 | event.preventDefault(); 64 | alert("Linke tiklandi"); 65 | }) 66 | 67 | }) 68 | 69 | /// Event flow 70 | /// Event capturing 71 | /// Event bubbling 72 | /// Event delagation -------------------------------------------------------------------------------- /week3/code/scripts/examples.js: -------------------------------------------------------------------------------- 1 | /* ornek 1: 8 karakterden daha uzun olan kelimeleri marklayalim. 2 | sari background, beyaz text color; 3 | */ 4 | 5 | const paragraph = document.querySelector("p"); 6 | let newParagraph = ""; 7 | const words = paragraph.innerText.split(" "); 8 | for(let i=0; i < words.length; i++){ 9 | const word = words[i]; 10 | if(word.length > 8){ 11 | newParagraph += ""+word+"" 12 | }else{ 13 | newParagraph += word; 14 | } 15 | newParagraph += " "; 16 | } 17 | paragraph.innerHTML = newParagraph; 18 | 19 | /* 20 | * soru isaretlerinin hepsini 🤔 ile degistir 21 | * unlem isaretlerinini hepsini 😲 ile degistirelim. 22 | * */ 23 | let emojiParagraph = ""; 24 | for(let i=0; i < words.length; i++){ 25 | const word = words[i]; 26 | const withThinking = word.replace("?", "🤔"); 27 | const withAstonishing = withThinking.replace("!", "😲"); 28 | emojiParagraph += withAstonishing; 29 | emojiParagraph += " "; 30 | } 31 | paragraph.innerHTML = emojiParagraph; 32 | 33 | 34 | /* 35 | kelime sayisini headerdan sonra yazdiralim. 36 | */ 37 | 38 | const wordCountEl = document.createElement("div"); 39 | wordCountEl.innerText = words.length + " words"; 40 | document.body.insertBefore(wordCountEl, document.querySelector("p")) 41 | 42 | /* 43 | Paragraphtan sonra kaynak linki ekleyelim. 44 | */ 45 | const link = document.createElement("a"); 46 | link.setAttribute("href", "https://tr.lipsum.com/"); 47 | link.setAttribute("target", "_blank"); 48 | link.innerText = "Go to source"; 49 | document.body.appendChild(link); 50 | -------------------------------------------------------------------------------- /week3/code/scripts/manipulating.js: -------------------------------------------------------------------------------- 1 | let myNewElement = document.createElement("div"); 2 | 3 | myNewElement.innerHTML = "

This is my element

"; 4 | 5 | myNewElement.id = "thisismynewelement"; 6 | 7 | document.body.appendChild(myNewElement) 8 | 9 | 10 | let menu = document.querySelector("#menu"); 11 | let firstLi = document.createElement("li"); 12 | firstLi.textContent = "Products"; 13 | menu.appendChild(firstLi); 14 | 15 | let secondLi = document.createElement("li"); 16 | secondLi.textContent = "About Us"; 17 | menu.appendChild(secondLi); 18 | 19 | 20 | // insertBefore 21 | //menu.insertBefore(document.createElement("p"), document.querySelector("#menu")) 22 | 23 | // removeChild 24 | //menu.removeChild(document.querySelector("ul")) 25 | -------------------------------------------------------------------------------- /week3/code/scripts/readme.md: -------------------------------------------------------------------------------- 1 | Scripts. 2 | -------------------------------------------------------------------------------- /week3/code/scripts/selectingElements.js: -------------------------------------------------------------------------------- 1 | // 1. id ile, getElementById 2 | let element = document.getElementById("main-title"); 3 | 4 | // 2. name ile getirme, getElementsByName 5 | let addressElement = document.getElementsByName("address"); 6 | 7 | // 3. tag ile getirme, getElementsByTagName 8 | let pElements = document.getElementsByTagName("p"); 9 | 10 | // 4. classname ile getirme, getElementsByClassName 11 | let bgRedElements = document.getElementsByClassName("bg-red"); 12 | 13 | // 5. querySelector ve querySelectorAll 14 | let elementQ = document.querySelector("#main-title"); 15 | let addressElementQ = document.querySelectorAll("input[name='address']"); 16 | 17 | -------------------------------------------------------------------------------- /week3/code/scripts/style.js: -------------------------------------------------------------------------------- 1 | const title = document.getElementById("main-title"); 2 | title.style.color = "red"; 3 | title.style.backgroundColor = "black"; 4 | title.style.height = "60px"; 5 | title.style.overflow = "scroll"; 6 | //title.setAttribute("style", "font-size: 60px"); 7 | console.log(title.classList); 8 | title.classList.add("newclass") 9 | console.log(title.classList); 10 | title.classList.remove("mytitle"); 11 | console.log(title.classList); 12 | title.classList.contains("mytitle"); 13 | // getBoundingClientRect 14 | 15 | -------------------------------------------------------------------------------- /week3/code/scripts/traversing.js: -------------------------------------------------------------------------------- 1 | // 1. get the parent 2 | let mainTitle = document.querySelector("#main-title"); 3 | let parentOfTitle = mainTitle.parentNode; 4 | console.log(parentOfTitle); 5 | 6 | // 2. get the siblings 7 | let nextSibling = mainTitle.nextElementSibling; 8 | let previousSibling = mainTitle.previousElementSibling; 9 | console.log(nextSibling, previousSibling); 10 | 11 | // 3. get the child 12 | 13 | let noteContainer = document.querySelector("#note-container"); 14 | let firstChildOfNote = noteContainer.firstElementChild; 15 | let lastChildOfNote = noteContainer.lastElementChild; 16 | 17 | let allChildren = noteContainer.children; 18 | console.log(allChildren); 19 | console.log(firstChildOfNote); -------------------------------------------------------------------------------- /week3/drafts: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /week3/drafts3/DOM Attributes.md: -------------------------------------------------------------------------------- 1 | # DOM Attributes 2 | 3 | JavaScript'te HTML elemanları oluşturabildiğimiz gibi oluşturduğumuz elemanların attribute değerleri ile ilgili işlemler yapmamız da mümkün. 4 | 5 | Örneğin bir attribute oluşturmak ya da var olan attribute değerini güncellemek için **`setAttribute()`** metodunu, elemanın sahip olduğu attribute değerini öğrenmek için **`getAttribute()`** metodunu, elemanın belli bir attribute değerine sahip olup olmadığını kontrol etmek için **`hasAttribute()`** metodunu ya da var olan bir attribute değerini silmek için **`removeAttribute()`** metodunu kullanabiliriz. 6 | 7 | Şimdi bu metodlara yakından bakalım. 8 | 9 | ## setAttribute() Kullanımı; 10 | 11 | Belirtilen elemanın attribute değerini ayarlamak için kullanılan yöntemdir. Belirtilen ad ve değer ile yeni bir attribute ekler ya da var olan attribute değerini güncellemeye yarayan yöntemdir. 12 | 13 | ### Kullanım Şekli ; 14 | 15 | ``` 16 | element.setAttribute(name, value) 17 | 18 | ``` 19 | 20 | ### Örnek Kullanım; 21 | 22 | Alttaki örnekte HTML içindeki ` 28 | 29 | JavaScript 30 | 31 | let b = document.querySelector("button"); 32 | b.setAttribute("name", "helloButton"); 33 | 34 | console.log (b); // 35 | 36 | ``` 37 | 38 | ## getAttribute() Kullanımı; 39 | 40 | **`getAttribute()`** elementte belirtilen attribute değerini döndürür. Eğer seçilen elementte istenen attribute değeri yoksa döndürülen değer "null" ya da "" (boş dizi) olacaktır. 41 | 42 | ### Kullanım Şekli ; 43 | 44 | ``` 45 | element.getAttribute(name) 46 | 47 | ``` 48 | 49 | ### Örnek Kullanım; 50 | 51 | Alttaki örnekte HTML içinde bulunan bir `
` elementinin attribute değerine **`getAttribute()`** kullanarak erişmeye çalışalım. 52 | 53 | ``` 54 | HTML 55 | 56 |
Hi Champ!
57 | 58 | JavaScript 59 | 60 | // in a console 61 | const div1 = document.getElementById('div1'); 62 | 63 | //=>
Hi Champ!
64 | const exampleAttr= div1.getAttribute('id'); 65 | 66 | //=> "div1" 67 | 68 | const align = div1.getAttribute('align') 69 | 70 | //=> null 71 | ``` 72 | 73 | ## removeAttribute() Kullanımı; 74 | 75 | Bir elementin belirtilen attribute değerini kaldırmak için **`removeAttribute()`** yöntemini kullanırız. 76 | 77 | ### Kullanım Şekli ; 78 | 79 | ``` 80 | element.removeAttribute(attrName); 81 | 82 | ``` 83 | 84 | ### Örnek Kullanım; 85 | Alttaki örnekte HTML içinde bulunan bir `
` elementinin attribute değerini **`removeAttribute()`** kullanarak silmeye çalışalım. 86 | 87 | ``` 88 | HTML 89 | 90 |
91 | 92 | JavaScript 93 | 94 | document.getElementById("div1").removeAttribute("align"); 95 | 96 |
97 | 98 | ``` 99 | 100 | ## hasAttribute() Kullanımı; 101 | **`hasAttribute()`** yöntemi ile belirlenen bir elementin istediğimiz bir attribute değerine sahip olup olmadığını kontrol edebiliriz. İstenen attribute değeri elementte varsa "true" yoksa "false" değeri döndürür. 102 | 103 | 104 | ### Kullanım Şekli ; 105 | 106 | ``` 107 | element.hasAttribute(attrName); 108 | 109 | ``` 110 | 111 | ### Örnek Kullanım; 112 | Alttaki örnekte HTML içinde bulunan bir `` elementinin target isimli attribute sahip olup olmadığını kontrol edelim. Sahip olduğu durumda true döneceği için bu sonucu if statement içinde kullanarak attribute değerini değiştirmeye çalışalım. 113 | 114 | ``` 115 | HTML 116 | 117 | google.com 118 | 119 | JavaScript 120 | 121 | var x = document.querySelector("#test"); 122 | 123 | if (x.hasAttribute("target")) { 124 | 125 | x.setAttribute("target", "_self"); 126 | } 127 | ``` 128 | 129 | Kaynak : developer.mozilla.org 130 | -------------------------------------------------------------------------------- /week3/drafts3/Keyboard Events.md: -------------------------------------------------------------------------------- 1 | Olaylar HTML elemanlarının kullanıcı ya da Web Apileri ile etkileşimi sonucu meydana gelen değişimlerdir.Bir nesnenin üzerine tıklamak,fareyle bir nesnenin üzerine gelmek, 2 | bi tuşa basmak,sayfanın yüklenmesi gibi birçok eylem olaylar(events) ile yönetilebilir. 3 | 4 | Ben bu yazımda Keyborard Events konusuna değineceğim 5 | 6 | **Bağzı KeyboardEvent Özellikleri and Metodları** 7 | 8 | altKey: "ALT" tuşuna basılıp basılmadığını kontrol eder. 9 | charCode: Basılan tuşun Unicode kodunu döner. 10 | code: Basılan tuşun kodunu döner.Her klavyede farklı bir değer dönebilir. 11 | ctrlKey: "CTRL" tuşuna basılıp basılmadığını kontrol eder. 12 | getModifierState() : Spesifik bir karakterin basılı olup lmadığını kontrol eder. 13 | key: Basılan tuş ismini döner. 14 | keyCode : Basılan tuşun Unicode kodunu döner. 15 | location : Basılan tuşun klavye konumunu döner. 16 | 17 | ## ONKEYDOWN EVENT 18 | 19 | Kullanıcının ilgili elementin içinde bir tuşa bastığı anda tetiklenir. 20 | 21 | **ÖRNEK** 22 | 23 | 24 | 25 | 26 | ONKEYDOWN EVENT 27 | 28 | 29 | 30 | 31 | 39 | 40 | 41 | 42 | Eğer klayeden A tuşuna basarsanız console'da 43 | KEY=A,CODE=KeyA 44 | sonucunu göreceksinz. 45 | 46 | ## ONKEYPRESS EVENT 47 | 48 | Kullanıcının ilgili elementin içinde bir tuşa bastığı veya basılı tuttuğu zaman tetiklenir. 49 | 50 | **ÖRNEK:** 51 | 52 | 53 | 54 | 55 | ONKEYPRESS EVENT 56 | 57 | 58 | 59 | 60 | 67 | 68 | 69 | 70 | Eğer klayeden A tuşuna basarsanız console'da 71 | ISCTRLKEY=False,KEYCODE=65 72 | 73 | ## ONKEYUP EVENT 74 | 75 | Kullanıcın basılı tuttuğu tuşu bıraktığı zaman tetiklenir. 76 | -------------------------------------------------------------------------------- /week3/drafts3/LoadAndCustomEvent.md: -------------------------------------------------------------------------------- 1 | # DOMContentLoaded, load, beforeunload, unload 2 | 3 | Bir HTML sayfasının yaşam döngüsünün üç önemli olayı vardır. 4 | 5 | DOMContentLoaded: Tarayıcı HTML'i tam olarak yükleyip DOM ağacını oluşturur.Ancak resimler ve stil dosyaları henüz oluşturulmadığında. 6 | 7 | Load: Sadece HTML değil sayfanın tüm ve stil dosyaları oluşturulduğunda.. 8 | beforeunload/unload: Kullanıcı sayfadan ayrıldığında. 9 | 10 | Her olayın kendi içinde farklı faydaları var; 11 | 12 | DOMContentLoaded: DOM hazırdır, böylece işleyici DOM düğümlerini arayabilir, arayüzü başlatabilir. 13 | load: external kaynaklarda yüklenir, stiller uygulanır boyutlar bilinir. 14 | beforeunload: Kullanıcının değişiklikleri kaydedip kaydetmediğini kontrol edebilir ve onlara gerçekten ayrılmak isteyip istemediğini sorabiliriz. 15 | unload: Kullanıcı giderken yinede istatiktik gibi şeyler göndermek için kullanabilirsiniz. 16 | 17 | # DOMContentLoaded 18 | 19 | Bu event i yakalamak için addEventListener kullanmalıyız. 20 | 21 | ```javascript 22 | document.addEventListener("DOMContentLoaded", ready); 23 | // not "document.onDOMContentLoaded = ..." 24 | 25 | 35 | 36 | 37 | 38 | ``` 39 | Yukarıda örnekte DOMContentLoaded document yüklendiğinde çalışır böylece dahil tüm dom elemanlarını görebiliriz. Ancak görüntünün yüklenmesini beklemez. Yani alert sıfır boyut gösterir. 40 | 41 | 42 | # Load 43 | 44 | Window nesnesindeki load olayı, stiller, resimler ve diğer kaynaklar yüklendiğinde tetiklenir. 45 | 46 | ```javascript 47 | 55 | 56 | 57 | ``` 58 | 59 | Bu kodda image ın size ı ve with i görüntülenir çünkü load yüklenmesini bekler. 60 | 61 | # beforeunload 62 | window, document ve kaynaklar kaldırılmak üzereyken tetiklenir. 63 | 64 | Gerçekten sayfadan ayrılıp ayrılmak istemediğini onaylatmak için de kullanılabilir. 65 | 66 | window.addEventListener('beforeunload',(event) =>{ 67 | // do something here 68 | }); 69 | 70 | # UnLoad 71 | 72 | Bir ziyaretçi sayfadan ayrıldığında unload eventi tetiklenir. Analitik gönderme, sayfanın nasıl kullanıldığına dair bilgileri (tıklamalar, kaydırmalar, görüntülenen sayfa bilgileri) topladığımızı düşünelim. Kullanıcı sayfadan ayrıldığında bu bilgileri kaydedebiliriz. 73 | 74 | Bu tür ihtiyaçlar için bu sayfaya bakabilirsiniz: navigator.sendBeacon(url, data) method for such needs, described in the specification https://w3c.github.io/beacon/. 75 | 76 | ```javascript 77 | let analyticsData = { /* object with gathered data */ }; 78 | 79 | window.addEventListener("unload", function() { 80 | navigator.sendBeacon("/analytics", JSON.stringify(analyticsData)); 81 | }); 82 | 83 | ``` 84 | 85 | # readyState 86 | 87 | Document ın hazır olup olmadığını bilemediğimiz durumlar vardır. İşlemimizin şimdi veya daha sonra DOM yüklendikten sonra çalışmasını istediğimizi varsayalım. 88 | 89 | document.readyState bize bununla ilgili bilgi verir. 90 | 91 | 3 olası değeri vardır. 92 | 93 | "loading" – document yükleniyor. 94 | "interactive" – document tamamen okundu. 95 | "complete" – document tamamen yüklendi ve tüm kaynaklar yüklendi. 96 | 97 | ```javascript 98 | function work() { /*...*/ } 99 | 100 | if (document.readyState == 'loading') { 101 | // still loading, wait for the event 102 | document.addEventListener('DOMContentLoaded', work); 103 | } else { 104 | // DOM is ready! 105 | work(); 106 | ``` 107 | 108 | # CustomEvent() 109 | 110 | CustomEvent() yeni bir custom event oluşturur. 111 | 112 | CustomEvent yaratmak için 2 yol vardır. 113 | 114 | 1-) Event contructor kullanılabilir. 115 | 2-) CustomEvent constructor kullanılabilir. 116 | 117 | event = new CustomEvent(typeArg, customEventInit); 118 | 119 | Birinci argumandaki typeArg, bir string isim olarak geçilmelidir. 120 | İkinci arguman customEventInit ise iletmek istediğiniz özellikleri object olarak ekleyebilirsiniz ve opsiyoneldir. 121 | 122 | ```javascript 123 |

Hello for John!

124 | 125 | 135 | ``` 136 | 137 | ```javascript 138 | const myEvent = new Event('myevent', { 139 | bubbles: true, 140 | cancelable: true, 141 | composed: false 142 | }) 143 | ``` 144 | -------------------------------------------------------------------------------- /week3/drafts3/Manipulating Style.md: -------------------------------------------------------------------------------- 1 | ## Manipulating Style 2 | 3 | ### Stiller ve Sınıflar (Styles and Classes) 4 | JavaScript'in stil ve sınıflarla etkileşimine girmeden önce bir öğeyi biçimlendirmenin iki yolu olduğunu bilmek gerekiyor. 5 | 1. CSS içinde bir **class** oluşturmak ve bunu öğeye eklemek: `
` 6 | 2. Doğrudan öğenin içine **style** ile yazmak: `
` 7 | 8 | Her zaman **style** kullanmak yerine **class** kullanımını tercih etmeliyiz. **Style** kullanımını, yalnızca **sınıflar** çok karıştığında ve işin içinden çıkamadığımız durumlarda kullanmalıyız. 9 | 10 | JavaScript hem **sınıfları(class)** hem de **style** özelliklerini değiştirebilir. Örneğin bir öğenin koordinatlarını dinamik olarak hesaplayıp, bunları JavaScript kullanarak ayarlamak istiyorsak aşağıdaki gibi **style** kullanılabilir: 11 | 12 | ```javascript 13 | let top = /* kompleks hesaplamalar */; 14 | let left = /* kompleks hesaplamalar */; 15 | 16 | elem.style.left = left; 17 | elem.style.top = top; 18 | ``` 19 | 20 | Metni kırmızı yapmak, arkaplan simgesi eklemek gibi durumlarda, bunları CSS üzerinde tanımlayıp bunu öğeye ekleyebiliriz. Bu daha esnek ve düzenlenmesi kolaydır. Bunu JavaScript ile de yapabiliriz. 21 | 22 | ### className ve classList 23 | Bir öğenin sınıfını değiştirmek, *script* dosyalarında en sık kullanılan eylemlerden biridir. 24 | 25 | Eskiden JavaScript'te bir sınırlama vardı: **class** gibi ayrılmış kelimeler bir nesnenin özelliği olamazdı. Bu sınırlama şu an mevcut değil, fakat bu sebepten dolayı sınıflar için benzer görünümlü bir özellik olan **className** tanıtıldı. ~~elem.class~~'a karşılık olarak `elem.className` kullanılmaktadır. 26 | 27 | Örneğin: 28 | ```html 29 | 30 | 33 | 34 | ``` 35 | 36 | Eğer `elem.className` şeklinde bir atama yaparsak, bu tüm sınıf dizilerinin yerini alır. Bazen ihtiyacımız olan bu olsa da, çoğu zaman tek bir sınıf eklemek/kaldırmak isteriz. Bunun için kullanılan başka bir özellik bulunmaktadır: **classList**. 37 | 38 | **classList**, ekleme/çıkarma/değiştirme yöntemlerini içeren özel bir nesnedir. 39 | 40 | Örneğin: 41 | ```html 42 | 43 | 48 | 49 | ``` 50 | 51 | Bu özellikleri kullanarak ister sınıf dizesini tümden değiştirebilir -**className**- ya da sınıf dizesi içinde tek tek değişiklik yapabiliriz -**classList**-. Neyi seçeceğimiz tamamen ihtiyaçlarımıza bağlıdır. 52 | 53 | `classList` methodları aşağıdaki gibidir: 54 | 55 | - `elem.classList.add/remove("class")` => Sınıf ekleme veya silme 56 | - `elem.classList.toggle("class")` => Eğer yoksa sınıfı ekler, varsa kaldırır. 57 | - `elem.classList.contains("class")` => Verilen sınıfın olup olmadığını kontrol eder ve **true/false** döner. 58 | 59 | ### getComputedStyle 60 | 61 | Bir stili değiştirmek basittir fakat bir öğe üzerinde bulunan stil özelliklerini nasıl okuyabiliriz? 62 | 63 | CSS sınıflarından gelen hiçbir şeyi `elem.style` kullanarak okuyamayız. `style` sadece bir atama için kullanılabilir. 64 | 65 | Örneğin: 66 | ```html 67 | 68 | 69 | 70 | 71 | The red text 72 | 76 | 77 | ``` 78 | 79 | Peki bir nesnenin CSS özelliklerini (örneğin margin değeri) nasıl öğrenebiliriz? 80 | 81 | Bunun için `getComputedStyle` metodunu kullanmamız gerekiyor. 82 | 83 | Syntax: 84 | ```javascript 85 | getComputedStyle(element[,pseudo]) 86 | ``` 87 | 88 | *element* 89 | Değeri okunacak nesne. 90 | 91 | *pseudo(Opsiyonel)* 92 | Eşleşecek sözde nesneyi belirten bir dize. Örneğin ::before. 93 | 94 | ```html 95 | 96 | 97 | 98 | 99 | 105 | 106 | ``` 107 | 108 | ### getBoundingClientRect 109 | 110 | **getBoundingClientRect()** yöntemi, bir öğenin boyutunu ve görünen alanına göre konumunu döndürür. Bu yöntem ile bir nesnenin 8 farklı özelliğine ulaşabiliriz: *sol, üst, sağ, alt, x, y, genişlik, yükseklik*. 111 | 112 | Kullanımı: `document.getElementById('foo').getBoundingClientRect();` 113 | Burada *getElementById()* ile koordinatlarını bulmak istediğimiz nesneyi belirliyoruz. Daha sonrasında *getBoundingClientRect()* yöntemi ile nesnenin koordinatlarını almış oluyoruz. 114 | 115 | Örnek: 116 | ```html 117 | 118 |
Hello World
119 | 123 | 124 | ``` 125 | ``` 126 | Output{ 127 | top: 450, 128 | left: 400, 129 | right: 825, 130 | bottom: 500, 131 | x: 400, 132 | y: 450, 133 | width: 425, 134 | height: 50 135 | } 136 | ``` 137 | Bu bilgileri, diğer nesneleri buna göre konumlandırmak, nesneleri hareketlendirmek(animasyon) ve daha fazlası için kullanabilirsiniz. 138 | -------------------------------------------------------------------------------- /week3/drafts3/ModulePatterns.md: -------------------------------------------------------------------------------- 1 | # Design Patterns 2 | 3 | Bir yazılım oluşturma esnasında tekrar kullanabilir ve uygulanabilir çözümlere ihtiyaç duyulmaktadır. Bu çözüm şemalarına design pattern adı verilmektedir. 4 | 5 | Bir design pattern kullanmanın sağlayabileceği bazı yararlar bulunmaktadır: 6 | 7 | 1. Design patternler daha önceden test edilmiş ve sağlaması yapılmış tekniklerdir. Tekrar test edilmeye ihtiyaç duymazlar. 8 | 2. Kolay bir şekilde tekrar kullanabilir veya uygulanabilir yapıdalardır. 9 | 3. Kurulan sistemi veya yazılan kodun diğer developerlar için de kolayca okunabilir, anlaşılabilir ve sürdürülebilir olmasını sağlar. 10 | 11 | > Tekrar tekrar uygulanabilir çözümler design pattern olarak adlandırıldığı gibi tekrar eden yaygın problemler karşısında oluşturulmuş kötü bir yöntem ile iyi bir çözüme ulaşmaya çalışmaya da *anti-pattern* denir. 12 | 13 | Design Patternler 3 kategoriden oluşur: 14 | 15 | - Creational 16 | - Structural 17 | - Behavioral 18 | 19 | JavaScript ile uygulanabilecek design patternlardan bazıları şunlardır: 20 | - Constructor Pattern 21 | - Module Pattern 22 | - Revealing Module Pattern 23 | - Singleton Pattern 24 | - Observer Pattern 25 | - Mediator Pattern 26 | - Prototype Pattern 27 | - Command Pattern 28 | - Facade Pattern 29 | - Factory Pattern 30 | - Mixin Pattern 31 | - Decorator Pattern 32 | - Flyweight Pattern 33 | 34 | JavaScript'te kullanılan en yaygın patternlerden biri module pattern'dir. 35 | 36 | ## The Module Pattern 37 | 38 | Modüllerin uygulamalarda temiz ve ayrı kod birimleri oluşturması açısından birçok yararı bulunmaktadır. 39 | 40 | 1. **Sürdürülebilirlik**: Her modül kendi kendini içeren ayrı bir container yapıdadır. Bu bakımdan kod tabanından bağımsız ve soyut bir şekilde büyüyebilir veya geliştirebilirler. Güncellenmesi kolay olduğu için de sürdürebilir yapıdadırlar. 41 | 2. **Gizlilik (privacy)**: Modüller ile *private* veya *public* methodlar oluşturulabilir. Kendi closure'larını kullanmaları bakımından global scope'a sızmazlar. Bu da global scopeta değişken tanımlarken oluşabilecek çakışmalardan ve karışıklıklardan (namespace pollution) uzak durulmasını sağlar. 42 | 3. **Tekrar Kullanılabilirlik**: Herhangi bir başka çözüm için de tekrar kolayca adapte edilebilir yapıdadırlar. 43 | 44 | Modüller içerisinde tanımlanan değişkenlerin veya metotların kendilerine ait bir closure'a sahip olmasını ve bu sayede gizliliğini korunmasını sağlayan yapı IIFE (immediately-invoked function expression)'dir. 45 | 46 | (function() { 47 | 48 | // declare private variables and/or functions 49 | 50 | return { 51 | // declare public variables and/or functions 52 | }})(); 53 | 54 | ```javascript 55 | var HTMLChanger = (function() { 56 | var contents = 'contents' 57 | 58 | var changeHTML = function() { 59 | var element = document.getElementById('attribute-to-change'); 60 | element.innerHTML = contents; 61 | } 62 | 63 | return { 64 | callChangeHTML: function() { 65 | changeHTML(); 66 | console.log(contents); 67 | } 68 | }; 69 | 70 | })(); 71 | 72 | HTMLChanger.callChangeHTML(); // Outputs: 'contents' 73 | console.log(HTMLChanger.contents); // undefined 74 | ``` 75 | ## The Revealing Module Pattern 76 | 77 | The Revealing Module Pattern'in amacı modül içerisinde tanımlanan değişkenlerin gizliliğine object literal dot notation ile karar verilebilir olmasını sağlamaktır. IIFE bir objeye return eder ve dot notation ile istenilen methodlar açığa çıkarılır ve ulaşılabilir hale gelir. 78 | 79 | ```javascript 80 | var Exposer = (function() { 81 | var privateVariable = 10; 82 | 83 | var privateMethod = function() { 84 | console.log('Inside a private method!'); 85 | privateVariable++; 86 | } 87 | 88 | var methodToExpose = function() { 89 | console.log('This is a method I want to expose!'); 90 | } 91 | 92 | var otherMethodIWantToExpose = function() { 93 | privateMethod(); 94 | } 95 | 96 | return { 97 | first: methodToExpose, 98 | second: otherMethodIWantToExpose 99 | }; 100 | })(); 101 | 102 | Exposer.first(); // Output: This is a method I want to expose! 103 | Exposer.second(); // Output: Inside a private method! 104 | Exposer.methodToExpose; // undefined 105 | ``` 106 | 107 | ## Module Formats 108 | 109 | Module format, o modülü tanımlayan kullanım şekline (syntax) denir. JavaScript'te bilinen bazı module formatları şunlardır: 110 | 111 | - Asynchronous Module Definition (AMD) 112 | - CommonJS 113 | - Universal Module Definition (UMD) 114 | - System.register 115 | - ES6 module format 116 | 117 | JavaScript'te kullanılan en yaygın module formatlar CommonJs ve ES6 module formattır. 118 | 119 | ### CommonJS 120 | 121 | - Node.js tarafından implemente edilmiştir. 122 | - 'require' ile import eder. 123 | - 'module.exports' ile export eder. 124 | - *tree shanking** yoktur. Doğrudan modülü import eder. 125 | - Statik analiz yoktur. 126 | - Sadece server tarafında çalışır. 127 | 128 | ### ES6 modules 129 | 130 | - Server ve client tarafında çalışabilir. Yine de her browser tarafından desteklenmez. 131 | - 'import' ile import eder. 132 | - 'export' ile export eder. 133 | - Statik analiz yapar. Neyin import neyin export edileceğine kod compile olurken karar verilebilir. Kodun execute edilmesine gerek yoktur. 134 | - Statik analiz sayesinde tree shanking ve *dead code elimination** mümkündür. 135 | - Doğrudan modülü import etmek yerine asıl, ilgili value hangisi ise o import edilebilir. 136 | 137 | 138 | 139 | > **Tree shaking**: Kod compile olurken ihtiyaç duyulan modülün import edilip ihtiyaç duyulmayan modüllerin export edilmediği, ayıklandığı sisteme denir. 140 | > **Dead Code Elimination**: Kullanılmayan kod ve değişkenlerin ayıklanmasını sağlayan bir sisteme denir. 141 | 142 | 143 | -------------------------------------------------------------------------------- /week3/drafts3/Selectors.md: -------------------------------------------------------------------------------- 1 | 2 | # Selecting Elements 3 | 4 | ## DOM Programlama Arayüzü 5 | 6 | - JavaScript ile Tüm HTML DOM ağacına ulaşabilirsiniz. 7 | - DOM içinde tüm HTML etiketleri birer nesne (**object**) olarak oluşturulmuştur. 8 | - Programlama arayüzü her etiket için metot(**method**) ve özellikler(**property**) sunar. 9 | - Özellik( **Property**) etiket değeri üzerinde okuma ve değiştirme yapma imkanı sunar.(İçeriği değiştirme gibi) 10 | - Methot (**Method**) etiket üzerinde eylemler gerçekleştirme imkanı sunar.(Yeni etiketler ekleme gibi) 11 | 12 | ## HTML DOM document Nesnesi 13 | 14 | **document** nesnesi web sayfasını temsil eder. 15 | 16 | Sayfa içindeki her hangi bir elemente ulaşmak için **document** nesnesi ile başlamak zorundasınız. HTML etiketleri üzerinde düzenleme yapmak için kullanılan bazı document metotları aşağıda gösterilmiştir. 17 | 18 | ## HTML Etiketlerini Seçme 19 | 20 | - document.**getElementById**(id): **id** niteliği ile eşleşen **ilk** kaydı getirir. 21 | - document.**getElementsByName**(name): **name** niteliği ile eşleşen **tüm** kayıtları dizi olarak getirir. 22 | - document.**getElementsByTagName**(etiketadı):**etiket adı** ile eşleşen**tüm** kayıtları dizi olarak getirir. 23 | - document.**getElementsByClassName**(classAdı):**class** niteliği ile eşleşen**tüm** kayıtları dizi olarak getirir. 24 | - document.**querySelector**(seçici): **seçici** ile eşleşen **ilk** kaydı getirir. 25 | - document.**querySelectorAll**(seçici): **seçici** ile eşleşen **tüm** kayıtları dizi olarak getir. 26 | 27 | Aşağıdaki document özellikleri ile de HTML nesnelerine liste olarak erişebilirsiniz. HTML belgesindeki nesneleri dizi listesi olarak çeker. 28 | 29 | _Not: **body, head, documentElement, title** tek bir nesneyi döndürür. Diğerleri nesnelerden oluşan bir dizi döndürür._ 30 | 31 | - document.**anchors** ⇨ Sayfadaki tüm bağlantıları erişmek için kullanılır. 32 | - document.**body** ⇨Body nesnesine ulaşmak için kullanılır 33 | - document.**documentElement** ⇨HTML kökünden itibaren tüm dökümana ulaşmak için kullanılır. 34 | - document.**embeds** ⇨ eklentilere ulaşmak için kullanılır. 35 | - document.**forms** ⇨ Sayfadaki formlara ulaşmak için kullanılır. 36 | - document.**head** ⇨ head etiketine ulaşmak için kullanılır. 37 | - document.**images** ⇨Sayfadaki resimlere ulaşmak için 38 | - document.**links** ⇨ Sayfadaki linklere ulaşmak için kullanılır.(**a href** olan nesneler) 39 | - document.**scripts** ⇨ Sayfada yüklenen Script dosyalarına ulaşmak için kullanılır. 40 | - document.**title** ⇨ Sayfa başlığına ulaşmak için kullanılır. 41 | 42 | **Örnek**: document.**getElementById** kullanımı 43 | 44 |

ilk paragraf

45 |

ikinci pragraf

46 |

üçüncü paragraf

47 |

dördüncü paragraf

48 | 49 | 54 | 55 | Element bulunursa, method elementi bir nesne olarak (myElement içinde) döndürür. 56 | Element bulunamazsa eğer null döner. 57 | 58 | **Örnek**: document.**getElementsByName** kullanımı 59 | 60 |

ilk paragraf

61 |

ikinci pragraf

62 |

üçüncü paragraf

63 |

dördüncü paragraf

64 | 65 | 70 | 71 | **Örnek**: document.**getElementsByTagName** kullanımı 72 | 73 |

ilk paragraf

74 |

ikinci pragraf

75 |

üçüncü paragraf

76 |

dördüncü paragraf

77 | 78 | 83 | 84 | **Örnek**: document.**getElementsByClassName** kullanımı 85 | 86 |

ilk paragraf

87 |

ikinci pragraf

88 |

üçüncü paragraf

89 |

dördüncü paragraf

90 | 91 | 96 | 97 | 98 | **Örnek**: document.**querySelector** kullanımı 99 | 100 |

ilk paragraf

101 |

ikinci pragraf

102 |

üçüncü paragraf

103 |

dördüncü paragraf

104 | 105 | 112 | 113 | 114 | **Örnek**: document.**querySelectorAll** kullanımı 115 | 116 |

ilk paragraf

117 |

ikinci pragraf

118 |

üçüncü paragraf

119 |

dördüncü paragraf

120 | 121 | 126 | 127 | **Not:** querySelectorAll, Internet Explorer 8 ve önceki sürümlerinde desteklenmemektedir. 128 | -------------------------------------------------------------------------------- /week3/drafts3/Traversing DOM with JavaScript.md: -------------------------------------------------------------------------------- 1 | 2 | # Traversing the DOM with JavaScript 3 | 4 | Document Object Model veya kısaca DOM, web sayfasına öğeler yerleştirirken tarayıcı için bir referans bir örnek görevi görür. DOM'a öğelerin yerleştirildiği konumlara Node (düğüm) denir. Bir Web sayfasındaki öğeleri JavaScript gibi bir programlama diliyle değiştirdiğimizde, bunu DOM düğümleri aracılığıyla yapıyoruz. Belirli bir elemanın bir DOM düğümüne erişerek, konum, görünüm, içerik, davranış, vb. Gibi özelliklerini değiştirebiliriz. Bunu yapmak için, bir düğümden diğer düğümlere geçmenin, yani DOM'u geçmenin bir yoluna sahip olmamız gerekir. İlişkili düğümler arasında JavaScript ile üç şekilde yönde geçiş yapabiliriz. 5 | 1- Aşağıya doğru 6 | 2- Yukarıya doğru 7 | 3- Eşit yönlü 8 | 9 | *Aşağı doğru hareket etme:* 10 | DOM'da düğümler arasında aşağı doğru 2 şekilde ulaşabiliriz: 11 | 1. `querySelector` ya da `querySelectorAll` 12 | 2. `children` 13 | 14 | *querySelector* ve *querySelectorAll* için örneklerimize bakalım. 15 | ```html 16 |
17 |

Component title

18 |
19 | ``` 20 | ```javascript 21 | const component = document.querySelector('.component') 22 | const title = component.querySelector('.component__title') 23 | console.log(title) 24 | ``` 25 | 26 | *children* ise, doğrudan bir alt öğeleri seçmenize izin veren bir özelliktir (hemen başka bir öğede iç içe geçmiş öğeler için). aşağıdaki örneğimize bakalım: 27 | ```html 28 | 35 | ``` 36 | 37 | ```javascript 38 | const list = document.querySelector('.list') 39 | const listItems = list.children 40 | console.log(listItems) 41 | ``` 42 | 43 | *Yukarı doğru hareket etme* 44 | Yukarı doğru ilerlemenin iki yöntemi vardır: 45 | 1. `parentElement` 46 | 2. `closest` 47 | 48 | *parentELement*, parent elementi seçmenize izin veren bir özelliktir. Parent element, seçilen elemanı çevreleyen en yakın öğedir. 49 | ```html 50 | 57 | ``` 58 | ```javascript 59 | const firstListItem = document.querySelector('li') 60 | const list = firstListItem.parentElement 61 | console.log(list) 62 | ``` 63 | 64 | *closest*, bir selectorla eşleşen en yakın üst element öğesini seçmenizi sağlar. örneğimizi inceleyelim: 65 | ```html 66 | 73 | ``` 74 | 75 | ```javascript 76 | const firstLink = document.querySelector('a') 77 | const list = firstLink.closest('.list') 78 | console.log(list) 79 | ``` 80 | 81 | Not: closest, o an seçilen öğeden aramaya başlar, ardından document'e ulaşana kadar yukarı doğru ilerler. bulduğu ilk öğeyi döndürür ve durur. 82 | 83 | *Eşit yönlü hareket etme* 84 | Eşit yönde hareket etmenin üç yöntemi vardır: 85 | 1. `nextElementSibling` 86 | 2. `previousElementSibling` 87 | 3. `parentElement`, `children` ve`index`i birleştirme. 88 | 89 | *NextElementSibling* ile bir sonraki elementi seçebilirsiniz. 90 | js 91 | const nextElem = Node.nextElementSibling 92 | ```html 93 | 100 | ``` 101 | ```javascript 102 | const firstListItem = document.querySelector('li') 103 | const secondListItem = firstListItem.nextElementSibling 104 | console.log(secondListItem) 105 | ``` 106 | 107 | Aynı şekilde, *previousElementSibling* ile bir önceki öğeyi seçebilirsiniz. 108 | ```html 109 | 116 | ``` 117 | 118 | ```javascript 119 | const secondListItem = document.querySelectorAll('li')[1] 120 | const firstListItem = secondListItem.previousElementSibling 121 | console.log(firstListItem) 122 | ``` 123 | 124 | *parentElement, children ve index'i birleştirme.* 125 | 126 | Bu yöntem, belirli bir sibling (kardeş) seçmenize izin verir. Nasıl çalıştığını bir örnekle açıklamak daha kolay. Aşağıdaki HTML'deki ilk öğeden dördüncü öğeyi seçmek istediğinizi varsayalım. 127 | ```html 128 | 135 | ``` 136 | ```javascript 137 | const firstItem = document.querySelector('li') 138 | const list = firstItem.parentElement 139 | const allItems = list.children 140 | const fourthItem = allItems[3] 141 | console.log(fourthItem)` 142 | ``` 143 | hepsini biraraya getirerek kısaltabiliriz. 144 | 145 | ```javascript 146 | const firstItem = document.querySelector('li') 147 | const fourthItem = firstITem.parentElement.children[3] 148 | console.log(fourthItem) 149 | ``` 150 | Kısaca toparlamak gerekirse: DOM üzerinde yatay dikey ya da aşağı yönlü hareket ederek belirli düğümlere ve ulaşıp bunlara yeni düğümler ekleyebilir ya da değiştirebiliriz. Bunlara da genel olarak traversing the DOM denir. Umarım açıklayıcı olmuştur. 151 | -------------------------------------------------------------------------------- /week3/drafts3/Understanding-DOM.md: -------------------------------------------------------------------------------- 1 | Genellikle DOM olarak adlandırılan Document Object Model, web sitelerini etkileşimli hale getirmenin önemli bir parçasıdır. Bir programlama dilinin bir web sitesinin içeriğini, yapısını ve stilini değiştirmesine izin veren bir veri temsil aracıdır. JavaScript, tarayıcıda DOM'a bağlanan ve bu işlemleri yapmamıza imkan veren programlama dilidir. 2 | 3 | DOM, bir document'i mantıksal bir ağaç gibi temsil eder. Ağacın her dalı bir düğümde biter ve her düğüm objeler içerir. DOM metodları bu ağaca erişime izin verir. Bu metodlarla document'in yapısını, stilini veya içeriğini değiştirebilirsiniz. Node'lara ayrıca event handlers da eklenebilir. Bir event tetiklendiğinde, event handler execute edilir. 4 | 5 | En basit düzeyde, bir web sitesi bir HTML belgesinden oluşur. Web sitesini görüntülemek için kullandığınız tarayıcı, HTML ve CSS'yi yorumlayan ve stil, içerik ve yapıyı gördüğünüz sayfaya işleyen bir programdır. 6 | 7 | Tarayıcı, HTML'i parse etme ve CSS'nin stillendirmesine ek olarak, Document Object Model olarak bilinen bir yapı oluşturur. Bu model, JavaScript'in içeriğine ve öğelerine bir obje olarak erişmesine izin verir. 8 | Örneğin: 9 | ```html 10 | 11 | 12 | 13 | 14 | Learning the DOM 15 | 16 | 17 | 18 |

Document Object Model

19 | 20 | 21 | 22 | ``` 23 | Bu kodu index.html olarak kaydeder ve browserda açıp sağ tıkla inspect ederseniz elements kısmında DOM yapısını göreceksiniz. 24 | 25 | ## The Document Object 26 | Document object, web sitelerine erişmek ve bunları değiştirmek için kullanabileceğimiz birçok özelliğe ve metoda sahip built-in bir objedir. DOM ile nasıl çalışılacağını anlamak için, objelerin JavaScript'te nasıl çalıştığını anlamanız gerekir. 27 | 28 | İndex.html adresindeki developer tools bölümünde, Console sekmesine gidin. konsola document yazın ve ENTER tuşuna basın. Çıktının elements sekmesinde gördüğünüzle aynı olduğunu göreceksiniz. 29 | 30 | Şu anda, bu örnekle, HTML kodu ve DOM'un tamamen aynı şey olduğu görülmektedir. Tarayıcı tarafından oluşturulan DOM'un HTML kaynak kodundan farklı olacağı iki örnek vardır: 31 | 32 | 1- DOM, client side tarafında JavaScript tarafından manipüle edilip değiştirilebilir. 33 | 2- Tarayıcı, kaynak koddaki hataları otomatik olarak düzeltir. 34 | 35 | DOM örneğini JavaScript tarafından manipüle edebilmek için bir örnek yapalım. 36 | Konsola document.body yazalım. 37 | ```html 38 | 39 |

Document Object Model

40 | 41 | ``` 42 | çıktısı yukarıdaki gibi olacaktır. Document bir objedir, body ise o objenin nokta notasyonu ile eriştiğimiz bir özelliğidir. document.body'yi konsola göndermek, gövde elemanını ve içindeki her şeyi ortaya çıkarır. 43 | örneğin 44 | ```bash 45 | document.body.style.backgroundColor = 'fuchsia' 46 | ``` 47 | yazarsak background rengini değiştirebiliriz. Şuanda yazdığımız kod DOM'un bir parçasıdır. 48 | 49 | Toparlamak gerekirse Document Object Model (DOM), bellekte bir document'in yapısının (bir web sayfasını temsil eden HTML gibi) bir temsilini oluşturarak web sayfalarını script veya programlama dillerine bağlar. 50 | -------------------------------------------------------------------------------- /week3/drafts3/createlement-appendchild-textcontent-innerhtml.md: -------------------------------------------------------------------------------- 1 | # TextContent 2 | 3 | TextContent özelliği, belirtilen düğümün metin içeriğini ve tüm alt öğelerini ayarlar veya döndürür. 4 | Varolan bir içeriği değiştirebilir veya boş bir elementi string(metinsel) içerik ile doldurabilirsiniz. 5 | 6 | *var x = document.getElementById("myBtn");* 7 | *x.textContent="selamlar";* 8 | 9 | 10 | # CreateElement 11 | 12 | HTML nesnesi oluşturmak için kullanılır. 13 | CreateElement () yöntemi, belirtilen ada sahip bir Öğe Düğümü oluşturur. 14 | eleman oluşturulduktan sonra kullanmak eleman .appendChild () veya eleman .insertBefore () belgeye eklemek için bir yöntemdir. 15 | 16 | *var btn = document.createElement("BUTTON");* 17 | *btn.innerHTML = "CLICK ME";* 18 | 19 | 20 | 21 | # AppendChild 22 | 23 | AppendChild () yöntemi, bir düğümün son çocuğu olarak bir düğüm ekler. 24 | Metin içeren yeni bir paragraf oluşturmak istiyorsanız, metni paragrafa eklediğiniz bir Metin düğümü olarak oluşturmayı ve ardından paragrafı belgeye eklemeyi unutmayın. 25 | Bu yöntemi, bir öğeyi bir öğeden diğerine taşımak için de kullanabilirsiniz (bkz. “Diğer Örnekler”). 26 | İpucu: Belirtilen, var olan bir alt düğümden önce yeni bir alt düğüm eklemek için insertBefore () yöntemini kullanın. 27 | 28 | *document.body.appendChild(btn);* 29 | 30 | 31 | 32 | # İnnerHTML 33 | 34 | innerHtml özellik, HTML belge üzerinde dinamik html yazmak için kullanılabilir. 35 | Daha çok web sayfalarında kayıt formu, yorum formu, linkler vb. Dinamik html oluşturmak için kullanılır. 36 | 37 | *document.getElementById(“demo”).innerHTML = “Paragraph changed!”;* 38 | 39 | # İnsertBefore 40 | 41 | İnsertBefore () yöntemi, sizin belirttiğiniz mevcut bir alt öğenin hemen önüne alt öğe olarak bir düğüm ekler. 42 | Metin içeren yeni bir liste öğesi oluşturmak istiyorsanız, metni "li" öğesine ekleyeceğiniz Metin düğümü olarak oluşturmayı ve ardından listeye "li" eklemeyi unutmayın. 43 | Mevcut bir öğeyi eklemek / taşımak için insertBefore yöntemini de kullanabilirsiniz. 44 | 45 | *var node = document.getElementById(“myList2”).lastChild;* 46 | *var list = document.getElementById(“myList1”);* 47 | *list.insertBefore(node, list.childNodes[0]);* -------------------------------------------------------------------------------- /week3/drafts3/mouse events.md: -------------------------------------------------------------------------------- 1 | # Mause Events 2 | 3 | - **mousedown**: Farenin üzerine tıklandığında gerçekleşen olay. Değer 0 ise sol, 1 ise orta buton, 2 ise sağ butona tıklanmıştır. Aşağıda bu durum ile ilgili bir buton state tablosu paylaşılmıştır. 4 | 5 | Button state | event.button 6 | ------------------------------ | ------------------------------ 7 | Left button (primary) | 0 8 | Middle button (auxiliary) | 1 9 | Right button (secondary) | 2 10 | X1 button (back) | 3 11 | X2 button (forward) | 4 12 | 13 | - **mouseup**: Farenin üzerine tıklama işleminin bırakılması 14 | - **mousemove**: : Bir öğe üzerine geldiğimizde, fare imleci öğe üzerindeyken gerçekleşen olaydır. Mouseover’dan farklı olarak öğenin üzerinde yapılan her fare hareketi bu olayı tetikler, birden fazla kezdir. 15 | - **mouseenter**: Fare sadece seçili öğe üzerine geldiği zaman tetiklenir. Genellikle mouseleave metoduyla birlikte kullanılır. 16 | - **mouseleave**: Fare sadece seçili nesne üzerinden ayrıldığı zaman tetiklenir. 17 | - **mouseover**: Fare bir elementin üzerine geldiğinde, hem seçili nesne hem de o nesnenin child(çocuk) elemanları üzerine geldiği zaman tetiklenir. Bİmlecin bulunduğu elementin üzerinde gezdikçe mouseover event (olay) sadece bir defa gerçekleşir. Genellikle mouseout metoduyla birlikte kullanılır. 18 | - **mouseout**: Fare hem seçili nesne hem de o nesnenin child(çocuk) elemanları üzerinden ayrıldığı zaman tetiklenir. 19 | - **onClick**: Sol fare düğmesi ile aynı öğe üzerinde tıklama, mousedown ve mouseup yapma. 20 | - **dblclick**: Kısa süre içerisinde aynı öğeye çift tıklandığında gerçekleşen olaydır. 21 | - **contextmenu**: Farenin sağ düğmesine tıklanmasıdır. 22 | 23 | # Scroll Event 24 | Scroll olayı, bir öğe veya sayfa kaydırıldığında gerçekleşen olaydır. Web sayfalarında sayfayı aşağı scroll ettiğimizde daha fazla datanın yüklenmesini sağlamak en çok kullanılan olaylardan birine örnek olarak gösterilebilir. 25 | 26 | Bir sayfa için, **scrollX** ve **scrollY** ile öğenin içeriğinin yatay ve dikey olarak, **scrollTop** veya **scrollLeft** ile dikey olarak veya sol kenardan piksel sayısının alınmasını, ne kadar kaydırıldığının bilinmesini sağlar 27 | 28 | # Form Events 29 | - **Onblur**: Öğeden ayrılınca, öğe odağını kaybettiği anda gerçekleşecek olayları belirtir 30 | - **Onchange**:. Web sayfası üzerinde ziyaretçinin değiştirebileceği üç tür alan vardır. Bunlar text, textarea ve select’dır. Text veya Textarea öğelerine değer yazılması ya da select öğesinde seçim yapılması onChange event’i tetikler. 31 | - **Onfocus**: Öğe seçildiğinde, öğeye odaklanıldığında meydana gelecek olaylardır. 32 | - **Oninput**: input veya textarea öğelerine değer girildiğinde, değer değiştirldiğinde tetiklenen olaydır. 33 | - **Oninvalid**: Elemente geçersiz giriş olduğunda tetiklenen olay. Giriş formlarında ismin boş bırakılmasında alınmak istenen bir alert, bu durumun kullanılmak istenmesine örnek olarak gösterilebilir. 34 | - **Onreset**: Form sıfırlandığında gerçekleşir. 35 | - **Onsearch**: input type’ına “search” yazılarak kullanılır. **()**. Bu olay, kullanıcı "Enter" tuşuna bastığında veya arama kutusunda "x" i tıkladığında çalışır. 36 | - **Onselect**: Öğe seçildiğinde çalıştırılacak olan olaydır. 37 | - **Onsubmit**: Kullanıcı bir submit(gönder) butonuna tıklandığında veya enter tuşuna bastığında tetiklenen olaydır. 38 | 39 | **Kaynaklar:** 40 | https://javascript.info/mouse-events-basics
41 | https://www.w3schools.com/jsref/obj_mouseevent.asp 42 | -------------------------------------------------------------------------------- /week3/drafts3/readme.txt: -------------------------------------------------------------------------------- 1 | Week 3 2 | Understanding Dom (Mahmut) 3 | Selecting Elements (Tolunay) 4 | id, 5 | name, 6 | tagname, 7 | classname, 8 | queryselector 9 | Traversing Elements (Mahmut) 10 | get the parent, 11 | get the child, 12 | get siblings 13 | Manipulating Elements (Mehmet Sait, Gurhan) 14 | createElement, 15 | appendChild, 16 | textContent, 17 | innerHTML, 18 | inner vs createEl, 19 | insertBefore/After, 20 | append, 21 | prepend 22 | Attributes (Gurhan) 23 | set, 24 | get, 25 | remove, 26 | has) 27 | Manipulating style (Umutcan) 28 | style, 29 | getComputedStyle, 30 | className, 31 | classList, 32 | getBoundingRect 33 | Events 34 | Event Flow(Mehmet) 35 | Event Bubbling(Mehmet) 36 | Event Capturing (Mehmet), 37 | Event Delegation (Mehmet), 38 | Event object, 39 | handling events(onClick, addEventListener) (Melike) 40 | load event (Gizem) 41 | -------------------------------------------------------------------------------- /week4/arraymethods.js: -------------------------------------------------------------------------------- 1 | // filter, map, sort, find, every, some, forEach 2 | 3 | // forEeach 4 | const fruits = ["apple", "banana", "orange"]; 5 | 6 | const konsolaYazdir =(fruit, index) => { 7 | const str = `Su anki index ${index}, su anki deger ${fruit}`; 8 | console.log(str); 9 | }; 10 | 11 | fruits.forEach(konsolaYazdir); 12 | 13 | 14 | // map 15 | const numbers = [2,4,6,8]; 16 | const numbersMultiply2 = numbers.map((number) => number*2); 17 | numbersMultiply2 18 | 19 | // filter 20 | const people = [ 21 | {name: "John", age: 30, languages: ["Rust", "C#"]}, 22 | {name: "Mary", age: 30, languages: ["JavaScript", "GO"]}, 23 | {name: "Joe", age: 20, languages: ["Python", "Pascal"]}, 24 | {name: "Benjamin", age: 25, languages: ["JavaScript", "C#"]} 25 | ] 26 | 27 | const peopleOlderThan20 = people.filter(person => person.age > 20); 28 | const firstPersonKnowsJs = people.find((person) => { 29 | //return person.languages.includes("JavaScript"); 30 | //return person.languages.find(language => language === "JavaScript"); 31 | // return person.languages.indexOf("JavaScript") > -1; 32 | }); 33 | firstPersonKnowsJs 34 | 35 | 36 | // some, every 37 | const isAnyoneOlderThan20 = people.some(person => person.age > 20); 38 | const isEveryoneOlderThan20 = people.every(person => person.age > 20); 39 | isAnyoneOlderThan20 ? "Yes" : "No" 40 | isEveryoneOlderThan20 ? "Yes" : "No" 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /week4/async.js: -------------------------------------------------------------------------------- 1 | const yemekSiparisi = new Promise((resolve, reject) => { 2 | setTimeout(() => { 3 | resolve({name: "Hamburger"}); 4 | }, 2000) 5 | }); 6 | 7 | yemekSiparisi.then((data) => { 8 | console.log(`${data.name} hazir`); 9 | }).catch(() => { 10 | console.log("Bir problem olustu"); 11 | }) 12 | 13 | console.log("3"); 14 | 15 | 16 | const promise = new Promise((resolve, reject) => { 17 | setTimeout(reject, 2000); 18 | }) 19 | 20 | function logA(){ 21 | console.log("A") 22 | } 23 | 24 | function logB(){ 25 | console.log("B"); 26 | } 27 | 28 | promise.then(logA).then(logB).catch(logB); 29 | 30 | 31 | 32 | /* getUser("johndoe", (user) => { 33 | getWeather(user.location, (weather) => { 34 | getSometgin(weather, () => { 35 | console.log("Callback hell") 36 | }); 37 | }) 38 | }) */ 39 | 40 | /* getUser("johndoe") 41 | .then(getWeather) 42 | .then((data) => getSomething()) 43 | .then((something) => console.log("not callback hell")); */ 44 | 45 | /* 46 | const myRequest = fetch("https://httpbin.org/get"); 47 | 48 | myRequest.then((data) => { 49 | console.log(data); 50 | }).catch((err) => { 51 | console.log(err); 52 | }) 53 | 54 | for(let i=0; i< 5000; i++){ 55 | console.log(i); 56 | } 57 | */ 58 | 59 | 60 | // async/await 61 | 62 | async function toplama(x,y){ 63 | return x + y; 64 | } 65 | 66 | 67 | async function buildUi(){ 68 | makeLayout(); 69 | createDomElements(); 70 | try{ 71 | const sonuc = await toplama(3,4); 72 | }catch(error){ 73 | console.log(error); 74 | } 75 | console.log("Son satir"); 76 | } 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /week4/class.js: -------------------------------------------------------------------------------- 1 | class Animal { 2 | constructor(name, energy) { 3 | this.name = name; 4 | this.energy = energy; 5 | } 6 | 7 | eat(amount){ 8 | console.log(`${this.name} is eating`); 9 | this.energy += amount 10 | } 11 | 12 | sleep(length){ 13 | console.log(`${this.name} is sleeping`); 14 | this.energy += length 15 | } 16 | 17 | play(length){ 18 | console.log(`${this.name} is playing`); 19 | this.energy -= length 20 | } 21 | } 22 | 23 | const leo = new Animal("Leo", 7); 24 | const snoop = new Animal("Snoop", 10); 25 | -------------------------------------------------------------------------------- /week4/code.js: -------------------------------------------------------------------------------- 1 | // Template Literals 2 | const name = "Joe"; 3 | const age = 30; 4 | const str = "Hello, my name is " +name + ", I'm " + age +" years old"; 5 | const strTemplate = `Hello, my name is ${name}, I'm ${age} years old`; 6 | //console.log(str); 7 | //console.log(strTemplate); 8 | 9 | // Shorthand Properties && Shorthand Method Names 10 | const firstName = "John"; 11 | const lastName = "Doe"; 12 | const person = { 13 | firstName, // firstName: firstName 14 | lastName, // lastName: lastName 15 | save(){ 16 | 17 | } 18 | } 19 | 20 | // Arrow Functions 21 | const getFive = function(){ 22 | return 5; 23 | } 24 | const getFiveArrow = () => 5; 25 | const multiply = (x,y) => x*y; 26 | //a.on("click", function cb(){}) // named function 27 | //a.on("click", () => {}) // anonymous function 28 | 29 | // Destructring 30 | /// Array destructing 31 | let arr = ["John", "Doe", 30, ["js", "python"]]; 32 | let [arrFirstName,arrLastName,arrAge, [,second]] = arr; 33 | console.log(arrFirstName); 34 | console.log(arrLastName); 35 | console.log(arrAge); 36 | console.log(second); 37 | 38 | // Object Destructring 39 | /* let options = { 40 | title: "Menu", 41 | width: 100, 42 | height: 200, 43 | style: { 44 | background: "red", 45 | } 46 | }; 47 | */ 48 | let options; 49 | let {width: myWidth, title, height, style: {background, border: {left}}} = options || {}; 50 | console.log(background,left); 51 | 52 | /* 53 | const height = options.height; 54 | const title = options.title; 55 | const background = option.style.background; 56 | const left = option.style.border.left; 57 | */ 58 | 59 | // Optional Chaining 60 | const user = { 61 | address: { 62 | street: "Rasimpasa", 63 | details: { 64 | name: { 65 | firstName 66 | } 67 | } 68 | } 69 | } 70 | const streetName = user && user.address && user.address.street; 71 | const streetNameNew = user?.address?.street 72 | 73 | /// Default Parameters 74 | const multiplyOld = (x,y) => { 75 | return x*y; 76 | }; 77 | const multiply = (x,y=5) => { 78 | return x*y; 79 | } 80 | multiply(3,5); 81 | multiply(3); 82 | 83 | -------------------------------------------------------------------------------- /week4/movies/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 |
22 | 23 |
24 |
25 |
26 |
Filter by year
27 |
28 | 29 | 32 |
33 |
34 | 35 | 38 |
39 | 40 | 41 |
42 |
43 |
Filter by genre
44 |
45 | 46 | 49 |
50 |
51 | 52 | 55 |
56 | 57 | 58 |
59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
ImageTitleGenreYear
ImageMovie NameAction1990
79 |
80 | 81 | 82 |
83 |
84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /week4/movies/scripts/data.js: -------------------------------------------------------------------------------- 1 | let moviesData = [ 2 | { 3 | "title": "The Shawshank Redemption", 4 | "year": "1994", 5 | "genre": "Crime", 6 | "image": "https://ia.media-imdb.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg", 7 | "id": 0 8 | }, 9 | { 10 | "title": "The Godfather", 11 | "year": "1972", 12 | "genre": "Crime", 13 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BY2Q2NzQ3ZDUtNWU5OC00Yjc0LThlYmEtNWM3NTFmM2JiY2VhXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg", 14 | "id": 1 15 | }, 16 | { 17 | "title": "The Godfather: Part II", 18 | "year": "1974", 19 | "genre": "Crime", 20 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjZiNzIxNTQtNDc5Zi00YWY1LThkMTctMDgzYjY4YjI1YmQyL2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg", 21 | "id": 2 22 | }, 23 | { 24 | "title": "The Dark Knight", 25 | "year": "2008", 26 | "genre": "Action", 27 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg", 28 | "id": 3 29 | }, 30 | { 31 | "title": "12 Angry Men", 32 | "year": "1957", 33 | "genre": "Crime", 34 | "image": "https://ia.media-imdb.com/images/M/MV5BMWU4N2FjNzYtNTVkNC00NzQ0LTg0MjAtYTJlMjFhNGUxZDFmXkEyXkFqcGdeQXVyNjc1NTYyMjg@._V1_SX300.jpg", 35 | "id": 4 36 | }, 37 | { 38 | "title": "Schindler's List", 39 | "year": "1993", 40 | "genre": "Biography", 41 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BNDE4OTMxMTctNmRhYy00NWE2LTg3YzItYTk3M2UwOTU5Njg4XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg", 42 | "id": 5 43 | }, 44 | { 45 | "title": "The Lord of the Rings: The Return of the King", 46 | "year": "2003", 47 | "genre": "Adventure", 48 | "image": "https://ia.media-imdb.com/images/M/MV5BYWY1ZWQ5YjMtMDE0MS00NWIzLWE1M2YtODYzYTk2OTNlYWZmXkEyXkFqcGdeQXVyNDUyOTg3Njg@._V1_SX300.jpg", 49 | "id": 6 50 | }, 51 | { 52 | "title": "Pulp Fiction", 53 | "year": "1994", 54 | "genre": "Crime", 55 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTkxMTA5OTAzMl5BMl5BanBnXkFtZTgwNjA5MDc3NjE@._V1_SX300.jpg", 56 | "id": 7 57 | }, 58 | { 59 | "title": "The Good, the Bad and the Ugly", 60 | "year": "1966", 61 | "genre": "Western", 62 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BOTQ5NDI3MTI4MF5BMl5BanBnXkFtZTgwNDQ4ODE5MDE@._V1_SX300.jpg", 63 | "id": 8 64 | }, 65 | { 66 | "title": "Fight Club", 67 | "year": "1999", 68 | "genre": "Drama", 69 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzFjMWNhYzQtYTIxNC00ZWQ1LThiOTItNWQyZmMxNDYyMjA5XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg", 70 | "id": 9 71 | }, 72 | { 73 | "title": "The Lord of the Rings: The Fellowship of the Ring", 74 | "year": "2001", 75 | "genre": "Adventure", 76 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BN2EyZjM3NzUtNWUzMi00MTgxLWI0NTctMzY4M2VlOTdjZWRiXkEyXkFqcGdeQXVyNDUzOTQ5MjY@._V1_SX300.jpg", 77 | "id": 10 78 | }, 79 | { 80 | "title": "Forrest Gump", 81 | "year": "1994", 82 | "genre": "Drama", 83 | "image": "https://ia.media-imdb.com/images/M/MV5BNWIwODRlZTUtY2U3ZS00Yzg1LWJhNzYtMmZiYmEyNmU1NjMzXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg", 84 | "id": 11 85 | }, 86 | { 87 | "title": "Star Wars: Episode V - The Empire Strikes Back", 88 | "year": "1980", 89 | "genre": "Action", 90 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00NjZmLTg5NGItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg", 91 | "id": 12 92 | }, 93 | { 94 | "title": "Inception", 95 | "year": "2010", 96 | "genre": "Action", 97 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg", 98 | "id": 13 99 | }, 100 | { 101 | "title": "The Lord of the Rings: The Two Towers", 102 | "year": "2002", 103 | "genre": "Adventure", 104 | "image": "https://ia.media-imdb.com/images/M/MV5BMDY0NmI4ZjctN2VhZS00YzExLTkyZGItMTJhOTU5NTg4MDU4XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg", 105 | "id": 14 106 | }, 107 | { 108 | "title": "One Flew Over the Cuckoo's Nest", 109 | "year": "1975", 110 | "genre": "Drama", 111 | "image": "https://ia.media-imdb.com/images/M/MV5BZjA0OWVhOTAtYWQxNi00YzNhLWI4ZjYtNjFjZTEyYjJlNDVlL2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg", 112 | "id": 15 113 | }, 114 | { 115 | "title": "Goodfellas", 116 | "year": "1990", 117 | "genre": "Biography", 118 | "image": "https://ia.media-imdb.com/images/M/MV5BNThjMzczMjctZmIwOC00NTQ4LWJhZWItZDdhNTk5ZTdiMWFlXkEyXkFqcGdeQXVyNDYyMDk5MTU@._V1_SX300.jpg", 119 | "id": 16 120 | }, 121 | { 122 | "title": "The Matrix", 123 | "year": "1999", 124 | "genre": "Action", 125 | "image": "https://images-na.ssl-images-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg", 126 | "id": 17 127 | }, 128 | { 129 | "title": "Seven Samurai", 130 | "year": "1954", 131 | "genre": "Adventure", 132 | "image": "https://ia.media-imdb.com/images/M/MV5BMTc5MDY1MjU5MF5BMl5BanBnXkFtZTgwNDM2OTE4MzE@._V1_SX300.jpg", 133 | "id": 18 134 | }, 135 | { 136 | "title": "Star Wars: Episode IV - A New Hope", 137 | "year": "1977", 138 | "genre": "Action", 139 | "image": "https://ia.media-imdb.com/images/M/MV5BNzVlY2MwMjktM2E4OS00Y2Y3LWE3ZjctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg", 140 | "id": 19 141 | } 142 | ] 143 | 144 | 145 | export default moviesData; -------------------------------------------------------------------------------- /week4/movies/scripts/helpers.js: -------------------------------------------------------------------------------- 1 | export const searchMovieByTitle = (movie, searchValue) => { 2 | return movie.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1; 3 | } 4 | 5 | export const makeBgActive = (movie) => { 6 | document.querySelector(`tr[data-id='${movie.id}']`).style.background = "#d7f0f7"; 7 | } 8 | -------------------------------------------------------------------------------- /week4/movies/scripts/main.js: -------------------------------------------------------------------------------- 1 | import data from "./data.js"; 2 | import {searchMovieByTitle, makeBgActive} from "./helpers.js"; 3 | 4 | class MoviesApp { 5 | constructor(options) { 6 | const {root, searchInput, searchForm, yearHandler, yearSubmitter} = options; 7 | this.$tableEl = document.getElementById(root); 8 | this.$tbodyEl = this.$tableEl.querySelector("tbody"); 9 | 10 | this.$searchInput = document.getElementById(searchInput); 11 | this.$searchForm = document.getElementById(searchForm); 12 | this.yearHandler = yearHandler; 13 | this.$yearSubmitter = document.getElementById(yearSubmitter); 14 | } 15 | 16 | createMovieEl(movie){ 17 | const {image, title, genre, year,id} = movie; 18 | return `${title}${genre}${year}` 19 | } 20 | 21 | fillTable(){ 22 | /* const moviesHTML = data.reduce((acc, cur) => { 23 | return acc + this.createMovieEl(cur); 24 | }, "");*/ 25 | const moviesArr = data.map((movie) => { 26 | return this.createMovieEl(movie) 27 | }).join(""); 28 | this.$tbodyEl.innerHTML = moviesArr; 29 | } 30 | 31 | reset(){ 32 | this.$tbodyEl.querySelectorAll("tr").forEach((item) => { 33 | item.style.background = "transparent"; 34 | }) 35 | } 36 | 37 | 38 | handleSearch(){ 39 | this.$searchForm.addEventListener("submit", (event) => { 40 | event.preventDefault(); 41 | this.reset(); 42 | const searchValue = this.$searchInput.value; 43 | const matchedMovies = data.filter((movie) => { 44 | return searchMovieByTitle(movie, searchValue); 45 | }).forEach(makeBgActive) 46 | 47 | }); 48 | } 49 | 50 | handleYearFilter(){ 51 | this.$yearSubmitter.addEventListener("click", () => { 52 | this.reset(); 53 | const selectedYear = document.querySelector(`input[name='${this.yearHandler}']:checked`).value 54 | const matchedMovies = data.filter((movie) => { 55 | return movie.year === selectedYear; 56 | }).forEach(makeBgActive) 57 | }); 58 | } 59 | 60 | init(){ 61 | this.fillTable(); 62 | this.handleSearch(); 63 | this.handleYearFilter(); 64 | } 65 | } 66 | 67 | let myMoviesApp = new MoviesApp({ 68 | root: "movies-table", 69 | searchInput: "searchInput", 70 | searchForm: "searchForm", 71 | yearHandler: "year", 72 | yearSubmitter: "yearSubmitter" 73 | }); 74 | 75 | myMoviesApp.init(); 76 | -------------------------------------------------------------------------------- /week4/movies/style.css: -------------------------------------------------------------------------------- 1 | img { 2 | height: 50px; 3 | } 4 | 5 | .box { 6 | margin: 15px 0; 7 | padding: 10px; 8 | background: #bff3dc; 9 | } 10 | 11 | .btn { 12 | width: 100%; 13 | display: block; 14 | text-align: center; 15 | margin-top: 20px; 16 | } -------------------------------------------------------------------------------- /week4/prototype.js: -------------------------------------------------------------------------------- 1 | /* const animalMethods = { 2 | eat(amount){ 3 | console.log(`${this.name} is eating`); 4 | this.energy += amount 5 | }, 6 | sleep(length){ 7 | console.log(`${this.name} is sleeping`); 8 | this.energy += length 9 | }, 10 | play(length){ 11 | console.log(`${this.name} is playing`); 12 | this.energy -= length; 13 | } 14 | } 15 | 16 | function Animal(name, energy) { 17 | let animal = Object.create(animalMethods); 18 | animal.name = name; 19 | animal.energy = energy; 20 | return animal; 21 | } 22 | 23 | const leo = Animal("Leo", 7); // new animal.eat, animal.sleep, animal.play created 24 | const snoop = Animal("Snoop", 10); // new animal.eat, animal.sleep, animal.play created 25 | 26 | leo.eat(); 27 | snoop.play(); 28 | */ 29 | 30 | function Animal(name, energy) { 31 | this.name = name; 32 | this.energy = energy; 33 | } 34 | 35 | Animal.prototype.eat = function(amount){ 36 | console.log(`${this.name} is eating`); 37 | this.energy += amount 38 | } 39 | 40 | Animal.prototype.sleep = function(length){ 41 | console.log(`${this.name} is sleeping`); 42 | this.energy += length 43 | } 44 | 45 | Animal.prototype.play = function(length){ 46 | console.log(`${this.name} is playing`); 47 | this.energy -= length 48 | } 49 | 50 | const leo = new Animal("Leo", 7); 51 | const snoop = new Animal("Snoop", 10); 52 | 53 | 54 | // hasOwnProperty 55 | leo.hasOwnProperty("name") // true 56 | leo.hasOwnProperty("sleep") // false 57 | 58 | // instanceof 59 | leo instanceof Animal; 60 | 61 | leo.eat(); 62 | console.log(leo); 63 | snoop.play(); 64 | 65 | 66 | /// Object.create 67 | const parent = { 68 | name: "Stacey", 69 | age: 35, 70 | heritage: "Irish" 71 | } 72 | 73 | const child = Object.create(parent); 74 | child.name = "Ryan"; 75 | child.age = 7; 76 | 77 | console.log(child.name) //Ryan 78 | console.log(child.heritage) //Irish 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /week4/rest.js: -------------------------------------------------------------------------------- 1 | //... 2 | /// Rest and spread 3 | const fruits = ["apple", "orange", "banana"]; 4 | // Copying && concat 5 | const otherFruits = ["apricots", "avocado"]; 6 | const fruitsCopy = [...fruits, ...otherFruits]; 7 | 8 | /// slice 9 | const [apple, orange, ...remainingFruits] = fruits; 10 | apple 11 | remainingFruits 12 | 13 | function add(...args){ 14 | let result = 0; 15 | for(let i=0; i