ReactJs Ders Notları

JAVASCRİPT
Javascript Nedir ?
JavaScript, HTML ve CSS ile birlikte web sayfalarının temel 3 bileşeninden biridir. Bir web
sayfasında DOM ( Domain Object Model ) manipülasyonları yapmayı sağlar.
Tarihsel olarak baktığımızda web sayfaları sabit bir düzende görüntülenen statik bir yapıya sahipti
ve günümüz modern web sitelerinden beklediğimiz herşeyi yapmıyordu. JavaScript, web
uygulamalarını daha dinamik hale getirmek için tarayıcı bazlı bir teknoloji olarak ortaya çıktı.
Herhangi bir kuruluma ihtiyaç duymadan direkt olarak tarayıcıda çalışabilir. JavaScript, web
sayfalarının içeriklerini veya stillerini dinamik olarak değiştirebilmemizi sağlar yani interaktif web
sayfaları hazırlamaya izin verir.
Yıllar içerisinde JavaScript olgunlaştıkça, kütüphaneler ve programlama uygulamaları çoğaldıkça

JavaScript web tarayıcısının dışında da kullanılmaya başlandı. Bugün JavaScript’i hem ön yüz hem
de sunucu tarafında kullanabilirsiniz.
1
JAVASCRİPT İLK ÖRNEK
Ampul yakma sayfası oluşturalım.
<html>
<body>
<h2>Javascript ile ampul yak</h2>
<button onclick="document.getElementById('ampul').src='pic_bulbon.gif'">
Işıkları Aç
</button>
<img id="ampul" src="pic_bulboff.gif" style="width: 100px" />
<button onclick="document.getElementById('ampul').src='pic_bulboff.gif'">
Işıkları Kapa
</button>
</body>
</html>
2
BASİT BİR HESAP MAKİNESİ YAPALIM
<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: green;
3
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> Javascript’te hesap makinesi </h1>
<div class= "formstyle">
<form name = "form1">

<input id = "calc" type ="text" name = "answer"> <br> <br>


<input type = "button" value = "1" onclick = "form1.answer.value += '1'
">
">
">
<input type = "button" value = "+" onclick = "form1.answer.value += '+'
">
<br> <br>
4
">
">
">
<input type = "button" value = "-" onclick = "form1.answer.value += '-'
">
<br> <br>

">
">
">
<input type = "button" value = "*" onclick = "form1.answer.value += '*'
">
<br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/'

">
">
<input type = "button" value = "." onclick = "form1.answer.value += '.'
">

<input type = "button" value = "=" onclick = "form1.answer.value =
eval(form1.answer.value) ">
<br>

<input type = "button" value = "Clear All" onclick = "form1.answer.value
= ' ' " id= "clear" >
<br>
</form>
</div>
</body>
</html>
5
JAVASCRİPT VARİABLES ( DEĞİŞKENLER )
Variables ( Değişkenler ) verilerin tutulduğu konteynırlar olarak tanımlanabilir. var, let ve const
anahtar kelimeleri ile tanımlanırlar. Verileri kısa süreli tutmak ve üzerinde işlemler yapmak için
kullanılan herhangi bir hafıza bölümü olarak düşünebiliriz.
- var 1995 ve 2015 arasında ki bütün JavaScript kodlarında kullanılır.

- let ve const anahtar kelimeleri 2015 sonraki JavaScript ile kullanılabilir.
2015 ve sonrası tarayıcılara kod geliştirmesi yapıyorsak let ve const anahtar kelimelerini
kullanmamalıyız.
Bir değişkene örnek verecek olursak;

var x = 5;
var y = 7;
var z = x + z;
Javascript değişken tanımlarken belirli kurallar vardır. Bu kurallar;
JavaScript Case Sensitive (Büyük/Küçük harfe duyarlı) özelliğindedir. O yüzden tanımlanan

