5.1 belge.getElementById()
Bildiğiniz gibi JavaScript, HTML sayfalarına bazı animasyonlar eklemek için oluşturuldu. Şimdiye kadar, bunun hakkında pek bir şey söylemedik. Aynı animasyon nasıl eklenir? Örneğin, bir öğenin rengi nasıl değiştirilir?
Bir elementin rengini değiştirmek için öncelikle bu elementi bulmanız gerekir. Bunu yapmak için bir işlev var document.getElementById();
HTML'nizde id
istediğiniz öğeye yazın ve ardından ona JavaScript'ten erişin. Örnek:
<head>
<script>
function changeImage()
{
var image = document.getElementById("image123");
image.src = "new-image.png";
}
</script>
</head>
<body>
<img id="image123" scr="big-image.png" onclick="changeImage()">
</body>
Kullanıcı resme tıkladıktan sonra fonksiyon çağrılır changeImge()
. İçinde, öğeyi alırız image
ve ID
ardından src özniteliğinin değerini yenisiyle değiştiririz. Bu, öğenin img
yeni bir görüntü yüklemesine neden olur.
5.2 belge.createElement()
Bir öğe almanın yanı sıra, yeni öğeler oluşturabilir ve mevcut olanları silebiliriz.
Öğe oluşturmak çok kolaydır. Bunu yapmak için iki şey yapmanız gerekir: a) bir öğe oluşturun , b) onu belgede doğru yere ekleyin . Genellikle şöyle görünür:
<head>
<script>
window.onload = function () {
var image = document.createElement("IMG");
var image.src = "big-image.png";
document.body.addAfter(image);
}
</script>
</head>
<body>
</body>
5.3 pencere.navigate() yöntemi
Bir diğer çok kullanışlı yöntem ise window.navigate()
. Bununla birlikte, tarayıcıyı mevcut sayfa yerine yeni bir sayfa yüklemeye zorlayabilirsiniz. Sadece bu yönteme iletin URL
ve arayın. Örnek:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>
Yukarıdaki örnekte, kullanıcı görseli tıkladıktan sonra google.com sayfası mevcut sekmeye yüklenecektir.
5.4 Geçerli URL
Ve bir faydalı şey daha. Bazen bir komut dosyasının geçerli sayfa URL'sini bilmesi gerekir. Örneğin aynı script farklı sayfalara eklenebilir. Nasıl yapılır?
Bunun için özel bir özellik var.document.location.href
var currentURL = document.location.href;
GO TO FULL VERSION