Çözüldü HTML sayfasına JS nasıl dahil edilir?

264523 · 11 Aralık 2022

HTML sayfasına nasıl JS dahil edilir?

kaan.w · 11 Aralık 2022

264523 dedi:

hiç bir şekilde javascript çalışmıyor.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="activate.jpg" type="image/x-icon" />
    <title>Loading...</title>
            <style>
                body {
                background-image: url("680342.jpg");
                background: #111;
                color: #411;
                font-family: Consolas, Courier, monospace;
                font-size: 60px;
                text-shadow: 0 0 15px #411;
                height: 100%;
                }

                div {
                padding:100px;
                position: relative;
                top: 50%;
                margin: -30px auto;
                text-align: center;
                }

                .glow {
                color: #f00;
                text-shadow: 0px 0px 10px #f00;
                }

                span {
                display: inline-block;
                padding: 0 10px;
                }
            </style>
  
  
</head>
<body>
  
    <div id="loading"> LOADING...</div>
    <script>
        alphabet = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0");
letter_count = 0;
el = $("#loading");
word = el.html().trim();
finished = false;

el.html("");
for (var i = 0; i < word.length; i++) {
  el.append("<span>"+word.charAt(i)+"</span>");
}

setTimeout(write, 75);
incrementer = setTimeout(inc, 1000);

function write() {
  for (var i = letter_count; i < word.length; i++) {
    var c = Math.floor(Math.random() * 36);
    $("span")[i].innerHTML = alphabet[c];
  }
  if (!finished) {
    setTimeout(write, 75);
  }
}

function inc() {
  $("span")[letter_count].innerHTML = word[letter_count];
  $("span:eq("+letter_count+")").addClass("glow");
  letter_count++;
  if (letter_count >= word.length) {
    finished = true;
    setTimeout(reset, 1500);
  } else {
    setTimeout(inc, 1000);
  }
}

function reset() {
  letter_count = 0;
  finished = false;
  setTimeout(inc, 1000);
  setTimeout(write, 75);
  $("span").removeClass("glow");
}
    </script>
  
</body>
</html>

JavaScript:

$()

Bu fonksiyonu kullanmışsınız ama jQuery kurulu değil.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Bu tagi head bölümüne yazarak jQuery'yi eklerseniz sorun çözülür.

Fatalis · 11 Aralık 2022

Head etiketleri altına <script type="text/javascript" src="./scripts/app.js"></script> kodu eklenerek sayfaya JS dahil edilebilir.

artik 72 yasindayim · 11 Aralık 2022

Body etiketlerinin içine yazarak harici dosya çağırırsın: <script src="dosya.js"></script>

Dosya çağırmak yerine html içinde yazmak istersen head etiketi altına <script> JS Kod Bloğu </script>

kaan.w · 11 Aralık 2022

Head bölümüne yazabilirsiniz.

HTML:

<script src="app.js" defer></script>

00PARZIVAL00 · 11 Aralık 2022

264523 dedi:
HTML sayfasına nasıl JS dahil edilir?

İsterseniz sayfanızın head veya body kısımlarına ve sonuna

JavaScript:

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

Koyarak işlemlerinizi yapabilirsiniz.
Benzer bir şekilde hiçbir dosya yolu göstermeden de .html dosyasınızda JS kullanabilirsiniz.

<script>
var a = 1;
</script>

Şeklinde.

kaan.w dedi:
Head bölümüne yazabilirsiniz.

HTML:

<script src="app.js" defer></script>

Burada kullanmış olduğunuz defer'in işlevi nedir acaba?

kaan.w · 11 Aralık 2022

00PARZIVAL00 dedi:
Burada kullanmış olduğunuz defer'in işlevi nedir acaba?

defer kullanmaz iseniz scripti head bölümüne yazdığınızda sorun çıkarır. Daha sayfa içeriği yüklenmeden script çalıştırıldığı için. Bu yüzden hep body'nin en sonuna yazılması önerilir.

defer kullanıldığında script ile sayfa paralel yüklenir ve sayfa yüklendiğinde script çalışır. Bu sayede head bölümüne yazıp okunulabilirliği arttırabilirz. İstediğiniz yere yazamassınız.

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

HTML:

<script src="app.js" defer></script>

264523 · 11 Aralık 2022

