<HTML>
<SCRIPT>
...
JavaScript kodu
....
</SCRIPT>
</HTML>
Js Giriş Örnekler
<HTML>
<SCRIPT>
document.write ("Merhaba");
</SCRIPT>
</HTML>
Html belgesi içinde Javascrıpt yazmak
Bir Web sayfası organizasyonunda JavaScript'leri Web sayfasına eklemek için değişik yollar vardır:
HEAD bölümünde
BODY bölümünde
BODY içinde URL olarak.
<HEAD> İçinde:
Bir HTML belgesinde HEAD bölümü içinde <SCRIPT> etiketi kullanarak istediğiniz JavaScript kodunu HTML belgesine ekleyebilirsiniz. Bu kodlar HTML sayfasının BODY kısmı yüklendikten sonra kullanıma hazır hale gelir.
<BODY> İçinde
HTML belgesinin BODY kısmında JavaScript kullanmak için iki yol vardır:
Doğrudan çalışacak kodlar ve kullanıcı tarafından çalışacak kodlar:
Doğrudan çalışacak JavaScript kodları <SCRIPT> etiketi kullanılarak HTML belgesinin istenilen yerine yazılır. Bu cümleler tarayıcı tarafından okunduğu anda yerine getirilir:
<!DOCTYPE html>
<html>
body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Son okunma tarihi" + document.lastModified)
//-->
</SCRIPT>
Örnek-On Click
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">
Click Me!</button>
</body>
</html>
Örnek Font Değiştir
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
Örnek Formdan Değer Alma
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Validate Input</h1>
<p>Please input a number between 1 and 10:</p>
<input id="numb" type="number">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Form İçerisinde Js Kullanmak
Daha çok kullanılan diğer bir yöntem ise kullanıcı tarafından bir olayın başlatılmasıyla bir JavaScript kodunun çalıştırılmasıdır. Örneğin bir düğmeye tıklamak gibi:
Örnek Form Değişiklik Bilgisi
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>JavaScript in Head</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Js Dil Özellikleri
İşletme Sırası: HTML belgesinde JavaScript eklendiğinde, kodun işletimi sırasıyla yapılır. Ancak fonksiyon ve belli bir olaya (ONCLICK gibi ) bağlı olan JavaScript kodlarının işletimi o anda yapılır.
Değişkenler: Bir değeri içeren bellek adlarını ifade ederler.
İşleçler (Operators ): Değerler ya da değişkenler arasında toplama, çıkarma gibi işlemlerin yapılmasını sağlarlar. İşleçler +, *, /, - gibi işaretlerle kullanılır.
İfadeler (Expression ): Değişkenlerin, işleçleri ve deyimlerin bir araya gelerek oluşturdukları yapılara ifade edilir.
Örneğin: "Ucret = Gün * Yevmiye" formülü bir ifadedir.
Deyimler (Statements ): Deyimler belli bir komut ya da söz dizimi bileşenlerinin grubuna verilen addır. Örneğin bir komut ya da bir IF yapısı deyimi oluşturur.
Nesneler (Objects ): Kendi değerleri, özellikleri ve işlemleri olan bileşenlere nesne (object ) denir. JavaScript dilinde çok sayıda yerleşik nesne vardır.
Fonksiyonlar (Functions ): Bir JavaScript fonksiyonu diğer dillerdeki bir fonksiyon yordam ya da bir alt yordam anlamına gelir. Bir fonksiyon bir dizi işlemi yerine getirir ve bir sonuç döndürür. Ayrıca fonksiyonlar, parametre olarak kabul edilen birçok değer kabul ederler.
Case Sensitivity: JavaScript case sensitive (büyük küçük harf duyarlı ) bir dildir. Değişkenler ve diğer öğeler küçük ya da büyük yazılabilirler. Ancak A değişkeni ile a değişkeni birbirinden farklıdır.
Js ile ilgili Açıklamalar
Bütün programlama dillerinde olduğu gibi, kod yazarken açıklama yazmak için kullanabileceğimiz bir karakter vardır. JavaScriptte bu <!- ve //–>. işaretlerinin arasıdır.
Java Script Temelleri :
Window : Tarayıcı Ekranı.
Frame : Frame Ve Framedeki Nesnelerin Tümü.
Document : Tarayıcı ekranında Görüntülenen Sayfa Alanı.
Location : Tarayıcı Ekranında O anki Sayfanın URL Adresi.
History : Tarayıcının Ziyaret Ettiği Sayfaların Bellekteki Yeri.
Karşılaştırmalar && Mantıksal
== İşlenen değerler eşitse True döndürür.
!= İşlenen değerler eşit değilse True döndürür.
> Soldaki değer sağdakinden büyükse True döndürür.
>= Soldaki değer büyük ya da eşitse True döndürür.
< Soldaki değer sağdaki değerden büyükse True döndürür.
<= Soldaki değer sağdaki değerden küçük ya da eşitse True döndürür.
&& "And" İki ifade de doğruysa True döndürür.
|| "Or" İfadelerden birisi doğruysa True döndürür.
! "Not" Negatifleştirme işlemi doğruysa True döndürür.
Atamalar
Örnek
toplam=100;
Örnek
toplam=(ucret+vergi+ekkazanc)
+=
Gözden Geçirme Soruları
1. JavaScript ne amaçla kullanılır?
2. Değişik JavaScript versiyonları vardır. Bunlar bir SCRIPT etiketi içinde kullanılabilir mi?
3. ONCLIK() ile onclik() olayının belirtiminde büyük/küçük harf durumu ne olur?
İlk Örnekler
Örnek 1 : web sayfasına mesaj yazma
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Örnek 2 : fonksiyon çağırma
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Örnek-3 Buton üzerinden Sayı hesaplatma
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
Örnek-4 Buton üzerinden Sayı hesaplatma
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Çalıştırabilecek misin?
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<p>
Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.
</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Örnek-5 : kullanılan browser cozunurlugunu bulma
<body>
<script language="JavaScript">
g=window.screen.width;
y=window.screen.height;
cozunurluk=g+"X"+y;
alert(cozunurluk);
</script>
</body>
Örnek-6 Body içerisinde Script
<body onLoad="ad()"> <script language="JavaScript"> function ad(){ v=window.prompt("Adinizi yazin:","") } </script>
Paragraf Oluşturma
<html>
<body>
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
</body>
</html>
Not Gizleme
<html>
<body>
<script type="text/javascript">
document.write("Hello"); // Write "Hello"
document.write(“!"); // Write “!"
</script>
</body>
</html>
Değişken Atama
var x=5; var carname="Volvo";
Değer atama
y=x-5; z=y+5;
Değişkene Değer Atama
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Statements</h1>
<p>Statements are separated by semicolons.</p>
<p>The variables x, y, and z are assigned the values 5, 6, and 11:</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Değer Atama Örneği
<html>
<body>
<script type="text/javascript">
var x;
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>
</body>
</html>
Decimal Değerlerin Ekrana Yazılması
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<p>Number can be written with or without decimals.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 10.50;
</script>
</body>
</html>
String Değerlerin Ekrana Yazılması
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>Strings can be written with double or single quotes.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
</body>
</html>
Değişkene Değer Atama
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Statements</h1>
<p>Statements are separated by semicolons.</p>
<p>The variables x, y, and z are assigned the values 5, 6, and 11:</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var x;
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>
</body>
</html>
Decimal Değerlerin Ekrana Yazılması
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<p>Number can be written with or without decimals.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 10.50;
</script>
</body>
</html>
String Değerlerin Ekrana Yazılması
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>Strings can be written with double or single quotes.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
</body>
</html>
Değer Hesaplama
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Expressions</h1>
<p>Expressions compute to values.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>
</body>
</html>
Değişken değeri ekrana yazdırma
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>
<p id="demo"></p>
<script>
var x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
İşlem Değerini Ekrana Yazdırma
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>
</body>
</html>
Yorum Satırı Kullanma
<!DOCTYPE html>
<html>
<body>
<h1>Comments are NOT Executed</h1>
<p id="demo"></p>
<script>
var x = 5;
// var x = 6; I will not be executed
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
String değişken değeri ekrana yazdırma
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript is Case Sensitive</h1>
<p>Try change lastName to lastname.</p>
<p id="demo"></p>
<script>
var lastName = "Doe";
var lastname = "Peterson";
document.getElementById("demo").innerHTML = lastName;
</script>
</body>
</html>
Direk String değer yazma
<!DOCTYPE html>
<html>
<body>
<p>In HTML, JavaScript statements are "commands" to the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
İşlem Sonucu Ekrana Yazdırma
<!DOCTYPE html>
<html>
<body>
<p>JavaScript code (or just JavaScript) is a list of JavaScript statements.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Aynı Satırda İşlem
<!DOCTYPE html>
<html>
<body>
<p>Multiple statements on one line is allowed.</p>
<p id="demo1"></p>
<script>
a = 1; b = 2; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
Alt Satırda Değer Atama
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p>
The best place to break a code line is after an operator or a comma.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly.";
</script>
</body>
</html>
Fonksiyon İçinden Değer Atama
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="myPar">I am a paragraph.</p>
<div id="myDiv">I am a div.</div>
<p>
<button type="button" onclick="myFunction()">Try it</button>
</p>
<script>
function myFunction() {
document.getElementById("myPar").innerHTML = "Hello Dolly.";
document.getElementById("myDiv").innerHTML = "How are you?";
}
</script>
<p>When you click on "Try it", the two elements will change.</p>
</body>
</html>
Java Scriptte Kullanılan Anahtar Kelimeler
Yorum Satırı
<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
<p><strong>Note:</strong> The comments are not executed.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5; // Declare x, give it the value of 5
var y = x + 2; // Declare y, give it the value of x + 2
document.getElementById("demo").innerHTML = y; // Write y to demo
</script>
<p><strong>Note:</strong> The comments are not executed.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
//document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
<p><strong>Note:</strong> The comment is not executed.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
/*
document.getElementById("myH").innerHTML = "Welcome to my Homepage";
document.getElementById("myP").innerHTML = "This is my first paragraph.";
*/
</script>
<p><strong>Note:</strong> The comment-block is not executed.</p>
</body>
</html>
Çoklu Yorum Satırı
<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myp"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
<p><strong>Note:</strong> The comment block is not executed.</p>
</body>
</html>
Değişken Değer Atama
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p id="demo"></p>
<script>
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p>Try to experiment with the // comments.</p>
<p id="demo"></p>
<script>
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
//document.getElementById("demo").innerHTML = pi;
document.getElementById("demo").innerHTML = person;
//document.getElementById("demo").innerHTML = answer;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Aynı Satırda Değer Atama
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
var person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Farklı Satırda Değer Atama
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
var person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable declared without a value will have the value undefined.</p>
<p id="demo"></p>
<script>
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Değişken Değer Koruma
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Çoklu İşlem Değer Atama
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Add 5 + 2 + 3, and display the result:</p>
<p id="demo"></p>
<script>
var x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Farklı Şekilde Değer Atama
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Add "John" + " " + "Doe":</p>
<p id="demo"></p>
<script>
var x = "John" + " " + "Doe" ;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
String Int değer farkı
DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Add "5" + 2 + 3. and display the result:</p>
<p id="demo"></p>
<script>
var x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
