Yeni Başlayanlar için Javascript Projeleri ( Javascript Örnekleri)
Giriş
En popüler komut dosyası dillerinden biri olan JavaScript, doğrulama, dinamik içerik oluşturma, etkileşimli grafikler ve haritalar ve çok daha fazlası için tüm web uygulamalarında kullanılır. HTML ve CSS ile birlikte JS, eksiksiz, sağlam web uygulamaları oluşturma gücüne sahiptir. JS sayesinde, kullanıcı bir web sayfasıyla etkileşime girebilir ve sayfadaki tüm ilginç öğeleri görebilir. Projeleri keşfederken, interaktif web sayfaları oluşturmaya yardımcı olan know-how js’ye ulaşacağız. Bundan önce, JS’nin önemli özelliklerini hızlıca gözden geçirelim:
- Etkileşimli web içeriği oluşturmak için hem istemci tarafında hem de sunucu tarafında kullanılır.
- Dinamik işlevsellik sağlayarak kullanıcı deneyimini büyük ölçüde iyileştirir.
- Nesne yönelimli yeteneklere sahip hafif dil.
- Yorumlanmış, açık ve platformlar arası dil.
- Java ve HTML ile sorunsuz entegrasyon.
Neden JavaScript Projeleri?
JS, herhangi bir web uygulamasının kalbidir. İyi bir JavaScript bilgisi size mobil ve masaüstü uygulamaları geliştirmek, sıfırdan dinamik web siteleri oluşturmak, UI / UX tasarımcısı ve hatta tam yığın geliştirici gibi bir dizi zorlu ve ilginç kariyer seçeneği sağlayabilir. JavaScript’in temellerini biliyorsanız, özgeçmişinize yıldız eklemek için bir sonraki adımınız projelerdir. Önceden herhangi bir programlama deneyiminiz yoksa, temel JavaScript kursları alabilir ve ardından bu projelere geri dönebilirsiniz. Biraz HTML ve CSS takip ederseniz, aşağıda bahsedilen projelerin çoğunu anlayacaksınız.
Yeni Başlayanlar İçin En İyi JavaScript Projeleri
JavaScript ile yapabileceğiniz çok şey var, ancak henüz sizi her şeye boğmak istemiyoruz. Özgeçmişinize ve kariyerinize değer katabilecek en iyi JavaScript projelerini listeledik:
- JavaScript Calculator
Basit HTML, CSS kullanacağız ve tüm bileşenlerin temel JavaScript işlevlerini kullanarak çalışmasını sağlayacağız. Düğmeleri ve sayıları görüntülemek için HTML kullanacağız ve CSS kullanarak onlara biraz güzelleştirme ekleyeceğiz. Düğmelerin ilgili işlevleri gerçekleştirmesini sağlamak için JavaScript kullanacağız. Ana işlev, JS kodlarını çözen global bir JS işlevi olan eval() ‘dir. display() işlevi seçilen sayıyı hesap makinesi ekranında görüntüleyecektir. Programın yalnızca fare olayları için çalışacağını unutmayın. İşte tam kod:
<html>
<body>
<div class = title >My Beautiful JS Calculator</div>
<table border="2">
<tr>
<td><input type="button" value="c" onclick="clr()"/> </td>
<td colspan="3"><input type="text" id="textval"/></td>
</tr>
<tr>
<td><input type="button" value="+" onclick="display('+')"/> </td>
<td><input type="button" value="1" onclick="display('1')"/> </td>
<td><input type="button" value="2" onclick="display('2')"/> </td>
<td><input type="button" value="3" onclick="display('3')"/> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="display('-')"/> </td>
<td><input type="button" value="4" onclick="display('4')"/> </td>
<td><input type="button" value="5" onclick="display('5')"/> </td>
<td><input type="button" value="6" onclick="display('6')"/> </td>
</tr>
<tr>
<td><input type="button" value="*" onclick="display('*')"/> </td>
<td><input type="button" value="7" onclick="display('7')"/> </td>
<td><input type="button" value="8" onclick="display('8')"/> </td>
<td><input type="button" value="9" onclick="display('9')"/> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="display('/')"/> </td>
<td><input type="button" value="." onclick="display('.')"/> </td>
<td><input type="button" value="0" onclick="display('0')"/> </td>
<td><input type="button" value="=" onclick="evaluate()"/> </td>
</tr>
</table>
</body>
<script>
function display(val)
{
document.getElementById("textval").value+=val
}
function evaluate()
{
let x = document.getElementById("textval").value
let y = eval(x)
document.getElementById("textval").value = y
}
function clr()
{
document.getElementById("textval").value = ""
}
</script>
<style>
input[type="button"]
{
border-radius: 10px;
background-color:blue;
color: white;
border-color:#black ;
width:100%;
}
input[type="text"]
{
border-radius: 10px;
text-align: right;
background-color:black;
color: white;
border-color: white;
width:100%
}
</style>
</html>2. Adam Asmaca
Adam asmaca, en sevdiğimiz oyunlardan biridir ve hem çocuklar hem de yetişkinler onu sever. Adam asmanın JavaScript, HTML ve CSS kullanılarak bir anda geliştirilebileceğini bilmek sizi şaşırtacak. Ana işlevselliğin JS kullanılarak tanımlandığını unutmayın. HTML görüntüleme içindir ve CSS, içeriği güzelleştirme işini yapar. Bu kod parçacığının JS’sinde tanımlanmış birçok yöntem olmasına rağmen, biraz karmaşık görünebilir, ancak kodun üzerinden geçtiğinizde bunun basit olduğunu anlayacaksınız. Ayrıca kodu çalıştırabilir ve yürütmeyi satır satır görebilirsiniz. Kodu ve yürütmeyi buradan kontrol edin.
3. Tic Tac Toe Oyunu
Çocukken bu oyunu sonsuza dek kağıt üzerinde oynardık. Ama bu oyunu bilgisayarda geliştirmenin de oldukça kolay olduğunu biliyor muydunuz? JavaScript sayesinde. Bu ayrıntılı kod, dev. daha sonra kendi pratiğiniz ve bilginiz için NxN’ye genişletebileceğiniz 3×3 tic-tac-toe’u adım adım nasıl oluşturacağınızı açıklar. Proje için HTML ve CSS oldukça basit ve düzenli. Buradan kontrol edebilirsiniz.
4. JavaScript Müzik Etkinlikleri
Burada, klavye olaylarına göre hareket edecek olay dinleyicileri ile tanıştırıyoruz. Örneğin, ‘S’ tuşuna basılırsa, olacak olay nedir? Her olayın farklı bir kodu ve eylemi olacaktır. Etkinlik dinleyicilerinin yanı sıra, ses dosyalarının nasıl ekleneceğini ve çalınacağını da öğreneceğiz. Buradaki odak noktası JavaScript olduğundan çok temel CSS eklediğimizi unutmayın. Programın tam olarak çalışması için kendi seslerinizi ve arka plan resminizi içe aktarmanız gerekecektir.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KeyBoard Music</title>
</head>
<body>
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
</div>
</div>
<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/chord.wav"></audio>
<audio data-key="68" src="sounds/ride.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/tink.wav"></audio>
<audio data-key="72" src="sounds/kick.wav"></audio>
<audio data-key="74" src="sounds/swipe.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/boom.wav"></audio>
</body>
<script>
function removeTransition(event) {
if (event.propertyName !== 'transform') return
event.target.classList.remove('playing')
}
function playSound(event) {
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
const key = document.querySelector(`div[data-key="${event.keyCode}"]`)
if (!audio) return
key.classList.add('playing')
audio.currentTime = 0
audio.play()
}
const keys = Array.from(document.querySelectorAll('.key'))
keys.forEach((key) => key.addEventListener('transitionend', removeTransition))
window.addEventListener('keydown', playSound)
</script>
<style>
html {
font-size: 12px;
background: url('drums.jpg') top center;
background-size: 80%;
}
.keys {
display: flex;
flex: 1;
align-items: top;
justify-content: center;
}
.key {
border: 0.4rem solid blue;
border-radius: 0.5rem;
margin: 1rem;
font-size: 2rem;
padding: 1rem 0.5rem;
transition: all 0.01s ease;
width: 5rem;
text-align: center;
color: black;
text-shadow: 0 0 0.5rem yellow;
}
</style>
</html> 5. JavaScript Form Doğrulaması
Form doğrulama çok yararlı bir özelliktir ve birçok web sitesi tarafından kullanıcı ayrıntılarının, kart ayrıntılarının, adres ayrıntılarının vb. İstemci tarafında doğrulanması için kullanılır. Örneğin, zorunlu bir giriş alanı adı varsa, kullanıcı bir numara yazabilir veya alanı boş bırakın, yalnızca bir harf yazın, vb. Tüm bu doğrulamalar JavaScript kullanılarak kolayca yapılabilir. Basit bir form doğrulama projesi görelim. Her zamanki gibi, projenin HTML öğelerine de ihtiyacı olacaktır. Kapsamlı bir stil yapmadık, sadece HTML’nin kendisine temel öğeleri ekledik. İşte temel doğrulamalara sahip basit bir formun tam kodu:
<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
function validate() {
var text;
if( document.myForm.name.value == "" ) {
text = "Name cannot be empty";
document.getElementById("demo").innerHTML = text;
document.myForm.name.focus() ;
return false;
}
if( document.myForm.email.value == "" ) {
text = "E-mail cannot be empty";
document.getElementById("demo").innerHTML = text;
document.myForm.email.focus() ;
return false;
}
var emailID = document.myForm.email.value;
atposn = emailID.indexOf("@");
dotposn = emailID.lastIndexOf(".");
if (atposn < 1 || ( dotposn - atposn < 2 )) {
text = "Please enter valid email ID";
document.getElementById("demo").innerHTML = text;
document.myForm.email.focus() ;
return false;
}
if( document.myForm.phone.value == "" || isNaN( document.myForm.phone.value ) ||
document.myForm.phone.value.length != 10 ) {
text = "Please enter a valid 10-digit phone number";
document.getElementById("demo").innerHTML = text;
document.myForm.phone.focus() ;
return false;
}
if( document.myForm.subject.value == "0" ) {
text = "Please provide your area of expertise";
document.getElementById("demo").innerHTML = text;
return false;
}
return( true );
}
</script>
</head>
<body>
<form action = "" name = "myForm" onsubmit = "return(validate());">
<h1 align="center">USER REGISTRATION</H1>
<table align="center" cellspacing = "3" cellpadding = "3" border = "3">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "name" /></td>
</tr>
<tr>
<td align = "right">E-mail</td>
<td><input type = "text" name = "email" /></td>
</tr>
<tr>
<td align = "right">Phone Number</td>
<td><input type = "text" name = "phone" /></td>
</tr>
<tr>
<td align = "right">Subject</td>
<td>
<select name = "subject">
<option value = "0" selected>Select</option>
<option value = "1">HTML</option>
<option value = "2">JavaScript</option>
<option value = "3">CSS</option>
<option value = "4">JSP</option>
</select>
</td>
</tr>
</table>
<p id="demo" style="color:red; text-align:center"></p>
<div style="text-align:center"><input type = "submit" value = "Submit" /></div>
</form>
</body>
</html>Evet şimdilik Javascript için projelerimiz bukadar daha fazla içerik için takipte kalınız. Sizlerde destek sağlamak için kodmek dünyasına ücretsiz kayıt olarak içerik ekleyebilirsiniz.