forked from maeyler/JS
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
154 lines (141 loc) · 8.09 KB
/
index.html
File metadata and controls
154 lines (141 loc) · 8.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="cyan" />
<meta name="author" content="M A Eyler, Istanbul, 2018" />
<meta name="description" content="BLM305 FSMV University" />
<title>JavaScript Örnekleri </title>
<link rel="icon" href="images/JS.png">
<link rel="manifest" href="manifest.json">
<script>
if ('serviceWorker' in navigator) {
if (location.protocol.startsWith('http'))
navigator.serviceWorker.register('sw.js')
.then(reg => { console.log('Service Worker', reg.scope) })
.catch(alert)
}
</script>
<style>
body { font: 14px sans-serif; }
h3 { margin-top: 20px; margin-bottom: 0; }
ul { margin: 6px; padding: 0 12px; }
li { margin: 6px; }
</style>
</head>
<body>
<h2>JavaScript Örnekleri </h2>
<p><a href="https://github.com/maeyler/JS" target="NewTab">
Bu repoda</a> JS kullanan örnek web sayfaları bulacaksınız</p>
<h3 id="temel">Temel Konular </h3>
<ul>
<li><a href="simple/Date%20test.html">Date and Color</a> Date ve Color nesneleri ile işlem</li>
<li><a href="simple/char_count.html">Char Count</a> tuşlara bastıkça metnin uzunluğu değişir</li>
<li><a href="simple/Color%20Paragraphs.html">Color Paragraphs</a> JS içinde renk değişimi</li>
<li><a href="simple/Compare%20Colors.html">Compare Colors</a> Renk ve karşıt renk seçimi</li>
<li><a href="simple/HTML%20items.html">HTML Items</a> Programa veri girmenin yolları</li>
<li><a href="simple/Calculator.html">Calculator</a> adres çubuğunda aritmetik işlemler</li>
<li><a href="simple/Counter.html">Click Count</a> localStorage kullanan basit bir sayaç</li>
<li><a href="simple/Clock.html">Clock</a> setTimeout() kullanan animasyon</li>
<li><a href="simple/Timer.html">Simple Timer</a> iki tıklama arası zaman ölçümü</li>
<li><a href="simple/JS_Animation.html">JS Animation</a> -- JS ile güçlü ve basit</li>
<li><a href="simple/CSS_Transition.html">CSS Transition</a> -- çok daha basit</li>
<li><a href="simple/ArrayAndSet.html">Array & Set Demo</a> push(), pop(), add() and delete()</li>
<li><a href="simple/carousel.html">Image Carousel</a> basit bir resim albümü</li>
<li><a href="simple/JSON_Teacher.html">JSON Teacher</a> -- nasıl çalışır?</li>
</ul>
<h3 id="hesap">Hesap ve Çizim </h3>
<ul>
<li><a href="math/Counting.html">Counting</a> Permutations & Subsets</li>
<li><a href="math/Math%20functions.html">Math Functions</a> Math fonksiyonların hesabı</li>
<li><a href="math/Numbers.html">Numbers</a> Sayı türlerinin JS class yapısında modeli</li>
<li><a href="math/Base%20Conversion.html"> Base Conversion</a> 16, 36, 80 tabanında sayılar</li>
<li><a href="math/Primes.html">Primes</a> Verilen bir sayıya kadar asal sayıların listesi</li>
<li><a href="math/TCKimlik.html">TC Kimlik</a> numarası nasıl doğrulanır</li>
<li><a href="math/Folding.html">Pythagorean Triples</a> kağıt katlarken Pisagor üçlüleri</li>
<li><a href="canvas/Graphics.html">Graphics</a> SVG ve Canvas ile çizim çok farklı</li>
<li><a href="canvas/Pie%20Chart.html">Pie Chart</a> Canvas kullanarak pasta grafiği çizimi</li>
<li><a href="canvas/webcam.html">Camera</a> Video ve Canvas ile fotoğraf çekelim</li>
<li><a href="canvas/colliding.html">Colliding balls</a> Çarpışan renkli toplar</li>
<li><a href="canvas/sunflower.html">Sunflower</a> Ayçiçeğinde altın oran nereden çıktı</li>
<li><a href="canvas/solar_system.html">Solar System</a> Güneş-Yer-Ay üçlüsünün hareketi</li>
</ul>
<h3 id="ileri">İleri Konular </h3>
<ul>
<li><a href="hard/JS%20page.html">Page made by JS</a> Tamamen JS ile yapılan örnek sayfa</li>
<li><a href="hard/Table%20maker.html">Table Maker</a> İstenilen boyda bir tablo ve tooltip örneği</li>
<li><a href="hard/Select%20file.html">Select Local</a> Input/file ile yerel dosya okumak</li>
<li><a href="api/directory.html">Select directory</a> lokal bir klasörün ağaç yapısı</li>
<li><a href="hard/Fetch%20remote.html">Fetch Remote</a> fetch() metodu ile uzak dosya okumak</li>
<li><a href="data/Students.html">Student Database</a> 3000 öğrencinin bilgilerine erişim</li>
<li><a href="hard/ObjectList.html">List of Objects</a> düz metni nesnelere çevir</li>
<!-- <li><a href="hard/Console.html">Console</a> benzetimi ile JavaScript komutları</li> -->
<li><a href="linear/Equation.html">Linear Equations</a> Gauss-Jordan yöntemi</li>
<li><a href="auto/Auto.html">Automata</a> dersinin örnek yazılımı</li>
<li><a href="auto/Expression.html">Expression tree</a> Aritmetik ifadelerin ağaç yapısı</li>
<li><a href="hard/JSON_Hilite.html">JSON Highlight</a> RegExp ile renkli JSON yapalım</li>
<li><a href="hard/Philosophers.html">Dining Philosophers</a> Tek Thread ile deadlock olabilir</li>
<li><a href="sss/inspector.html">Inspector</a> JavaScript eğitim aracı</li>
<li><a href="sss/Employee2.html">Employee</a> Personel verilerinin class yapısında modeli</li>
</ul>
<h3 id="events">Events & Framework </h3>
<ul>
<li><a href="hard/Events.html">Event Handlers</a> click, touch, scroll event listeners</li>
<li><a href="hard/Battery.html">Battery & Internet</a> pil seviyesi ve bağlantı durumu</li>
<li><a href="hard/Propagation.html">Event Propagation</a> click and keyup event listeners</li>
<li><a href="hard/Dragging.html">Draggable Elements</a> click ve touch olaylarının farkı</li>
<li><a href="hard/URL_parts.html">URL Parts</a> verilen bir web adresinin parçaları</li>
<li><a href="util/Menu_items.html">Menu</a> & Context menu</li>
<li><a href="util/Modal_dialog.html">Modal dialog</a> örnekleri</li>
<!-- <li><a href="util/FormsToDocs.html">Cloud Storage</a> şifresiz bulut erişimi</li> -->
<li><a href="util/Details.html">Details-Summary</a> ile menu ve dialog yapılabilir</li>
<li><a href="util/name-tag.html">Web Components</a> <name-tag> and <emoji-picker></li>
<li><a href="hard/DOM%20tree.html">DOM tree</a> verilen bir HTML sayfasının ağaç yapısı</li>
</ul>
<h3 id="API">External API </h3>
<ul>
<li><a href="api/qrcode.html">QR Code</a> kare kodu nasıl yapılır</li>
<li><a href="api/GitHub_Users.html">GitHub Users</a> key gerekmeyen basit bir API</li>
<li><a href="api/Location.html">Location</a> iki farklı yöntemle enlem ve boylam</li>
<!-- <li><a href="api/Countries.html">Countries</a> bütün ülkeler hakkında bilgiler</li> -->
<li><a href="api/Weather.html">OpenWeather</a> ile hava durumu</li>
<li><a href="canvas/googlemaps.html">Maps 1</a> Google Maps API ile harita</li>
<li><a href="canvas/mapboxgl.html">Maps 2</a> MapBoxGL API ile harita</li>
<li><a href="canvas/ibb_map.html">Maps 3</a> İBB Şehir haritası</li>
<li><a href="api/YouTube.html">YouTube play list</a> Google API key ile</li>
<li><a href="api/play_list.html">YouTube play list</a> key yoksa copy/paste var</li>
<li><a href="api/YT_teacher.html">YouTube teacher</a> Inspector içinde GAPI</li>
<li><a href="api/Drive_API.html">Google Drive</a> ile bulut erişimi</li>
<li><a href="api/Drive_teacher.html">Drive teacher</a> Inspector içinde GAPI</li>
</ul>
<h3 id="web">Web Sayfaları </h3>
<ul>
<li>HTML ile yapısı tasarlanır <html></li>
<li>CSS ile görünümü düzenlenir <style></li>
<li>JavaScript ile kodlanır <script></li>
</ul>
<p>Yani güzel bir web sayfası için üç farklı dil gerekiyor… <br />
Ref: <a href="https://www.w3schools.com/js/"
target="NewTab">JavaScript Tutorial</a></p>
<h3>Java avantajları </h3>
<ul>
<li>Daha profesyonel ve disiplinli</li>
<li>Server tarafında yaygın kullanım</li>
</ul>
<h3>JavaScript avantajları </h3>
<ul>
<li>Daha eğlenceli</li>
<li>Kullanımı kolay, kurulum yok</li>
<li>Web tasarımında vazgeçilmez</li>
<li>Her platformda çalışıyor</li>
</ul>
<h3 id="bilgiler">Ek Bilgiler</h3>
<ul>
<li><a href="Java%20to%20JS">Java'dan JS'e geçiş</a>
<li><a href="PWA">PWA Nasıl Yapılır</a>  
<a href="PWA_EN">PWA (English)</a>
</ul>
<script src="navbar.js"></script>
</body>
</html>