کدنویسی ساده است

میخواهم کمی راجع به کدنویسی تحت وب نظیر php، Javascript و Html توضیح بدهم.

کدنویسی ساده است! کافی ست اجزاء، بستر، رابطه بین اجزا در بستر و در نهایت هدف آن را شناسایی کنیم. ما کد می نویسیم تا با اجرای آن کنشی در شبکه انجام شود (نرم‌افزاری اجرا شود).

هدف:

هدف از کد نویسی کارکرد کد است. یعنی اینکه بدانیم کد با چه مقصودی نگاشته می شود. مثل نیت گویندۀ یک جمله یا نیت مولف یک نوشته. همین که بدانیم کارکرد برنامه چست و میخواهیم با کد چه‌کار کنیم مقصود را دریافته ایم.

بستر:

بستر کدنویسی یکی از موارد(php، Javascript وHTML) بالا است. هر یک از این بسترها به منظور رفع مشکلی در شبکه ابداع شده اند. در ابتدا HTML را بوجود آوردند. HTML یعنی زبان نشانه‌کذاری شدۀ فرامتنی. فرامتنی بودنش به این دلیل است که تا آن زمان شبکه اینترنت متنی بود و از آن به بعد صوتی-تصویری شد.

با گذشت زمان دانشمندان علوم رایانه متوجه شدند HTML در سه حوزه ضعف دارد و زبانهای دیگری را ابداع و به آن افزودند تا بهتر شود:

• پویایی ندارد. مثلا اگر بخواهیم با زدن یک دکمه متن بچرخد و محو شود، باید چندین و چند صفحه کد بنویسیم و در نهایت شاید چیزی که می خواستیم نشود! پس جاوا اسکریپت (JavaScript) ابداع شد.
• طراحی بصری عناصر تشکیل دهندۀ HTML دشوار بود. مثلا تغییر رنگ، اندازه، جانمایی در صفحه و… . پس CSS را ابداع کردند تا با تغییر جزئی یک خاصیت، ظاهر عناصر صفحه تغییر کند.
• در HTML دسترسی به پایگاههای داده دشوار است. مثلا فرض کنید می خواهیم تارگاهی داشته باشیم که برای ورود کاربر به تارگاه، نامواژه و گذرواژه می خواهد. این دو در پایگاه داده ها ذخیره شده اند و باید به درخواست کاربر، از پایگاه داده فراخوانده شوند. HTML در انجام این کار ضعیف است پس از زبان PHP استفاده می کنند.

اینها بسترهای کدنویسی هستند. کدها را در این بسترها می خوانند و می نویسند.

اجزاء:

اجزاء زبانهای برنامه نویسی مثل حروف و کلمات برای نوشتن یک جملۀ معنادار عمل می کنند. اجزاء زبان HTML (که عنصر یا element نامیده می شوند) ساده هستند. مثلا عناصر ساختاری HTML5 شامل موارد زیر است:

لیست عناصر و تگهای عناصر جدید در HTML5 را از اینجا ببینید.

تگهای سایر زبانها هم شبیه به تگهای HTML هستند ولی با کاربری متفاوت.

زمانی یک عنصر ایجاد می شود که یک تگ باز شود، محتوایی درون آن قرار گیرد و تگ بسته شود:

<تگ>محتوی</تگ>

مثلا این عنصر، عنصرِ پاراگراف است:

<p>محتوای درون عنصر</p>

همانطور که گفتیم عناصر HTML برای پویانمایی و طراحی و دسترسی به پایگاه داده ضعیف هستند. پس اشیاء جاوا اسکریپت، گزینشگرهای CSS و کلاسهای PHP (که با عناصر HTML کار می کنند) را هم باید بدانیم:

Javascript:

http://www.w3schools.com/js/js_ex_dom.asp

CSS:

http://www.w3schools.com/css/css_selectors.asp

PHP:

https://www.codecademy.com/courses/web-beginner-en-ZQQ64/0/1

عناصر HTML دارای خواص Properties و ویژگیهایی Attribute هستند. همچنین کارهایی که این عناصر انجام می دهند را با عنوان رویداد Event می شناسیم. اکنون می توان حدس زد که زبانهای ابداعی ما بیشتر با کدام دسته از شاخصهای عناصر درگیر هستند. جاواسکریپت معمولا با رویدادها و خواص عناصر درگیر است. CSS با خواص عناصر و در نهایت PHP با رویدادها.

Php:

Php با دستورات یا functionهایش کار می کند. همه php دستوراتش است. مثلا هر کاری که با عناصر html داشته باشد باید دستوری را فرابخواند. Php بیش از 100 دستور پیشفرض دارد که به آنها دستورات جهانی یا global functions می گویند ولی شما میتوانید خودتان دستور بنویسید و در طول اجرای برنامه، آنها را اجرا کنید.

http://www.w3schools.com/php/php_functions.asp

متغیرها داده هایی را درون خودشان ذخیره می کنند که ما به آنها می دهیم. مثلا $x=1 عدد 1 را درون  متغیر x قرار می دهد. متغیرهایی که خارج از دستورات تعریف می شوند درون دستور کاربرد ندارند. ولی میتوانیم درون دستور متغیرهایی تعریف کنیم. برای این کار آنها را درون پرانتزها قرار می دهیم و دستور به ترتیب به آنها مراجعه می کند. مثلا:

<?php
function familyName($fname, $year) {
echo “$fname Refsnes. Born in $year <br>”;
}

familyName(“Hege”, “1975”);
familyName(“Stale”, “1978”);
familyName(“Kai Jim”, “1983”);
?>

