27 Şubat 2017 Pazartesi

Numerik Değerler Kullanımı

<!DOCTYPE html>
<html>
<body>

<p>Integers are considered accurate up to 15 digits.</p>

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

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

<script>
function myFunction() {
    var x = 999999999999999;
    var y = 9999999999999999;
    document.getElementById("demo").innerHTML = x + "<br>" + y;
}
</script>

</body>
</html>


Numerik Değerler Kullanımı Küçük Hatalar


<!DOCTYPE html>
<html>
<body>

<p>Floating point arithmetic is not always 100% accurate.</p>

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

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

<script>
function myFunction() {
    var x = 0.2 + 0.1;
    document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Floating point arithmetic is not always 100% accurate.</p>
<p>But it helps to multiply and divide.</p>

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

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

<script>
function myFunction() {
    var x = (0.2*10 + 0.1*10) / 10;
    document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Numeric constants, preceded by 0x, are interpreted as hexadecimal.</p>

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

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

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "0xFF = " + 0xFF;
}
</script>

</body>
</html>

Numerik Değerler Kullanımı Hex Sayılar

<!DOCTYPE html>
<html>
<body>

<p>Numeric constants, preceded by 0x, are interpreted as hexadecimal.</p>

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

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

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "0xFF = " + 0xFF;
}
</script>

</body>
</html>

Numerik Değerler Kullanımı-Sınırları Zorlama


<!DOCTYPE html>
<html>
<body>

<p>Infinity is returned if you calculate a number outside the largest possible number.</p>

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

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

<script>
function myFunction() {
    var myNumber = 2;
    var txt = "";
    while (myNumber != Infinity) {
        myNumber = myNumber * myNumber;
        txt = txt + myNumber + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Sonsuzluk


<!DOCTYPE html>
<html>
<body>

<p>Division by zero also generates Infinity.</p>

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

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

<script>
function myFunction() {
    var x = 2/0;
    var y = -2/0;
    document.getElementById("demo").innerHTML = x + "<br>" + y;
}
</script>

</body>
</html>

Tip Dönüşümü

<!DOCTYPE html>
<html>
<body>

<p>Infinity is a Number.</p>

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

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

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = typeof Infinity;
}
</script>

</body>
</html>


Veri Bozulması

<!DOCTYPE html>
<html>
<body>
<p>A number divided by a non-numeric string becomes NaN (Not a Number):</p>

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

<script>
document.getElementById("demo").innerHTML = 100 / "Apple";
</script>

</body>
</html>

Numerik Kullanım

<!DOCTYPE html>
<html>
<body>
<p>A number divided by a numeric string becomes a number:</p>

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

<script>
document.getElementById("demo").innerHTML = 100 / "10";
</script>

</body>
</html>

Numerik Değerler

<!DOCTYPE html>
<html>
<body>

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

<script>
var x = 100 / "Apple";
document.getElementById("demo").innerHTML = isNaN(x);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>
<p>If you use NaN in a mathematical operation, the result will also be NaN:</p>

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

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

</body>
</html>


Veri Dönüşümü


<!DOCTYPE html>
<html>
<body>

<p>The typeof NaN is:</p>

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

<script>
document.getElementById("demo").innerHTML = typeof NaN;
</script>

</body>
</html>


Numerik Değerler ve Obje

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

<script>
var x = 123;
var y = new Number(123);

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

</body>
</html>


Doğru Değer Karşılaştırma


<!DOCTYPE html>
<html>
<body>

<p>Never create numbers as objects.</p>
<p>Numbers and objects cannot be safely compared.</p>

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

<script>
var x = 500;              // x is a number
var y = new Number(500);  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>


Obje ve Numerik Değer Karşılaştırma

<!DOCTYPE html>
<html>
<body>

<p>Never create numbers as objects.</p>
<p>JavaScript objects cannot be compared.</p>

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

<script>
var x = new Number(500);  // x is an object
var y = new Number(500);  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

Max Value

<!DOCTYPE html>
<html>
<body>

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

<script>
document.getElementById("demo").innerHTML = Number.MAX_VALUE;
</script>

</body>
</html>


Js ToString


<!DOCTYPE html>
<html>
<body>

<p>The toString() method converts a number to a string.</p>

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

<script>
var x = 123;
document.getElementById("demo").innerHTML =
    x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

</body>
</html>

Js to Exponential


<!DOCTYPE html>
<html>
<body>

<p>The toExponential() method returns a string, with the number rounded and written using exponential notation.</p>

<p>An optional parameter defines the number of digits behind the decimal point.</p>

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

<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
    x.toExponential() + "<br>" +
    x.toExponential(2) + "<br>" +
    x.toExponential(4) + "<br>" +
    x.toExponential(6);
</script>

</body>
</html>

Js ToFixed

<!DOCTYPE html>
<html>
<body>

<p>The toFixed() method rounds a number to a given number of digits.</p>
<p>For working with money, toFixed(2) is perfect.</p>

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

<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
    x.toFixed(0) + "<br>" +
    x.toFixed(2) + "<br>" +
    x.toFixed(4) + "<br>" +
    x.toFixed(6);
</script>

</body>
</html>


Js Precision

<!DOCTYPE html>
<html>
<body>

<p>The toPrecision() method returns a string, with a number written with a specified length:</p>

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

<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
    x.toPrecision() + "<br>" +
    x.toPrecision(2) + "<br>" +
    x.toPrecision(4) + "<br>" +
    x.toPrecision(6);   
</script>

</body>
</html>

Js Number

<!DOCTYPE html>
<html>
<body>

<p>The global JavaScript function Number() converts variables to numbers:</p>

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

<script>
document.getElementById("demo").innerHTML =
    Number(true) + "<br>" +
    Number(false) + "<br>" +
    Number("  10") + "<br>" +
    Number("10  ") + "<br>" +
    Number("10 6");   
</script>

</body>
</html>

Js ParseInt


<!DOCTYPE html>
<html>
<body>

<p>The global JavaScript function parseInt() converts strings to numbers:</p>

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

<script>
document.getElementById("demo").innerHTML =
    parseInt("10") + "<br>" +
    parseInt("10.33") + "<br>" +
    parseInt("10 6") + "<br>" +   
    parseInt("10 years") + "<br>" +   
    parseInt("years 10");   
</script>

</body>
</html>

Js ParseFloat

<!DOCTYPE html>
<html>
<body>

<p>The global JavaScript function parseFloat() converts strings to numbers:</p>

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

<script>
document.getElementById("demo").innerHTML =
    parseFloat("10") + "<br>" +
    parseFloat("10.33") + "<br>" +
    parseFloat("10 6") + "<br>" +   
    parseFloat("10 years") + "<br>" +
    parseFloat("years 10");       
</script>

</body>
</html>

Js ValueOf

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

<script>
var x = 123;

document.getElementById("demo").innerHTML =
    x.valueOf() + "<br>" +
    (123).valueOf() + "<br>" +
    (100 + 23).valueOf();
</script>

</body>
</html>


Js Math Kütüphanesi Random


<!DOCTYPE html>
<html>
<body>

<p>Math.random() returns a random number betwween 0 and 1.</p>

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

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

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
</script>

</body>
</html>


Js Min / Max Kullanımı


<!DOCTYPE html>
<html>
<body>

<p>Math.min() returns the lowest value.</p>

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

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

<script>
function myFunction() {
    document.getElementById("demo").innerHTML =
    Math.min(0, 150, 30, 20, -8);
}
</script>

</body>
</html>


Js Random Fonksiyon ile Kullanımı



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

<!DOCTYPE html>
<html>
<body>

<p>Math.round() rounds a number to its nearest integer.</p>

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

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

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = Math.round(5.7);
}
</script>

