Yazılımcılar Dünyası

27 Şubat 2017 Pazartesi

Js Kullanımı

Operatör Kullanımı

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>

<p>x = 5, y = 2, calculate z = x + y, and display z:</p>

<p id="demo"></p>

<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Değişkenlerinin (+,*,/,-) ile Kullanımı</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>

<!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>

Atama Operatör Kullanımı

<!DOCTYPE html>
<html>
<body>

<h1>The -= Operator</h1>

<p id="demo"></p>

<script>
var x = 10;
x -= 5;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Mod Alma

<!DOCTYPE html>
<html>
<body>

<h1>The %= Operator</h1>

<p id="demo"></p>

<script>
var x = 10;
x %= 5;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

String Birleştirme

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>

<p>The + operator concatenates (adds) strings.</p>

<p id="demo"></p>

<script>
var txt1 = "What a very ";
var txt2 = "nice day";
document.getElementById("demo").innerHTML = txt1 + txt2;
</script>

</body>
</html>

Farklı Şekilde Boşluk Değeri ile String Birleştirme

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>

<p>The + operator concatenates (adds) strings.</p>

<p id="demo"></p>

<script>
var txt1 = "What a very";
var txt2 = "nice day";
document.getElementById("demo").innerHTML = txt1 + " " + txt2;
</script>

</body>
</html>

String ve Int Bir Arada Kullanımı

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>

<p>Adding a number and a string, returns a string.</p>

<p id="demo"></p>

<script>
var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>

</body>
</html>

Veri Tipleri

var length = 16;                               // Number var lastName = "Johnson";                      // String var cars = ["Saab", "Volvo", "BMW"];           // Array var x = {firstName:"John", lastName:"Doe"};    // Object

Veri Tipi Dönüşümü

var x;               // Now x is undefined var x = 5;           // Now x is a Number var x = "John";      // Now x is a String

Tırnak Karakteri Kullanımı

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML =
carName1 + "<br>" +
carName2 + "<br>" +
answer1 + "<br>" +
answer2 + "<br>" +
answer3;
</script>

</body>
</html>

Matematiksel Yazım

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x1 = 34.00;
var x2 = 34;
var y = 123e5;
var z = 123e-5;

document.getElementById("demo").innerHTML = x1 + "<br>" + x2 + "<br>" + y + "<br>" + z
</script>

</body>
</html>

Dizi Kullanımı

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var cars = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Obje Kullanımı

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
var person = {
    firstName : "John",
    lastName : "Doe",
    age       : 50,
    eyeColor : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Java’da Değişken Tipi
<!DOCTYPE html>
<html>
<body>

<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof false + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'john', age:34};
</script>

</body>
</html>

Java’da Tip Öğrenme devam

<!DOCTYPE html>
<html>
<body>

<p>Both the value, and the data type, of a variable with no value is <b>undefined</b>.</p>

<p id="demo"></p>

<script>
var person;
document.getElementById("demo").innerHTML =
person + "<br>" + typeof person;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is:" + typeof car;
</script>

</body>
</html>

Js Fonksiyonlar

<!DOCTYPE html>
<html>
<body>

<p>This example calls a function which performs a calculation, and returns the result:</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
    return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>This example calls a function which performs a calculation, and returns the result:</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
    return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

Js Fonksiyonlar(Sıcaklık Dönüşümü)

<!DOCTYPE html>
<html>
<body>

<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
    return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(32);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The temperature is " + toCelsius(32) + " Centigrade";

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
</script>

</body>
</html>

Js Obje Kullanımı

Obje Tekli Kullanım

<!DOCTYPE html>
<html>
<body>

<p>Creating a JavaScript Variable.</p>

<p id="demo"></p>

<script>
var car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>

</body>
</html>

Obje Özelliklerini Belirleme

<!DOCTYPE html>
<html>
<body>

<p>Creating a JavaScript Object.</p>

<p id="demo"></p>