در این کد هربار که دستور را فرا می خوانیم، به ترتیب ارزشهای داده شده را به متغیرهای fname و year را نسبت می دهد و دستور را اجرا می کند.

لیست دستورات پیش‌آماده php

دیگر اجزاء کد html :

خواص:

خواص یک عنصر را با نقطه از آن جدا می کنند. لیست خواص را اینجا ببینید. مثلا window.location یعنی جای پنجره.

مشخصه های رویدادها:

یک رویداد معمولا با مشخصه هایی همراه است. ممکن است مشخصه ها هم با ویژگیهایی همراه شوند. لیست مشخصه های رویدادهای عناصر را اینجا ببینید.

CSS:

گفتیم از css برای تغییر جلوۀ عناصر html استفاده می کنیم. مثال زیر نشان می دهد که چگونه جلوۀ یکی از خواص یک عنصر با کدهای css تغییر می کند:

<html>
<body>

<p id=”p2″>Hello World!</p>

<script>
document.getElementById(“p2”).style.color = “blue”;
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

اصل کار خط قرمز است. ولی توجه کنید که عنصر پاراگراف با فرمان سبز علامتدار شده است تا آنگاه که دستور تغییر جلوۀ (کد قرمز) اجرا می شود بداند چه چیزی را تغییر دهد.

تغییر جلوۀ یک عنصر بوسیلۀ رویدادها هم ممکن است. مثلا در مثال زیر رویداد کلیک جلوۀ رنگی سرتیتر ما را تغییر می دهد:

<html>
<body>

<h1 id=”id1″>My Heading 1</h1>

<button type=”button”
onclick=”document.getElementById(‘id1’).style.color = ‘red'”>
Click Me!</button>

</body>
</html>

در این صفحه معجزۀ css را به چشم خواهید دید و مشخص است که css چه بار سنگینی از دوش html برداشته است! در این مثال مشخص می شود که ما می توانیم چندین بستۀ طراحی را به همراه صفحۀ htmlمان داشته باشیم و هر زمان که اراده کردیم یکی از این بسته ها را به صفحه تخصیص دهیم تا جلوۀ تمام عناصر صفحه تغییر کند.

اجزاء css در عکس پایین مشخص شده است:

یک توضیح مهم: کلاس چیست؟

کد نویسان بعد از مدتی که html ابداع شد متوجه شدند که گاهی لازم است تا مجموعه ای از ویژگیها و خواص عناصر را یکجا تغییر دهند. برای این کار باید تعداد زیادی خط فرمان می نوشتند. پس کلاسها را ابداع کردند. شما با تعریف کلاسها می توانید چندین و چند خاصیت و ویژگی پیچیده را در یک کلاس تعبیه کنید و به عناصر نسبت دهید. به این ترتیب با تغییر کلاس عناصر تغییر می کنند. به این مثال php دقت کنید:

در این مثال می خواهیم کلاس شخص را به دو زیرکلاس مرد و زن تقسیم کنیم تا ویژگیهای مورد نظرمان را بین آنها توزیع کنیم. پس ما یک کلاس شخص(person) داریم. که یک متغیر مختص به خودش دارد به نام “زنده” یا alive . ویژگی هر شخص این است که زنده باشد! بعد دو ویژگی دیگر هم با متغیرهای gener و genitalorgan تعریف می کنیم که وجه ممیز زن و مرد باشد. با یک فرمان کلاس مرد را از شخص بیرون می کشیم و می گوییم این زیرکلاس مرد باید دو ویژگی گفته شده در کلاس شخص را تعیین تکلیف کند. پس دستور ساختار یا constract را فرا می خوانیم و دو ویژگی مختص مرد را به متغیرهای شخص نسبت می دهیم. جزئیات این مثال جالب را در اینجا ببینید.

برگردیم به بحث css. پس این کلاس در css خیلی بدرد می خورد چون با یک حرکت می شود تکلیف جلوۀ چندین و چند عنصر را مشخص کرد.

چگونه یک بستۀ جلوه ها را به یک صفحۀ html نسبت دهیم. با عنصر link پیوند به بسته برقرار می شود. مثال:

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

همچنین می شود جلوه ای را درون کد html هم تغییر داد. مثلا:

<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

و یا مثلا

<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>

Jquery:

بسته ای آماده است که با javascript نوشته شده است و برای تغییر رابط کاربری و جلوه های ظاهری پویا(که ویژگی جاواسکریپت بود) بکار می رود. اگر خواستید از کتابخانه ای آماده و عظیم که شامل انواع اقسام عناصر و دکمه ها و رویدادهای عجیب و غریب و جالب است استفاده کنید، کتابخانۀ jquery دم دست شماست.

چگونه کتابخانه را فرابخوانیم؟ با این کد از سرور خودتان:

<head>
<script src=”jquery-1.11.3.min.js”></script>
</head>

و با این کد از سرور گوگل تا سریع‌تر باشد:

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
</head>

اکنون چگونه بروی عناصر html حرکت بزنیم؟ فقط کافی ست جمله‌بندی زیر را به یاد داشته باشید و درست چیدمان کیند:

$(selector).action()

$ ، jQuery را صدا می زند. Selector عنصر html را پیدا می کند و action حرکتی را روی عنصر پیاده می کند.

دقت کنید در بیشتر مواقع دستورات jquery پس از اجرای کامل صفحه اجرا می شوند. پس دستورات ذیل عنصر document و رویداد ready قرار می گیرند:

$(document).ready(function(){

//حرکتها را اینجا بنویسید.

});

برای کوچک شدن فرمان، شکل سادۀ این فرمان چنین است:

$(function(){

//حرکتها را اینجا بنویسید.
});

اینجا انواع حرکتهای jquery را با مثال ببینید.

بدرود