</body>
</html>


Js Ceil

<!DOCTYPE html>
<html>
<body>

<p>Math.ceil() rounds a number <strong>up</strong> to its nearest integer.</p>

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

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

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = Math.ceil(4.4);
}
</script>

</body>
</html>

Js Floor

<!DOCTYPE html>
<html>
<body>

<p>Math.floor() rounds a number <strong>down</strong> to its nearest integer.</p>

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

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

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = Math.floor(4.7);
}
</script>

</body>
</html>


Js Random & Ceil Birlikte Kullanım

<!DOCTYPE html>
<html>
<body>
<p>Math.floor() combined with Math.random() can return random integers.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML =
    Math.floor(Math.random() * 11);
}
</script>
</body>
</html>

Js ve Hazır Math

<!DOCTYPE html>
<html>
<body>

<p>Math constants are E, PI, SQR2, SQR1_2, LN2, LN10, LOG2E, LOG10E</p>

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

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

<script>
function myFunction() {
    document.getElementById("demo").innerHTML =
    Math.E + "<br>" +
    Math.PI + "<br>" +
    Math.SQRT2 + "<br>" +
    Math.SQRT1_2 + "<br>" +
    Math.LN2 + "<br>" +
    Math.LN10 + "<br>" +
    Math.LOG2E + "<br>" +
    Math.LOG10E + "<br>";
}
</script>

</body>
</html>

Js Hazır Methodlar
 





<!DOCTYPE html>
<html lang="tr">
<head>
    <title>Java Script Fonksiyon ve Sınıf Oluşturma</title>
    <meta charset ="utf-8">