<script>
var car = {type:"Fiat", model:500, color:"white"};
document.getElementById("demo").innerHTML = car.type;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>
There are two different ways to access an object property:
</p>
<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>

Obje ve Fonksiyon Bir Arada

<!DOCTYPE html>
<html>
<body>

<p>Creating and using an object method.</p>

<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function(c) {
       return this.firstName + " " + this.lastName;
    }
};

document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>

Değişkenler ve Etki Alanları

<!DOCTYPE html>
<html>
<body>

<p>A local variable can only be accessed from within the function where it was declared.</p>

<p id="demo"></p>

<script>
myFunction();
document.getElementById("demo").innerHTML =
"I can display " + typeof carName;

function myFunction() {
    var carName = "Volvo";
}
</script>

</body>
</html>

Global Değişken

<!DOCTYPE html>
<html>
<body>

<p>A GLOBAL variable can be accessed from any script or function.</p>

<p id="demo"></p>

<script>
var carName = "Volvo";
myFunction();

function myFunction() {
    document.getElementById("demo").innerHTML =
    "I can display " + carName;
}
</script>

</body>
</html>

Tanımsızsa Global Değişken

<!DOCTYPE html>
<html>
<body>

<p>
If you assign a value to a variable that has not been declared,
it will automatically become a GLOBAL variable:
</p>

<p id="demo"></p>

<script>
myFunction();
document.getElementById("demo").innerHTML =
"I can display " + carName;

function myFunction() {
    carName = "Volvo";
}
</script>

</body>
</html>

Global ve Window

<!DOCTYPE html>
<html>
<body>

<p>
In HTML, all global variables will become a window variables.
</p>

<p id="demo"></p>

<script>
myFunction();
document.getElementById("demo").innerHTML =
"I can display " + window.carName;

function myFunction() {
    carName = "Volvo";
}
</script>

</body>
</html>

Js ve Event Kullanımı

<!DOCTYPE html>
<html>
<body>

<button onclick="getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

Js ve Event Kullanımı

<!DOCTYPE html>
<html>
<body>

<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

Js En Sık Kullanılan Eventler (Olaylar)

Js ve Stringler

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>

var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';

document.getElementById("demo").innerHTML =
carName1 + "<br>" + carName2;

</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>

var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3;

</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>

</body>
</html>

Js (\=) Boşkul karakteri

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>

var x = 'It\'s alright';
var y = "We are the so-called \"Vikings\" from the north.";

document.getElementById("demo").innerHTML = x + "<br>" + y;

</script>

</body>
</html>

Js kodlarına \ ile Başlama

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">You cannot break a code line with a \ backslash.</p>

<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>

</body>
</html>

Object ve String Oluşumu

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
var x = "John"; // x is a string
var y = new String("John"); // y is an object

document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>

</body>
</html>

Js Kullanılan String Methodları

String Methods

<!DOCTYPE html>
<html>
<body>

<p id="p1">Please locate where 'locate' occurs!.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var str = document.getElementById("p1").innerHTML;
    var pos = str.indexOf("locate");
    document.getElementById("demo").innerHTML = pos;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p id="p1">Please locate where 'locate' occurs!.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var str = document.getElementById("p1").innerHTML;
    var pos = str.lastIndexOf("locate");
    document.getElementById("demo").innerHTML = pos;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p id="p1">Please locate where 'locate' occurs!.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var str = document.getElementById("p1").innerHTML;
    var pos = str.search("locate");
    document.getElementById("demo").innerHTML = pos;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(7,13);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(7);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(-12);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substring(7,13);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7,6);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Replace "Microsoft" with "Oracle" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML;
    var txt = str.replace("Microsoft","Oracle");
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Convert string to upper case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
    var text = document.getElementById("demo").innerHTML;
    document.getElementById("demo").innerHTML = text.toUpperCase();
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Convert string to lower case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
    var text = document.getElementById("demo").innerHTML;
    document.getElementById("demo").innerHTML = text.toLowerCase();
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>The concat() method joins two or more strings:</p>