değişkenlerin, tanımlandığı isimle kullanılması gerekir. Örneğin degisken ile Degisken
farklı şeylerdir.
Değişken tanımlaması yapılırken; değişken isimleri arasında boşluk bırakılamaz.
Değişken isimleri rakamla başlayamaz. Ilk karakterden sonra rakam ile devam edebilir.
Aynı zamanda ilk karakter _ underscore (alt çizgi) işareti olabilir.
JavaScript için Reserved Words (Ayrılmış Kelimeler) vardır. Bu kelimeler herhangi bir
değişken veya fonksiyon tanımlamasında kullanılamaz.
olarak sıralanabilir.
6
Javascript Reserved Words
abstract, alert, arguments, Array, blur, boolean, Boolean, break, byte,
callee, caller,captureEvents, case, catch, char, class, clearInterval,
clearTimeOut, close, closed, confirm,const, contructor, continue, Date,
debugger, default, defaultStatus, delete, do, document,double, else, enum,
escape, eval, export, extends, false, final, finally, find, float, focus,
for, frames Function, function, goto, history, home, if, implements,import,
in, infinity,innerHeight, innerWidth, instanceof, int, interface, isFinite,
isNan, java, length, location,locationbar, long, Math, menubar, moveBy,
moveTo, name, NaN, native, netscape, new,null, Number, Object, open,
opener, outerHeight, outerWidth, package, Packages,pageXOffset,
pageYOffset, parent, parseFloat, parseInt, personalbar print, private,
prompt, protected, prototype, public, RegExp, releaseEvents, resizeBy,
resizeTo, return,routeEvent, scroll, scrollbars, scrollBy, scrollTO, self,
setInterval, setTimeOut, short,static, status, statusbar, stop, String,
super, switch, synchronized, this, throw, throws,toolbar, top, toString,
transient, true, with, typeof, watch, unwatch, valueof, try, void,unescape,
while, window, var
Değişken tanımlaması aşağıdaki gibi gerçekleştirilir.
var degiskenAdi;
Değişken tanımlamasından sonra bu değişkene ilk değer ataması yapılabilir.
var degiskenAdi = ilkDeger;
Aynı satırsa birden fazla değişken tanımlaması da yapılabilir.
var degiskenAdi1, degiskenAdi2, ... , degiskenAdiN;
Tanımlanan bu değişkenlere ilk değerleri de atanabilir.
var degiskenAdi1 = ilkDeger1, degiskenAdi2 = ilkDeger2, degiskenAdi3 =

ilkDeger3, degiskenAdi4 = ilkDeger4;
7
JavaScript ortamında; aynı satırda veya farklı satırda değişken tanımlaması yapılabilir. Bu aşağı
yukarı bütün programlama dillerinde vardır. Değişken tanımlarken genellikle tek satırda tek
değişken tercih edilir. Bunun sebebi daha estetik ve temiz bir kod yazmaktır.
Değişken tiplerine aşağıdaki gibi örnekleyebiliriz.
var a = 5
let b = "ismail"
var g = 'i'
let c = new Date()
var d = true
var e = [1,2,3]
var f = 3.14
// JSON
var person = {
name: 'ismail',
age:38,
tel: 12345678,
ogrencileri: [
{
name:'ahmet'
},
{
name: 'mehmet'
}
]
}
var k = function topla() {}
OPERATÖRLER
Eşittir Operatör
Atama operatörüdür, = (eşittir) işareti ile kullanılır. Bir değişkene bir değer atama için kullanılır.
Örnek;
var deger = 15;
8
Aritmetik Operatörler
Aritmetik işlemler için kullanılan operatörlerdir.
+ Toplama operatörü (Aynı zamanda metin birleştirme - Concatenation)

- Çıkarma Operatörü
* Çarpma Operatörü
/ Bölme Operatörü
% Mod Operatörü
var sayi1 = 42;

var sayi2 = 6;
sonuc1 = sayi1 + sayi2; // Toplama
sonuc2 = sayi1 - sayi2; // Çıkartma
sonuc3 = sayi1 * sayi2; // Çarpma
sonuc4 = sayi1 / sayi2; // Bölme
sonuc5 = sayi1 % sayi2; // Mod
Unary Operatörler
+ Pozitif Sayı Operatörü

- Negatif Sayı Operatörü
++ 1 Arttırma Operatörü
– 1 Azaltma Operatörü
! Mantıksal Tümleyen Operatörü. Aynı zamanda boolean ifadelerin tersini alma işlemini
gerçekleştitirir.
Bu operatörlere örnek verecek olursak;
// Bir değişken oluşturalım. Bu değişkene ilk değer olarak 1 ataması

yapalım.
var degisken = 1;
// Pozitif sayı operatörü ile bu değişkene aşağıdaki gibi sayı eklemesi

