වෙබ් අඩවියක ආත්මය: Frontend Trio
මේ දක්වා, අපි මෘදුකාංගයක "තිරය පිටුපස" ක්රියාත්මක වන කොටස්, එනම් දත්ත ගබඩා කිරීම (Databases) සහ තර්කනය ක්රියාත්මක කිරීම (Programming Logic) පිළිබඳව ඉගෙන ගත්තෙමු. දැන්, පරිශීලකයා සැබවින්ම දකින සහ භාවිතා කරන කොටස, එනම් ඉදිරිපස-අන්තය (Frontend) නිර්මාණය කිරීමට කාලයයි. ඔබ දකින සෑම වෙබ් අඩවියක්ම සහ වෙබ් යෙදුමක්ම (web application) මූලික තාක්ෂණයන් තුනක එකතුවකින් ගොඩනගා ඇත.
මෙම තාක්ෂණයන් තුන මිනිස් සිරුරකට උපමා කළ හැක:
- HTML (HyperText Markup Language): මෙය වෙබ් පිටුවේ ඇටසැකිල්ලයි (Skeleton) 🦴. පිටුවේ ඇති අන්තර්ගතය (මාතෘකා, ඡේද, පින්තූර) සහ එහි ව්යුහය නිර්වචනය කරන්නේ HTML මගිනි.
- CSS (Cascading Style Sheets): මෙය වෙබ් පිටුවේ පෙනුමයි (Appearance) 🎨. වර්ණ, අකුරු වර්ග, පිරිසැලසුම (layout) සහ සමස්ත දෘශ්ය අලංකාරය පාලනය කරන්නේ CSS මගිනි. එය හරියට සිරුරේ සම, ඇඳුම් පැළඳුම් වැනිය.
- JavaScript (JS): මෙය වෙබ් පිටුවේ මොළය සහ මාංශ පේශීයි (Brain & Muscles) 💪🧠. බොත්තමක් ක්ලික් කළ විට සිදුවන දේ, පෝරමයක් submit කිරීම වැනි සියලුම අන්තර්ක්රියාකාරී (interactive) දේ සහ ගතික හැසිරීම් පාලනය කරන්නේ JavaScript මගිනි.
1. HTML - වෙබ් පිටුවේ ව්යුහය
HTML යනු ක්රමලේඛන භාෂාවක් නොව, සලකුණු භාෂාවකි (Markup Language). එය <tag> නමින් හැඳින්වෙන සලකුණු භාවිතා කරමින්, "මෙය මාතෘකාවකි" (<h1>) හෝ "මෙය ඡේදයකි" (<p>) යැයි බ්රවුසරයට කියයි.
<!DOCTYPE html>
<html>
<head>
<title>මගේ වෙබ් පිටුව</title>
</head>
<body>
<h1>ප්රධාන මාතෘකාව</h1>
<p>මෙය සරල ඡේදයකි.</p>
<img src="image.jpg" alt="නියැදි පින්තූරය">
</body>
</html>
2. CSS - වෙබ් පිටුවේ මෝස්තරය
CSS මගින් අපට HTML මූලද්රව්ය (elements) තෝරාගෙන ඒවායේ පෙනුම වෙනස් කිරීමට හැකියාව ලැබේ. මෙය අන්තර්ගතය (HTML) සහ පෙනුම (CSS) එකිනෙකින් වෙන් කර තැබීමට උපකාරී වන අතර, එමගින් වෙබ් අඩවිය නඩත්තු කිරීම පහසු වේ.
/* ඉහත HTML කේතයට අදාළ CSS */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #1a237e; /* නිල් පැහැති වර්ණයක් */
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
}
3. JavaScript - වෙබ් පිටුවේ හැසිරීම
JavaScript යනු බ්රවුසරය තුළ ක්රියාත්මක වන සැබෑ ක්රමලේඛන භාෂාවකි. එයට HTML සහ CSS වෙනස් කිරීමට, පරිශීලක ක්රියාකාරකම් වලට ප්රතිචාර දැක්වීමට සහ සේවාදායකය (server) සමග සන්නිවේදනය කිරීමට හැකිය.
<!-- HTML එකට බොත්තමක් එකතු කරමු -->
<button onclick="showMessage()">මා ඔබන්න</button>
<script>
// JavaScript කේතය
function showMessage() {
alert('ආයුබෝවන්! ඔබ බොත්තම එබුවා.');
}
</script>
අවසාන වශයෙන්
මෙම තාක්ෂණයන් තුන එකට ක්රියා කරන ආකාරය අවබෝධ කර ගැනීම ඕනෑම වෙබ් සංවර්ධකයෙකුට අත්යවශ්ය වේ. බ්රවුසරය පළමුව HTML කියවා පිටුවේ ඇටසැකිල්ල ගොඩනගයි. ඉන්පසු CSS යොදා එයට පෙනුම ලබා දේ. අවසානයේ JavaScript ක්රියාත්මක කර පිටුවට ජීවයක් සහ අන්තර්ක්රියාකාරීත්වයක් ලබා දේ.
දැන් අපි පරිශීලකයා දකින ඉදිරිපස-අන්තය (Client-Side) නිර්මාණය කරන ආකාරය දන්නා නිසා, අපගේ ඊළඟ පියවර වන්නේ මෙම ඉදිරිපස-අන්තය, අප කලින් ඉගෙන ගත් දත්ත සමුදා සහ ක්රමලේඛන තර්කනය සමග සම්බන්ධ කරන "තිරය පිටුපස" ඇති සේවාදායක-අන්තය (Server-Side) ගොඩනගන්නේ කෙසේදැයි ඉගෙන ගැනීමයි. ඒ සඳහා අපි ඊළඟ මොඩියුලයෙන් "Backend Development" පිළිබඳව අධ්යයනය කරමු.