<p id="demo"></p>

<script>
var text1 = "Hello";
var text2 = "World!"
document.getElementById("demo").innerHTML = text1.concat(" ",text2);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>The charAt() method returns the character at a given position in a string:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to display the first array element, after a string split.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var str = "a,b,c,d,e,f";
    var arr = str.split(",");
    document.getElementById("demo").innerHTML = arr[0];
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = "Hello";
var arr = str.split("");
var text = "";
var i;
for (i = 0; i < arr.length; i++) {
    text += arr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Js Örnekler

Sunucu taraflı JavaScript (SSJS) ise temel JavaScript'e ek olarak nesneler ve işlevler katılarak veritabanlarına erişim, e-mail gönderme ve diğer işlemlerin yapılması sağlanır. SSJS, veritabanı temelli Web uygulamalarının yaratılmasını sağlar.

<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">

</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>

Java Script Dili

Java Script İçerik

Java Script dilinin temellerini.
Java Script'in Web sayfalarında nerede kullanılacağını
Temel bileşenler hakkında genel bilgiler
Konularından oluşmaktadır.

Js Giriş

Javascript, bir Web scripting dilidir. Crome, Firefox ve IE,vb browserlar tarafından desteklediği client (kullanıcı) taraflı (kullanıcının bilgisayarında işlem gören) bir dildir. Java programa diline benzer bir şekilde oluşturulmuş ve temelinde C ve C++ dilleri yatmaktadır.
İlk başta yalnızca Netscape tarayıcıları için tasarlanan JavaScript, daha sonra diğer tarayıcılar tarafından da desteklenen genel bir scripting dili haline gelmiştir. Şu anda Navigator 4.0 tarafından desteklenen JavaScript farklı versiyonlara sahiptir. Microsoft Internet Explorer 3.0 ile JavaScript 1.0'ı desteklemektedir.
HTML kodları arasına yerleştirilen küçük kodlardır. Tek başına .js uzantılı JavaScript kodları da yazılabilir.

JavaScript, Java dilinin bir Light versiyonu değildir. JavaScript kendi başına bir script dilidir. Genellikle HTML sayfalarında kullanıcı kontrolleri eklemek, formları kontrol etmek, hesaplamalar yapmak gibi işler için kullanılır.

Js Nerelerde kullanılır?

JavaScript kullanımının iki ana alanı vardır: istemci taraflı ve sunucu taraflı script yazmak. Şu anda HTML sayfalara gömülü yazılan scriptlerin çoğu JavaScript kullanılarak yazılmaktadır. Bunlar da genellikle kullanıcı bilgilerinin doğru girilip girilmediği ya da kullanıcıya veri girişinde ya da menü kullanımında seçenekler sağlamaktır.

CSS Nedir?

CSS kullanım şekilleri

Style komutlarını üç yerde tutabiliriz:
Ayrı bir metin dosyası olarak: Bu durumda head bölümüne CSS dosyasına bağlantı kurulur. (<link type="text/css" rel="stylesheet" href="style_dosyasi.css"> gibi)
CSS kodlarını doğrudan head bölümüne yerleştirebiliriz. Örnek:<html><head><style>P {font-family:arial; font-size:12px;}</style></head>....
CSS kodlarını HTML etiketlerinin içine yerleştirebiliriz. Örnek:<p style="font-family:arial; font-size:12px;font-color:black;">...</p>

Style komutları sadece bir yerde kullanılacaksa doğrudan etiket içinde kullanılması uygun olur. Ancak pek çok yerde aynı style özellikleri kullanılacaksa, tekrardan kaçınmak için şu metodlar kullanılabilir.
Sınıf (class) tanımlanabilir: Style dosyasında etiket isminden ve . dan sonra sınıf adı yazılır ve {} işaretleri arasına style komutları yazılır. span.vurgulu {color:red; background-color:yellow;}Sayfa içinde kullanımı da aşağıdaki gibi olur:<p>Cümlede <span class="vurgulu">burası</span> çok önemli.</p>Görünüm aşağıdaki gibi olur.

id tanımlanabilir: Yukarıdaki gibidir. Ancak . yerine # kullanılır ve bir etiket ile ilişkilendirilmesi gerekmez.#vurgulu {color:red; background-color:yellow;}<p>Cümlede <span id="vurgulu">burası</span> çok önemli.</p>
Bir etikettin tümü aynı özelliklere sahip olsun istiyorsak id ve class kullanmadan doğrudan etiketi yazabiliriz.b {font-family: arial; font-size: 9pt; font-weight: bold; color: blue;} Bu durumda bütün <b></b> etiketi içerisindeki metinlerin yazıtipi mavi, boyutu 9 punto, kalın ve rengi mavi olacaktır.

AÇIKLAMA:
Burada:
Position: Katmanın yerinin neye göre belirleneceğini (absolute, pencere esas alınarak belirlensin),
Top: Pencereye göre kaç piksel aşağıda olacağını,
Left: Pencereye göre kaç piksel solda olacağını,
Width: Katmanın genişliğini,
Height: Katmanın yüksekliğini,
Background-color: Arkaplan rengini,
Overflow: Taşan metnin durumunun ne olacağını (hidden, gizli kalsın, gösterilmesin),
Z-index: Üstüste geldiğinde hangi sıra ile yerleştirileceğini (1. katmana 1 değeri verilmiştir, dolayısıyla en altta o gösterilecektir),
Padding: Katmanın kenar çizgileri ile içindeki nesneler arasında bırakılacak boşluğu,
Border: Kenar çizgilerinin kalınlık, kenarlık türü ve rengini belirtmektedir.

<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h1>CSS example!</h1>
<p>This is a paragraph.</p>

<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
/*This is another comment*/
}
</style>
</head>