yapabiliriz.
// Eşitliğin sağında kalan sayı soldaki sayıya eklenir.
degisken +=2
// degisken'in değer 3 olacaktır.
9
// Negatif sayı operatörü ile bu değişkene aşağıdaki gibi sayı çıkarması
yapabiliriz.
// Eşitliğin sağında kalan sayı soldaki sayıdan çıkarılır.
degisken -=1
// degisken'in son değeri 3 olduğu için, değişkenden 1 çıkarınca son değeri
2 olur.
a++
// üstteki operatör kullanımında a sayısının değeri 1 artar.
a-
// üstteki operatör kullanımında a sayısının değeri 1 azalır.
degisken = true
var degisken2 = !degisken
// degiskenin true iken ! operatörü ile degisken2'ye değer atadığımızda
degisken2'nin değeri
// false olur.
Eşitlik ve İlişkisel Operatörler
=== Denktir
== Eşittir
!= Eşit değildir
> Büyüktür
>= Büyük eşittir
< Küçüktür
<= Küçük eşittir
Diğer programlama dillerinden farklı olarak Javascript’te denklik operatörü vardır.
Bu operatörlere örnek verecek olursak.
var a = "Kapadokya"
var b = "Kapadokya"
var c = 123
10
var d = "123"
var e = 5
var f = 7
a === b
// bu ifade true sonucunu verir. a değişkeni b değişkenine denktir.
c == d
// bu ifade true sonucunu verir. c değişkeni d değişkenine eşittir. ( d
değeri string c değeri number // olmasına rağmen
e > f
// bu ifade false değerini verir
e < f
// bu ifade true değerini verir.
Koşulsal Operatörler
Koşul operatörleri mantıksal kontrol yaparlar.
&& AND (VE)

|| OR (VEYA)
?: ( Soru işareti : operatörü if else yapısının kısa kullanımıdır)
Örnek verecek olursak;
var a = 5
var b = 4
a>b && b>a

// ifadesi false sonucunu verecektir. && operatörünün true sonucu vermesi
// için 2 taraftaki
// koşulunda true sonucunu vermesi gerekir.
a>b || b>a
// ifadesi true sonucunu verecektir. || operatörü false sonucunu vermesi
// için 2 taraftaki koşulunda // false sonucunu vermesi gerekir.
11
12

ReactJs Ders Notları

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ReactJs Ders Notları

Uploaded by

Copyright:

Available Formats

JAVASCRİPT

Yıllar içerisinde JavaScript olgunlaştıkça, kütüphaneler ve programlama uygulamaları çoğaldıkça

<h2>Javascript ile ampul yak</h2>

<img id="ampul" src="pic_bulboff.gif" style="width: 100px" />

<input type = "button" value = "4" onclick = "form1.answer.value += '4'

<input type = "button" value = "7" onclick = "form1.answer.value += '7'

<input type = "button" value = "/" onclick = "form1.answer.value += '/'

- var 1995 ve 2015 arasında ki bütün JavaScript kodlarında kullanılır.

Bir değişkene örnek verecek olursak;

Javascript değişken tanımlarken belirli kurallar vardır. Bu kurallar;

JavaScript Case Sensitive (Büyük/Küçük harfe duyarlı) özelliğindedir. O yüzden tanımlanan

Değişken tanımlaması aşağıdaki gibi gerçekleştirilir.

Değişken tanımlamasından sonra bu değişkene ilk değer ataması yapılabilir.

var degiskenAdi = ilkDeger;

Aynı satırsa birden fazla değişken tanımlaması da yapılabilir.

var degiskenAdi1, degiskenAdi2, ... , degiskenAdiN;

Tanımlanan bu değişkenlere ilk değerleri de atanabilir.

var degiskenAdi1 = ilkDeger1, degiskenAdi2 = ilkDeger2, degiskenAdi3 =

Değişken tiplerine aşağıdaki gibi örnekleyebiliriz.

var k = function topla() {}

var deger = 15;

Aritmetik işlemler için kullanılan operatörlerdir.

+ Toplama operatörü (Aynı zamanda metin birleştirme - Concatenation)

var sayi1 = 42;

+ Pozitif Sayı Operatörü

Bu operatörlere örnek verecek olursak;

// Bir değişken oluşturalım. Bu değişkene ilk değer olarak 1 ataması

// Pozitif sayı operatörü ile bu değişkene aşağıdaki gibi sayı eklemesi

Eşitlik ve İlişkisel Operatörler

Diğer programlama dillerinden farklı olarak Javascript’te denklik operatörü vardır.

Bu operatörlere örnek verecek olursak.

Koşul operatörleri mantıksal kontrol yaparlar.

&& AND (VE)

Örnek verecek olursak;

a>b && b>a

You might also like