Java ve JavaScript ile bir web sitesi nasıl tasarlanır
JavaScript ile web sitesi tasarımı
Başlangıçta isimle ilgili kafa karışıklığını giderelim: JavaScript’in Java ile hiçbir ilgisi yoktur. Artık JavaScript’in ne olduğunu bildiğimize göre JavaScript’ten bahsedebiliriz. Web sitenizde yapmak istediğiniz tek şey temel metin ve görselleri görüntülemekse, HTML ve CSS bu işi bitirmek için fazlasıyla yeterlidir. Java ile web sitesi tasarımı hakkındaki makalemizde bizimle kalın .
Ancak stilleri dinamik olarak değiştirmek, menüleri değiştirmek veya işlevsel düğmeler oluşturmak, girilen verileri bir forma dönüştürmek vb. gibi başka şeyler yapmak istiyorsanız başka bir araca ihtiyacınız vardır.
JavaScript çoğunlukla ortak görevleri ve web sitesi davranışını gerçekleştirmek için kullanılan bir araçtır. Başlangıç olarak, kısaca JavaScript (JS), bir web sitesine etkileşim ve denge katabilen tam teşekküllü bir programlama dilidir. Bu buluş Mozilla Projesi, Mozilla Vakfı ve Mozilla Corporation’ın kurucusu Brendan Eich tarafından yaratıldı.
JavaScript nedir?
JavaScript çok yönlü ve başlangıç seviyesinde bir programlama dilidir. Bu dil hakkında daha fazlasını öğrendikçe, 2D ve 3D animasyonlu grafiklere sahip çeşitli oyunların, veritabanınıza dayalı kapsamlı programların ve daha fazlasının keyfini çıkarabileceksiniz.
JavaScript’in kendisi nispeten kompakt ve bir o kadar da esnektir. JavaScript, web sitesi içeriğini değiştirmek ve kullanıcı eylemlerine yanıt olarak farklı davranışlar oluşturmak için kullanılabilen, mantık tabanlı bir programlama dilidir.
JavaScript’in yaygın kullanım alanları arasında onay kutuları, harekete geçirici mesajlar ve bir web sitesindeki bilgilere yeni kimlikler eklenmesi yer alır.
Kısaca JavaScript, web geliştiricilerinin etkileşimli siteler tasarlamasına olanak sağlayan bir programlama dilidir. Bir web sayfasında gördüğünüz dinamik davranışların çoğu, tarayıcının varsayılan kontrollerini ve davranışlarını artıran JavaScript sayesindedir.
Java programlama dilini öğrenmenin avantajları
Nesne Yönelimi:
Java programlama dilinde her şey bir Nesnedir. Bu model Object modeli temel alınarak tasarlanıp geliştirildiğinden Java kolayca genişletilebilir.
Platform bağımsız
C ve C++ da dahil olmak üzere diğer birçok programlama dilinden farklı olarak Java’yı hazırlarken artık bu programlama diline girebilmek için özel cihazlara ihtiyacınız yok, ancak Java’nın kendine özel ve bağımsız bir kodu var. Bu kod web sitesinde dağıtılır ve hangi platformda çalışırsa çalışsın sanal makine (JVM) tarafından yorumlanır.
Basit
Java öğrenilmesi kolay olacak şekilde tasarlanmıştır. Java OOP’un temel konseptini anlarsanız, ustalaşması kolay olacaktır.
Güvenli
Java’nın güvenli özelliği sayesinde virüssüz sistemler oluşturulabilir. Kimlik doğrulama teknikleri bu programlama dilinin ortak anahtar şifrelemesine dayanmaktadır.
Web sitesi tasarımında JavaScript uygulamaları ve kullanımları
Aşağıda, JavaScript programlama dilini kullanan tasarım uygulamalarının bazı örnekleri verilmiştir:
Onay Kutuları Oluşturma
JavaScript’in uygulamalı bir örneği, bilgisayarınızın monitör ekranında görünen kutulardır. Bilgilerinizi çevrimiçi bir forma en son girdiğiniz zamanı ve Tamam veya İptal tuşuna basmanızı isteyen bir onay kutusunun açıldığını düşünün. Bunun nedeni, sitenizde veya sisteminizde JavaScript bulunması ve monitör ekranınızda görünen kodun şöyle olmasıdır (if… else…) ve kullanıcı (OK) tuşuna bastığında bilgisayara bir şey yapmasını söyler. kullanıcı iptal’i tıklar.
Yeni bilgileri kaydet
JavaScript, kullanıcının bir sayfayı ziyaret ederken verdiği kararlara dayalı olarak web sitesi öğeleri için yeni kimliklerin tanımlanmasında çok etkili ve kullanışlıdır. Örneğin: Diyelim ki web sitesi ziyaretçisi hakkında token oluşturulmasına yol açan bilgileri alarak istediğiniz formda bir sayfa oluşturuyorsunuz. JavaScript’te kullanıcının adını dikkate alan bir alan atayabilirsiniz.
JavaScript dünyadaki en popüler programlama dillerinden biridir. HTML ve CSS ile birlikte JavaScript, neredeyse tüm web sitelerinin güvendiği üç temel teknolojiden biridir.
HTML, web sitesi içeriğinin her bir parçasına anlam atamak için kullanılan dildir ve CSS, HTML öğelerini biçimlendirmek ve düzenlemek için kullanılan dildir; JavaScript ise bir web sayfasına davranış ekler.
JavaScript’i yalnızca görüntüleme özelliğinin değerini değiştirmek için ara sıra kullanırız, ancak bu hemen hemen tüm CSS özelliklerine uygulanabilir. Görselleri, arka plan rengini veya kullanıcının o bölümün daha fazlasını görmek istediği ve istediği şeyi değiştirmek için JavaScript’i kullanabiliriz.
Kulağa ilginç gelse de, JavaScript’in yapabileceği tek şey CSS’yi değiştirmek değildir. Bu bölüme geri sayım da ekleyebiliriz, böylece kullanıcı geri sayım butonuna her bastığında istediği tarih yaklaşır. Koda başvurularak ID countDownButton ve countclown ve onclick içeren bir buton eklenecektir.
Java ile bir web sitesi nasıl tasarlanır
Java, ilk olarak Sun Microsystems tarafından geliştirilen ve 1995 yılında piyasaya sürülen üst düzey bir programlama dilidir. Java, Windows, Mac, IOS ve UNIX’in çeşitli sürümleri gibi çeşitli işletim sistemlerinde çalışır. Bu eğitim size Java’yı tam olarak anlamanızı sağlayacaktır.
Bu referans, Java programlama dilini öğrenirken size basit ve pratik yaklaşımları tanıtır.
Aklınıza gelebilecek ilk soru neden Java programlama dilini öğrenmemiz gerektiğidir? Java, öğrenciler ve yazılım mühendisi olarak çalışan profesyoneller için mükemmeldir; özellikle yazılım geliştirme alanında çalıştığınızda Java en iyi ortağınız olur.
JavaScript ile web sitesi tasarımının en iyi örnekleri
JavaScript, kullanıcının ilgisini çekebilecek ve sitenizi hatırlayıp tekrar ziyaret etmesini sağlayacak platformlar oluşturur. JavaScript oyunlar, API’ler, gezinme ve daha fazlasını oluşturmak için kullanılabilir.
İnternet, web siteleri oluşturmak ve harika kullanıcı deneyimleri sağlamak için kullanılan harika JavaScript örnekleri de dahil olmak üzere, web sitesi tasarımı ilhamlarıyla doludur. Burada ilham almak için bazı farklı JavaScript örnekleri seçiyoruz.
JavaScript ile web sitesi tasarımı eğitiminin bu en iyi örnekleri şunlardır:
- Tarih yazımı
- Filippo Bello
- St. Louis Browns
- Bacak Çalışma Stüdyosu
- IBM Tasarımı
Java ile web sitesi tasarımı eğitimi
Java (Java) ile web tasarımı, (Xhtml, CSS, Java Script, JQuery, Adobe Photoshop CS6, Bootstrap, Dreamweaver), farklı düzen ve proje türleri gibi tüm önemli ve çok ihtiyaç duyulan teknolojileri içerir. Enstitümüzde (ev okulu) size web sitelerinin (statik ve dinamik) geliştirilmesini öğretiyoruz. Sunucu tarafı web sitesi geliştirme ve tasarımı için PHP, Java veya Net öğrenebilirsiniz. JavaScript eğitimleri bölümünü ziyaret ederek muhteşem kurslarımızdan kolaylıkla yararlanabilirsiniz .
Java ile web sitesi tasarımı, herhangi bir web sitesi türünü tasarlamadan önce bilmeniz gereken birkaç mevcut teknolojiden oluşur; bunlar aşağıdaki gibidir:
- HTML: Web sayfalarını biçimlendirmek için farklı etiketler yardımıyla belgelerin yapısını tanımlamak için de kullanılır.
- CSS: Web sayfalarının oluşturulması sürecini kolaylaştıran bir tasarım dilidir.
- JavaScript: Dinamik bir bilgisayar programlama dilidir. Web sitesi, kullanıcıyla etkileşimde bulunmak ve dinamik sayfalar oluşturmak için JavaScript’i uygular.
(CSS ve JavaScript) ile web sitesi tasarımı hakkında adım adım eğitim
Bu bölümde size adım adım web sitenizi (CSS ve JavaScript) kullanarak nasıl tasarlayacağınızı öğretmeye çalışacağız.
Bu eğitimde bir web sayfasına CSS ve JavaScript dosyaları eklemek için gösterilen yöntemlerin GitHub sayfalarına özel olmadığını unutmayın. Bu yöntemler herhangi bir web sitesi ve herhangi bir barındırma web sitesi (GitHub, GitLab, BitBucket vb.) için işe yarayacaktır.
Daha fazla uzatmadan başlayalım!
- Öncelikle index.html’ye aşağıdaki kodu ekleyin:
<!DOCTYPEhtml> <html> <kafa> <title>Web sayfam!</title> </head> <gövde> <h1>Merhaba Dünya!</h1> <h4 id='date'></h4> </body> </html>
Bir web sitesi sayfasına JavaScript ekleme
Bir sonraki adımda, JavaScript’i ayrı bir index.html dosyasına nasıl ekleyeceğimizi öğreneceğiz. Javascript adında bir klasör oluşturun. Bu klasörün içinde index.js adında bir dosya oluşturun. Bu JavaScript dosyasının içine aşağıdaki satırı ekleyin:
document.getElementById('date').innerHTML = new Date().toDateString();
- Daha sonra index.html’deki etikete (head) aşağıdaki kodu ekleyin:
<script async src="./javascript/index.js"></script>
Daha sonra web sayfasına JavaScript kodunu yüklemek için index.html sayfasına bir komut dosyası etiketi ekleyin. (Script) etiketinin src özelliğini (javascript/index.js) olarak ayarladık. Bu, tarayıcıya (javascript) klasöründe bulunan dosyayı (index.js) yüklemesini söyler. Bu, eşzamansız olarak gerçekleşir ve ardından JavaScript kodu yürütülür ve web sayfasını neredeyse anında yeniler. Artık web sitesine JavaScript eklediğimize göre, biraz CSS ekleyelim.
Bir web sayfasına CSS ekleme
İlk önce (style) adında bir klasör oluşturun. Bu klasörün içinde (styles.css) adında bir dosya oluşturun. Aşağıdaki kodu (style.css) içine yazın veya yapıştırın:
vücut {
metin hizalama: ortala;
arka plan rengi: #f0e8c5;
}
Şimdi dosyaya (index.html) geri dönün ve aşağıdaki bağlantı etiketini, sonunda eklediğimiz script etiketinin hemen üstündeki head etiketinin altına ekleyin:
<link rel = "stylesheet" href = "styles/styles.css" />
Şimdi tarayıcınızdaki ‘index.html’ sayfasını yenileyin. Stilleri web sayfasına başarıyla ekledik! ‘style.css’ dosyasına eklediğimiz koda baktığınızda metni ortaladığımızı ve web sayfasının gövdesine parlak bir arka plan rengi eklediğimizi görebilirsiniz. Daha sonra “index.html” dosyasına rel = “stylesheet” niteliğini taşıyan bir <link> etiketi ekledik. Bu, tarayıcıya CSS stillerini ayrı bir dosyadan yüklediğimizi bildirir.
Ayrıca href = “styles/styles.css” özelliğini de ekledik. Bu, tarayıcıya eklemek istediğimiz stillerin “styles” klasöründe bulunan “styles.css” dosyasında olduğunu bildirir.
Web sitesine bazı CSS stilleri ekleyin
‘index.html’ sayfanızın içeriğini aşağıdaki kodla değiştirin:
<!DOCTYPEhtml>
<html>
<kafa>
<title>Web sayfam!</title>
<link rel = "stylesheet" href = "styles/styles.css" />
<script async src="./javascript/index.js"></script>
</head>
<gövde>
<h1>Merhaba Dünya!</h1>
<h4 id='date'></h4>
<div class="resim-bölümü">
<div class = "bölüm stili">
<img src = "https://source.unsplash.com/random/400x200" alt = "" />
<p>unsplash.com'un izniyle rastgele bir resim.</p>
</div>
<div class = "bölüm stili">
<img src = "https://source.unsplash.com/random/400x200" alt = "" />
<p>unsplash.com'un izniyle rastgele bir resim.</p>
</div>
</div>
<div class="resim-bölümü">
<div class = "bölüm stili">
<img src = "https://source.unsplash.com/random/400x200" alt = "" />
<p>unsplash.com'un izniyle rastgele bir resim.</p>
</div>
<div class = "bölüm stili">
<img src = "https://source.unsplash.com/random/400x200" alt = "" />
<p>unsplash.com'un izniyle rastgele bir resim.</p>
</div>
</div>
</body>
</html>
Ayrıca "styles.css" içeriğini aşağıdaki kodla değiştirin:
vücut {
metin hizalama: ortala;
arka plan rengi: #f0e8c5;
}
div {
üst kenar boşluğu: 15 piksel;
}
.image-bölümü {
ekran: esnek;
yasla-içerik: merkez;
}
.bölüm stili {
sağ kenar boşluğu: 25 piksel;
sol kenar boşluğu: 25 piksel;
arka plan rengi: beyaz;
}
İşte bu bölümde işimiz bitti ve artık kendinize bir web sitesi tasarlayıp, web sitesi tasarımı işine girişebilirsiniz.