</head>
<body>
    <script>
    function Diktorgen()
    {
        this.g="";
        this.y="";
        this.alan=function() { return this.g * this.y; }
        this.cevre=function() { return 2*(this.g + this.y);}
    }
    var dik = new Diktorgen();
    dik.g =Number(prompt("Genişlik:"));
    dik.y =Number(prompt("Yukseklik:"));
    alert("Alan="+ dik.alan()+"Cevre="+ dik.cevre());
    </script>
</body>
</html>



<!DOCTYPE html>
<html lang="tr">
<head>
    <title>Java Script </title>
    <meta charset ="utf-8">
</head>
<body>
    <script>
    var i=0;
    function pencere()
    {
        open("http://www.cbu.edu.tr","_blank","height=300",width="200");
    }
    function say()
    {
        document.getElementById("kutu").innerHTML = i;
        i++;
    }
    setTimeout("pencere()",1000);
    setInterval("pencere()",1000);
    </script>
    <input type="button" value="Pencere" onclick="pencere()">
    <div id="kutu"></div>
</body>
</html>


<html lang="tr">
<head>
    <title>Başlık Yazısı</title>
    <meta charset ="utf-8">
</head>
<body>
<form name="kayit" enctype="text/plain" action=get>
<table>
    <tr>
    <td> Ad Soyad:</td>
    <td>:<input type="text" name="ad" required="required" autofocus="autofocus"></td>
    </tr>
    <tr>
    <td>E Mail</td>
    <td>:<input type="email" name="posta" required="required"></td>
    </tr>
    <tr>
    <td>Adres</td>
    <td>:<textarea name="adres" rows="4" cols="50" required="required"></textarea></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="checkbox" name="secenek-1" value="deger-1">Değer-1
            <input type="checkbox" name="secenek-2" value="deger-2">Değer-2
            <input type="checkbox" name="secenek-3" value="deger-3">Değer-3
            <input type="checkbox" name="secenek-4" value="deger-4">Değer-4
        </td>
    </tr>
    <tr>
    <td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="radio" name="secenek-1" value="deger-1" checked="checked">Değer-1
            <input type="radio" name="secenek-2" value="deger-2">Değer-2
            <input type="radio" name="secenek-3" value="deger-3">Değer-3
            <input type="radio" name="secenek-4" value="deger-4">Değer-4
        </td>


    </tr>
    <tr>
    <td>
    </tr>
    <tr>
    <td>Yaşanan İl</td>
    <td>
<select name="iller" size="1">
    <optgroup label="Marmara">
        <option>İstanbul</option>
        <option>Bursa</option>
        <option>Edirne</option>
        <option>Kırklareli</option>
        <option>Tekirdağ</option>
    </optgroup>
    <optgroup label="Ege">
        <option>İzmir</option>
        <option>Manisa</option>
        <option>Aydın</option>
        <option>Muğla</option>
        <option>Denizli</option>
    </optgroup>
    </td>
    </tr>
    <tr>
    <td></td>
    <td>
        <input type="submit" value="gonder">
        <input type="reset" value="iptal">
        <input type="image" src="./buttonresim.jpg">
    </td>
    </tr>
</table>
</form>
</body>
</html>



Dışarıdan Js


<!DOCTYPE html>
<html>
<body>

<h1>External JavaScript</h1>

<p id="demo">A Paragraph.</p>

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

<p><strong>Note:</strong> myFunction is stored in an external file called "myScript.js".</p>

<script src="myScript.js"></script>

</body>
</html>

myScript.js