hiç bir şekilde javascript çalışmıyor.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="activate.jpg" type="image/x-icon" />
    <title>Loading...</title>
            <style>
                body {
                background-image: url("680342.jpg");
                background: #111;
                color: #411;
                font-family: Consolas, Courier, monospace;
                font-size: 60px;
                text-shadow: 0 0 15px #411;
                height: 100%;
                }

                div {
                padding:100px;
                position: relative;
                top: 50%;
                margin: -30px auto;
                text-align: center;
                }

                .glow {
                color: #f00;
                text-shadow: 0px 0px 10px #f00;
                }

                span {
                display: inline-block;
                padding: 0 10px;
                }
            </style>
    
    
</head>
<body>
    
    <div id="loading"> LOADING...</div>
    <script>
        alphabet = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0");
letter_count = 0;
el = $("#loading");
word = el.html().trim();
finished = false;

el.html("");
for (var i = 0; i < word.length; i++) {
  el.append("<span>"+word.charAt(i)+"</span>");
}

setTimeout(write, 75);
incrementer = setTimeout(inc, 1000);

function write() {
  for (var i = letter_count; i < word.length; i++) {
    var c = Math.floor(Math.random() * 36);
    $("span")[i].innerHTML = alphabet[c];
  }
  if (!finished) {
    setTimeout(write, 75);
  }
}

function inc() {
  $("span")[letter_count].innerHTML = word[letter_count];
  $("span:eq("+letter_count+")").addClass("glow");
  letter_count++;
  if (letter_count >= word.length) {
    finished = true;
    setTimeout(reset, 1500);
  } else {
    setTimeout(inc, 1000);
  }
}

function reset() {
  letter_count = 0;
  finished = false;
  setTimeout(inc, 1000);
  setTimeout(write, 75);
  $("span").removeClass("glow");
}
    </script>
    
</body>
</html>

kaan.w · 11 Aralık 2022

264523 dedi:

hiç bir şekilde javascript çalışmıyor.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="activate.jpg" type="image/x-icon" />
    <title>Loading...</title>
            <style>
                body {
                background-image: url("680342.jpg");
                background: #111;
                color: #411;
                font-family: Consolas, Courier, monospace;
                font-size: 60px;
                text-shadow: 0 0 15px #411;
                height: 100%;
                }

                div {
                padding:100px;
                position: relative;
                top: 50%;
                margin: -30px auto;
                text-align: center;
                }

                .glow {
                color: #f00;
                text-shadow: 0px 0px 10px #f00;
                }

                span {
                display: inline-block;
                padding: 0 10px;
                }
            </style>
  
  
</head>
<body>
  
    <div id="loading"> LOADING...</div>
    <script>
        alphabet = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0");
letter_count = 0;
el = $("#loading");
word = el.html().trim();
finished = false;

el.html("");
for (var i = 0; i < word.length; i++) {
  el.append("<span>"+word.charAt(i)+"</span>");
}

setTimeout(write, 75);
incrementer = setTimeout(inc, 1000);

function write() {
  for (var i = letter_count; i < word.length; i++) {
    var c = Math.floor(Math.random() * 36);
    $("span")[i].innerHTML = alphabet[c];
  }
  if (!finished) {
    setTimeout(write, 75);
  }
}

function inc() {
  $("span")[letter_count].innerHTML = word[letter_count];
  $("span:eq("+letter_count+")").addClass("glow");
  letter_count++;
  if (letter_count >= word.length) {
    finished = true;
    setTimeout(reset, 1500);
  } else {
    setTimeout(inc, 1000);
  }
}

function reset() {
  letter_count = 0;
  finished = false;
  setTimeout(inc, 1000);
  setTimeout(write, 75);
  $("span").removeClass("glow");
}
    </script>
  
</body>
</html>

JavaScript:

$()

Bu fonksiyonu kullanmışsınız ama jQuery kurulu değil.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Bu tagi head bölümüne yazarak jQuery'yi eklerseniz sorun çözülür.

264523 · 11 Aralık 2022

kaan.w dedi:
JavaScript:

$()

Bu fonksiyonu kullanmışsınız ama jQuery kurulu değil.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Bu tagi head bölümüne yazarak JQuery'yi eklerseniz sorun çözülür.

Çok teşekkür ederim. Sabahtan beri araştırıyorum bir hata da yok ama çalıştıramadım. Sayende çalışıyor.

Çözüldü HTML sayfasına JS nasıl dahil edilir?

Ayrıntılı düzenleme

264523

Gigapat

kaan.w

Fatalis

Terapat

artik 72 yasindayim

Hectopat

kaan.w

Megapat

00PARZIVAL00

Picopat

kaan.w

Megapat

W3Schools.com

264523

Gigapat

kaan.w

Megapat

264523

Gigapat

Benzer konular