<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
h3{color:red;text-align:left;font-size:8pt;}

<html>
<head>
<style type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has it's own background color.</p>
We are still in the div element.
</div>

</body>
</html>

<html>
<head>
<style type="text/css">
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>Background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>

<html>
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

<html>
<head>
<style type="text/css">
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>

<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>

<html>
<head>
<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>Example of unordered lists:</p>

<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<html>
<head>
<style type="text/css">
table,th,td
{
border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>

<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>

<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>

</html>

<html>
<head>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* For IE8 and earlier */}

<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">

</form>
</body>
</html>

GÖRSEL:
WYSIWYG (What you see is what you get / Ne görürseniz onu alırsınız) olarak nitelendirilen bu tür programlarda kullanıcı kendisi HTML kodu yazmaz, sayfa web browser’daki gibi görüntülenir
Kullanıcılar Word’de yazı yazar gibi sayfayı oluştururlar, HTML kodları program tarafından oluşturulur. Bu tür programlara Microsoft Frontpage, Macromedia Dreamweaver vs. örnek verilebilir. (Bu programlar çoğu zaman kod tabanlı programların yeteneklerine de sahip olabilir.)

13 Şubat 2017 Pazartesi

HTML-5 Örnekler

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">



<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header, nav, section, article, footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>

<body>

<header>
<h1>HTML5 Skeleton</h1>
</header>
<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>

<section>

<h2>Famous Cities</h2>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>

</section>

<footer>
<p>© 2014 W3Schools. All rights reserved.</p>
</footer>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>

<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
div#header,div#footer,div#content,div#post {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
</style>
</head>
<body>

<div id="header">
<h1>Monday Times</h1>
</div>
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>

<div id="content">
<h2>News Section</h2>

<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>

<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>

</div>

<div id="footer">
<p>© 2014 Monday Times. All rights reserved.</p>
</div>

</body>
</html>

HTML Canvas

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

</body>
</html>

HTML5 SVG