function myFunction()
 {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Picture gif



<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
</script>
</body>
</html>


Ek Örnekler


<html>
<head>
<meta http-equiv="content-type"content="text/html;
charset=windows-1254">
<title>javascrip'te döngü</title>
<script language="JavaScript1.2">
<!--javascrript kodunu eski sürüm browser'lardan saklayalim
//santigrat-fahrenayt tablosu
document.writeln("<Table Border=\"1\">")
document.writeln("<TR><TD>Santigrad</TD><TD>Fahrenayt</TD></TR>")
for(santigrad=0;santigrad<=100;++santigrad)
   {
     fahrenhayt=santigrad*9/5+32
     document.writeln("<TR><TD>"+santigrad+"</TD><TD>"+fahrenhayt+
     "</TD></TR>")
     }
     document.writeln("</TABLE>")
   //-->
</script></head>
<body>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script>
<!—
function fullwin(targeturl){
window.open(targeturl,"","fullscreen,scrollbars")
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="fullwin('http://www.cbu.edu.tr')" value="Open window">
</form>
</body>
</html>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function toBin(form) {
base = parseInt(form.base.value);
num = parseInt(form.num.value);
form.amount.value = num.toString(base);
}
//  End -->
</script>
</HEAD>

<BODY>

<form name=numform>
<center>
<input type=text name=num size=8> to base
<input type=text name=base size=8 value=2 onBlur="if ((this.value<1)||(this.value>36)){alert('The base must be between 2 and 36.');this.select();this.focus();}">
<input type=button value=" = " onclick="toBin(this.form)">
<input type=text name=amount size=15>
</center>
</form>

Js Debugging

Js Debugging
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>
Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>


Js Hazır Debugging Araçları

Major Browsers' Debugging Tools
Normally, you activate debugging in your browser with F12, and select "Console" in the debugger menu.
Otherwise follow these steps:
Chrome
Open the browser.
From the menu, select tools.
From tools, choose developer tools.
Finally, select Console.
Firefox Firebug
Open the browser.
Go to the web page: http://www.getfirebug.com.
F12->Breaks->F5->f8
Internet Explorer
Open the browser.
From the menu, select tools.
From tools, choose developer tools.
Finally, select Console.






Js Methodlar & Döngüler,TryCatch,Karar Yapıları

Js Tarih Methodları



Js Tarih Örnek
<!DOCTYPE html>
<html>
<body>

<p>The internal clock in JavaScript starts at midnight January 1, 1970.</p>
<p>The getTime() function returns the number of milliseconds since then:</p>

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

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>the join() method joins array elements into a string.</p>

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

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>

Diğerlerinide deneyin

fruits.toString();
fruits.pop();
fruits.push("Kiwi");
fruits.shift();          
fruits.unshift("Lemon");
fruits[0] = "Kiwi";
fruits[fruits.length] = "Kiwi";
fruits.splice(2, 0, "Lemon", "Kiwi");
fruits.sort();   
var citrus = fruits.slice(1, 3);

Js Booleans

<!DOCTYPE html>
<html>
<body>

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

<script>
var b1 = Boolean(100);
var b2 = Boolean(3.14);
var b3 = Boolean(-15);
var b4 = Boolean("Hello");
var b5 = Boolean('false');
var b6 = Boolean(1 + 7 + 3.14);

document.getElementById("demo").innerHTML =
"100 is " + b1 + "<br>" +
"3.14 is " + b2 + "<br>" +
"-15 is " + b3 + "<br>" +
"Any (not empty) string is " + b4 + "<br>" +
"Even the string 'false' is " + b5 + "<br>" +
"Any expression (except zero) is " + b6;

</script>

</body>
</html>

Js Karşılaştırma


<!DOCTYPE html>
<html>
<body>

<p>Input your age and click the button:</p>

<input id="age" value="18" />

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

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

<script>
function myFunction() {
    var age, voteable;
    age = document.getElementById("age").value;
    voteable = (age < 18) ? "Too young":"Old enough";
    document.getElementById("demo").innerHTML = voteable + " to vote.";
}
</script>

</body>
</html>

JS If kullanımı

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>

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

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

<script>
function myFunction() {
    var greeting;
    var time = new Date().getHours();
    if (time < 10) {
        greeting = "Good morning";
    } else if (time < 20) {
        greeting = "Good day";
    } else {
        greeting = "Good evening";
    }
document.getElementById("demo").innerHTML = greeting;
}
</script>

</body>
</html>


Js Swicth



<!DOCTYPE html>
<html>
<body>

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

<script>
var day;
switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case  6:
        day = "Saturday";
        break;
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>


Js For Kullanımı


<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
for (i = 0, l = cars.length, text = ""; i < l; i++) {
    text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>


Js While

<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop through a block of code as long as i is less than 10.</p>

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

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

<script>
function myFunction() {
    var text = "";
    var i = 0;
    while (i < 10) {
        text += "<br>The number is " + i;
        i++;
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>


Js Do While


<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop through a block of code as long as i is less than 10.</p>

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

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

<script>
function myFunction() {
    var text = ""
    var i = 0;
    do {
        text += "<br>The number is " + i;
        i++;
    }
    while (i < 10) 
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>


Js Breaks ve Continue


<!DOCTYPE html>
<html>
<body>

<p>Click the button to do a loop with a break.</p>

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

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

<script>
function myFunction() {
    var text = "";
    var i;
    for (i = 0; i < 10; i++) {
        if (i === 3) {continue;}    // break yazıp çalıştır.
        text += "The number is " + i + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>


Js Replace




<!DOCTYPE html>
<html>
<body>

<p>Replace "microsoft" with "W3Schools" 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/i,"W3Schools");
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>


Try Catch


<!DOCTYPE html>
<html>
<body>

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

<script>
try {
    adddlert("Welcome guest!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

</body>
</html>


Try Catch Finally

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>

<p id="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try {
        x = Number(x);
        if(x == "")  throw "is empty";
        if(isNaN(x)) throw "is not a number";
        if(x > 10)   throw "is too high";
        if(x < 5)    throw "is too low";
    }
    catch(err) {
        message.innerHTML = "Input " + err;
    }
    finally {
        document.getElementById("demo").value = "";
    }
}
</script>

</body>
</html>

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