شرح تقني كامل لمشاريع جاهزة في اللغات المذكورة لغة HTML و CSS و JAVA Script
ملاحظة : قم بنسخ الكود البرمجي نسخ لصق من أعلى لأسفل دون القلق من كونه يظهر بشكل مرتب في هذا المقال ف جميع الأكواد مجربه و تعمل بشكل سليم..
معلومات عامة للشرح بالكامل :
- البرنامج المستخدم في كتابة الأكواد هو sublime إضغط للتحميل من هنا .
- خذ الكود بالكامل نسخ لصق فقد ترك الموقع ميزة النسخ مفتوحة هنا لتسهيل الإستخدام على الزائر.
مشاريع جاهزة HTML و CSS و JAVA Script : ._.
1_ مشروع إنشاء صفحة ويب و تقسيمها لعدة مناطق منها التروسية و التذييل للصفحة و الأقسام الجانبية و الوسطية.
الشكل العام للمشروع :
الكود البرمجي :
<!DOCTYPE html>
<html>
<head>
<title>Grid lay out</title>
<style type=”text/css”>
*{
font-size: 10
px;
}
.grid-container{
display: grid;
border-style: solid;
text-align: center;
grid-template-areas:
‘header header header header header header’
‘left middle middle middle middle right’
‘footer footer footer footer footer footer’;
}
.left,
.middle,
.right{
padding: 5px;
border-style: solid;
height: 500px;
}
.header{
grid-area: header;
background-color:green;
height: 100px;
}
.left{
grid-area: left;
background-color: royalblue;
}
.middle{
grid-area: middle;
background-color: yellowgreen;
}
.right{
grid-area: right;
background-color: royalblue;
}
.footer{
grid-area: footer;
background-color: lightblue;
height: 50px;
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”header”> Header
<img src=”free.png” style=”float:center;width: 100px;height: 150;”>
</div>
<div class=”left”> Left </div>
<div class=”middle”> Middle </div>
<div class=”right”>Right </div>
<div class=”footer”>Footer </div>
</div>
</body>
</html>
2_ مشروع جمع الأعداد من عدد معين لعدد معين أخر بإستخدام لغة html دالة sum .
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
</head>
<body>
<p id=”demo”></p>
<script >
var sum =0;
for (var i= 0;i<=10;i++){
sum=sum+i;
}
document.getElementById(“demo”).innerHTML= “The summation of 1 to 10 is :” + sum;
</script>
</body>
</html
3_ مشروع صناعة جدول من صفوف و أعمدة و هو أول مشروع يحتاج الطالب تعلمه.
صورة من المشروع :
تعقيب يمكن التحكم في حجم و شكل الجدول عن طريق دالة المستخدمة في الكود :
grid-template-columns:AUTO AUTO AUTO;
grid-template-rows:AUTO AUTO AUTO;
الكود البرمجي:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title> the start editor</title>
<style>
.mohamed-hussein{
display:grid ;
grid-template-columns:AUTO AUTO AUTO;
grid-template-rows:AUTO AUTO AUTO;
grid-gap: 10PX;
background-color:black ;
padding: 10px;
}
.mohamed-hussein >div{
background-color:blue ;
color:rgba(255, 255, 100, 0.8) ;
text-align:center;
padding: 20px ;
font-size: 30px;
}
.m7{
grid-column: 1/4 ;
}
</style>
</head>
<body>
<div class=”mohamed-hussein”>
<div class=”m m1″>0</div>
<div class=”m m2″>1</div>
<div class=”m m3″>2</div>
<div class=”m m4″>3</div>
<div class=”m m5″>4</div>
<div class=”m m6″>5</div>
<div class=”m m7″>6</div>
<div class=”m m8″>7</div>
<div class=”m m9″>8</div>
</body>
</html>
4_ مشروع إنشاء دالة إدخال للأسم الأول و ثم الثاني ثم طباعة الأسم الكامل.
صور التطبيق للمشروع:
الكود البرمجي للمشروع:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
</head>
<body>
<h1>Print out the tow names</h1>
<p id=”demo”></p>
<script>
var name1= prompt(“Enter First name:”);
var name2= prompt(“Enter Second name:”);
var name3 =name1 + name2;
alert(name3);
document.getElementById(“demo”).innerHTML= name3;
</script>
</body>
</html>
5_ إيجاد مضروب أي عدد عن طريق دالة إدخال مربع نصي factorial.
صورة المشروع:
كود برمجي للمضروب factorial:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>factorial n</title>
</head>
<body>
<p id=”demo”></||p>
<script>
function factorial(n){
var answer = 1;
if (n == 0 || n == 1){
return answer;
}else{
for(var i = n; i > 1; i–){
answer = answer * i;
}
return answer;
}
}
var n ;
n=prompt(“enter the number”);
answer = factorial(n)
document.getElementById(“demo”).innerHTML= “The factorial of ” + n + ” is ” + answer;
</script>
</body>
</html>
6_ دالة document.write الإنتقال من الصفحة الحالية إلى صفحة جديدة و دالة الزر button:
صورة المشروع:
تعقيب صغير إستخدام document.write يفرق عن إستخدام document.getElementById في إن الأولى تنتقل إلى صفحة جديدة تماماً.
الكود البرمجي:
<!DOCTYPE html>
<html>
<head>
<title>javascript can change HTML content </title>
<h2>JavaScript in Body <br> what can java script do?</h2>
<script type=”text/javascript”>
function change_content(){
document.getElementById(“demo”).innerHTML=”Hello JavaScript!”;
}
function change_content_using_write(){
document.write(‘using writ function_to display text Hello JavaScript! ‘);
}
</script>
</head>
<body>
<p id=”demo”>JavaScript can change HTML content.</p>
<button type=”button” onclick=’change_content()’>click Me!</button>
<button type=”button” onclick=”change_content_using_write()”>click for using write!</button>
</body>
</html>
7_ مشروع إستخدام دالة الشرط if_condition للمقارنة و إخراج العدد الأكبر أو العكس.
صورة التطبيق:
كود برمجي :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>if condition</title>
</head>
<body>
<p id=”demo”></p>
<p id=”demo1″></p>
<script>
var price1=20;
var price2=6;
var total=price1 + price2;
document.getElementById(“demo”).innerHTML= “total=” + total;
if (price1 < price2) {
document.getElementById(“demo1”).innerHTML = “price2 is greater price1 and equal =” + price2 ;}
else{
document.getElementById(“demo1”).innerHTML = “price1 is greater price1 and equal =” + price1 ;
}
</script>
</body>
</html>
8_ أنواع الأزرار button الخاصة بالإدخال في لغة (html (input type:
صورة توضيح:
كود برمجي :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title> input type</title>
</head>
<body>
<input type=”text” name=”input” size=”20px” placeholder=”enter your name”>
<input type=”submit” name=”name” value=”press”>
<input type=”checkbox” name=”name” value=”no”>no
<input type=”radio” name=”name” value=”male”>male
<br><textarea rows=”2″clos=”3″></textarea>
<select size=”2″ name=”option”>
<option>one</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
9_ إستخدام الأزرار للتحكم في ظهور صورة و التعديل عليها في الحجم للتكبير أو التصغير:
صور المشروع: تنبيه يجب أن يحتوي الملف الخاص بلغة html على الصورة المستخدمة في البرنامج.
الكود البرمجي الأول :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>njidfhi</title>
<script type=”text/javascript”>
function function_name() {
document.getElementById(‘img’).src=’ pic_bulboff.gif’;
}
function function_name2() {
document.getElementById(‘img’).src=’ pic_bulbon.gif’;
// body…
}
</script>
</head>
<body>
<button type=”turn” onclick=”function_name()”> off</button>
<img id=”img” src=” pic_bulbonff.gif” width=”50px” align=”center”>
<button type=”turn” onclick=”function_name2()”> trun</button>
</body>
</html>
الكود البرمجي الخاص بالتحكم في حجم الصور.
صور المشروع: تنبيه يجب أن يحتوي الملف الخاص بلغة html على الصورة المستخدمة في البرنامج.
الكود البرمجي:
<html>
<body>
<img id=”image1″src=”balloon_PNG.png” width=”50″ height=”80″>
<button onclick=”fun()”>click me</button>
<script>
function fun(){
var w=document.getElementById(“image1”).width;
var h=document.getElementById(“image1”).height;
document.getElementById(“image1”).width=2*w;
document.getElementById(“image1”).height=2*h;
}
</script>
</body>
</html>
10_ دالة الإدخال في مربع منبثق prompt:
صورة المشروع:
كود البرمجة الخاص بها:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Using prompt fuction</title>
</head>
<body>
<p id=”demo” ></p>
<script >
var name =prompt(“enter your name”);
document.getElementById(“demo”).innerHTML= “hello ” + name + ” <br> how are you”
</script>
</body>
</html>
11_دالة الإخراج في صندوق منبثق alert:
صورة للتطبيق:
الكود البرمجي:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
</head>
<body>
<script>
alert(“I’m an \n alert”)
</script>
</body>
</html>
12_ إستخدام أداة lable:
أداة العنوان Label Control. اسم يستخدم لتحديد أداة العنوان ، وعادة يبدأ بالحروف الثلاث lbl . العبارة التي سوف تظهر في أداة العنوان. يضبط أسلوب الخط ونوعه وحجمه الذي سوف يظهر في العنوان>>>
الكود البرمجي :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>wiht css</title>
</head>
<body>
<forms action=”/action_page.php” name=”form20000″></form>
<label for=”firstname”>name:::</label>
<input type=”text”name=”los” id=”fname” placeholder=”enter”>
<input type=”submit” name=”name” value=”name”>
</body>
</html>
13_ كود برمجي لإدخال عدد معين من الطالب ثم إدخال العلامات ثم إظهار المعدل لهم عن طريق المصفوفات Javascript array :
كود البرمجة :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Javascript array</title>
</head>
<body>
<p id =”demo”></p>
<script >
var i,sum = 0;
var average = 0;
var n = prompt(“enter number of students:”);
var marks = new Array(n);
for (i=0;i<=n-1;i++){
marks[i]= prompt(“enter marks of student :”);
sum = sum+Number(marks[i]);
}
average = sum/n;
document.getElementById(“demo”).innerHTML= “The average of marks is = ” + average;
</script>
</body>
</html>
14_ إستخدام الجداول في تنسيق صفحة تحتوي على أزرار التخكم كلها بجميع الأنواع:
صورة المشروع:
الكود البرمجي:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
color: red;
}
table {
float :right;
color: blue;
}
</style>
</head>
<body>
<h1>ادوات التحكم الرئيسيه في جافاسكريبت</h1>
<table text-align: center;>
<tr>
<td ><input type = “text” name=”txt1″ value = “Check this checkbox”> </td>
<td> <input type = “checkbox” name =”btn1″ value =”checkbox”>check box</td>
</tr>
<tr>
<td ><input type = “text” name=”txt1″ value = “click this radio button”> </td>
<td> <input type = “radio” name =”btn1″ value =”checkbox”>radio button</td>
</tr>
<tr>
<td ><input type = “text” name=”txt1″ value = “Enter your password”> </td>
<td> <input type = “password” name =”pass1″ value =””></td>
</tr>
<tr>
<td ><input type = “button” name= “btn1” value = “This is a button control” > </td>
<td> <input type = “reset” name =”res1″ value =” click me!” ></td>
</tr>
</table>
<h1 ><br><br><br>هذه الصفحة تحتوي على ادوات التحكم الرئيسية منسقة بجدول </h1>
</body>
</html>
15_ إستخدام لغة css في تعديل شكل الصفحات ثم ربطها في الصفحة لإظهار التعديل :
حيث أننا نقوم بعمل صفحة برمجية بإمتداد css (أسم الصفحة .css) يمكن لنا أن نعدل الألوان و الشكل العام للصفحة ثم نقوم بربطها في صفحة html.
ثم نقوم بربطها في صفحة html :
صورة التنفيذ وهي طباعة كلمة css و اخذ اللون و الشكل من صفحة css أخرى:
الكود البرمجي للغة css :
p{font: 28px; color :red; font-size: 50px ;font-family: sans-serif;}
body{background-color: black;}
الكود البرمجي للغة html كامل:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>css</title>
<link rel=”stylesheet” type=”text/css” href=”link.css”>
</head>
<body>
<p> css</p>
<p> css</p>
<p> css</p>
<p> css</p>
</body>
</html>
16_ دالة do _while في طباعة أعداد من رقم معين لرقم أخر سواء بالترتيب التنازلي أو التصاعدي:
صورة للتنفيذ:
كود البرمجة للتنفيذ :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
</head>
<body>
<p id=”demo”></p>
<script>
var i=9;
var text =” “;
do{text=text +”<br> The number is ” + i;i–;}
while(i>=0);
document.getElementById(“demo”).innerHTML=text;
</script>
</body>
</html>