SVG açılımı Ölçeklenebilir Vektör Grafikleri
SVG Web için grafik tanımlamak için kullanılır
SVG W3C tarafından önerilmiştir.

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="50" y="86">GS</text>
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

HTML Video
<!DOCTYPE html>
<html>
<body>

<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br>
<video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
</video>
</div>

<script>
var myVideo = document.getElementById("video1");

function playPause() {
    if (myVideo.paused)
        myVideo.play();
    else
        myVideo.pause();
}

function makeBig() {
    myVideo.width = 560;
}

function makeSmall() {
    myVideo.width = 320;
}

function makeNormal() {
    myVideo.width = 420;
}
</script>

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>

HTML Audio

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

HTML Flash

<!DOCTYPE html>
<html>
<body>

<object width="400" height="50" data="bookmark.swf"></object>

</body>
</html>

HTML içinde HTML

<!DOCTYPE html>
<html>
<body>

<object width="100%" height="500px" data="snippet.html"></object>

</body>
</html>

HTML Youtube

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<object width="420" height="315"
data="http://www.youtube.com/v/XGSy3_Czz8k">
</object>

</body>
</html>

HTML5 Konum Bilgisi

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

</body>
</html>

Google Maps HTML5

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

</body>
</html>

HTML Drag Drop

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

HTML JS

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
    }
}

function stopWorker() {
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

Html Server

<!DOCTYPE html>
<html>
<body>

<h1>Getting server updates</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("demo_sse.php");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML += event.data + "<br>";
    };
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

</body>
</html>

Html Temel Örnekler

İlk Kodlar…

Etiket, HTML dosyasında kullanılan komutlara verilen addır. HTML içinde kullanılan tüm etiketler “<” işareti ile başlar ve “>”ile biter. Ayrıca etiketin yorum aralığı da “</etiket ismi>” kalıbı ile bitirilir. Aşağıda etiket kullanımına kısa bir örnek verilmektedir.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>
</body>
</html>

Link Verme. Sayfa-1

<html>
<body>
<h1>This is my Main Page</h1>
<p>This is some text.</p>
<p><a href="page1.htm">This is a link to Page 1</a> </p>
<p><a href="page2.htm">This is a link to Page 2</a> </p>
</body>
</html>

Paragraf Oluşturma

<p>This is a paragraph.</p><p>This is another paragraph.</p>
Başka bir sayfaya link verme
<html>
<body>
<a href=http://www.maltepe.edu.tr> This is a link</a>
</body>
</html>

Sayfa İçerisine Resim Ekleme

<img src=“deneme.jpg" width="104" height="142" />

Yeni satır oluşturma

<br>

<p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>

<html>
<body>

<p>This is a regular paragraph</p>
</body>
</html>

<p>This is<br />a para<br />graph with line breaks</p>

<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>

<html>
<body>

<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>

<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>

<p>The font element is deprecated in HTML 4. Use CSS instead!</p>

</body>
</html>

<html>
<body style="background-color:PowderBlue;">

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red;">
This text is in Verdana and red</p>

<p style="font-family:times;color:green;">
This text is in Times and green</p>

<p style="font-size:30px;">This text is 30 pixels high</p>

</body>
</html>

<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">
A paragraph.</p>
</body>
</html>

<html>
<body>

<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<html>
<body>
<a href="http://www.maltepe.edu.tr" target="_blank">Visit Maltepe University!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body>
</html>

<html>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
</body>
</html>

<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

<table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

<form>First name: <input type="text" name="firstname" />
<br />Last name: <input type="text" name="lastname" /></form>

<form>Password: <input type="password" name="pwd" /></form>

<form><input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /><input type="checkbox" name="vehicle" value="Car" /> I have a car </form>

<form name="input" action="html_form_action.asp" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>

<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>

<html>
<body>
<iframe src="demo_iframe.htm"
width="200" height="200"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>

<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright Maltepe Üni ?</td>
</tr>
</table>

</body>
</html>