چگونه با جاوا و جاوا اسکریپت طراحی سایت کنیم

طراحی وب سایت با جاوا اسکریپت (JavaScript)

در همین ابتدای کار اجازه دهید شما را از هرگونه سردرگمی در مورد این نام، روشن کنیم: جاوا اسکریپت هیچ ارتباطی با جاوا ندارد. اکنون که می‌دانیم JavaScript چیست، می‌توانیم در مورد JavaScript صحبت کنیم. اگر تنها کاری که می‌خواهید با وب سایت خود انجام دهید نمایش متن و تصاویر اساسی است، HTML و CSS برای انجام کار کافی هستند. در ادامه با در مطلب طراحی وب سایت با جاوا، همراه ما باشید.

با این حال، اگر می‌خواهید کارهای دیگری انجام دهید مانند تغییر سبک‌ها به صورت پویا تغییرمنوها یا دکمه‌های کاربردی ایجاد کنید، داده‌های وارد شده را به یک شکل و فرم دربیاورید و … به ابزار دیگری احتیاج دارید.

 

 

جاوا اسکریپ ابزاری است که بیشتر برای انجام کارهای متداول و رفتار وب سایت استفاده می‌شود. برای شروع باید بگوییم که جاوا اسکریپت (JavaScript) به طور خلاصه (JS) یک زبان برنامه نویسی تمام عیار است که می‌تواند تعامل و تعادل را به یک وب سایت اضافه کند. این اختراع توسط Brendan Eich بنیانگذار پروژه Mozilla، بنیاد موزیلا و شرکت Mozilla ساخته شده است.

 

جاوا اسکریپت چیست؟

JavaScript یک زبان برنامه نویسی متنوع و مبتدی است. هرچه شما بیشتر درباره این زبان تجربه و اطلاعات کسب کنید، قادر خواهید بود بازی‌های مختلفی با گرافیک‌های متحرک ۲D و ۳D، برنامه‌های جامع مبتنی و براساس بانک اطلاعاتی خود و موارد دیگر بهره‌مند شوید.

خود JavaScript نسبتاً فشرده و درعین حال بسیار انعطاف‌پذیر است. جاوا اسکریپت یک زبان برنامه نویسی مبتنی بر منطق است که می‌تواند برای تغییر محتوای وب سایت و ایجاد رفتارهای مختلف در پاسخ به اقدامات کاربر استفاده شود.

کاربردهای رایج برای JavaScript شامل جعبه‌های تأیید (confirmation boxes) تماس با عمل (calls-to-action) اضافه کردن هویت‌های جدید به اطلاعات موجود در وب سایت است.

 

 

به طور خلاصه، JavaScript یک زبان برنامه نویسی است که به توسعه‌دهندگان وب اجازه می‌دهد تا سایت‌های تعاملی (interactive) طراحی کنند. بیشتر رفتارهای پویا که در یک صفحه وب مشاهده می‌کنید، به لطف JavaScript است که کنترل‌ها و رفتارهای پیش فرض مرورگر را تقویت می‌کند.

مزایای یادگیری زبان برنامه نویسی جاوا

 

Object Orient:

در زبان برنامه نویسی جاوا، همه چیز یک Object است. جاوا را می‌توان به راحتی گسترش داد زیرا این مدل براساس مدل Object طراحی و توسعه یافته است.

Platform Independent

بر خلاف بسیاری از زبان‌های برنامه نویسی دیگر از جمله C و  ++C، هنگام تهیه جاوا شما دیگر لازم نیست دستگاه‌های خاصی داشته باشید تا بتوانید به این زبان برنامه نویسی وارد شوید، بلکه جاوا یک کد مستقل و اختصاصی برای خود دارد. این کد در وب سایت توزیع شده و توسط ماشین مجازی (JVM) در هر بستری که در آن اجرا شده باشد تفسیر می‌شود.

Simple

جاوا به گونه‌ای طراحی شده است که یادگیری آن آسان باشد. اگر مفهوم اصلی OOP Java را درک کنید، تسلط بر آن آسان خواهد بود.

 

Secure

با ویژگی امن جاوا می‌توان سیستم‌های بدون ویروس را ایجاد کرد. تکنیک‌های تأیید هویت مبتنی بر رمزگذاری کلید عمومی این زبان برنامه نویسی است.

 

 

کاربرد‌ها و استفاده‌های جاوا اسکریپت در طراحی سایت

در اینجا چند نمونه از کاربرد‌های طراحی با زبان برنامه نویسی جاوا اسکریپت را نام می‌بریم که عبارت‌اند از:

ساختن جعبه‌های تایید (Confirmation Boxes)

یکی از نمونه‌های JavaScript دربخش عملی جعبه‌هایی هستند که روی صفحه مانیتور کامیپیوتر شما ظاهر می‌شوند. به آخرین باری که اطلاعات خود را به فرم آنلاین وارد کرده‌اید فکر کنید و یک جعبه تأیید یا همان (Confirmation Boxes) ظاهر می‌شود و از شما می‌خواهد OK یا Cancel را فشار دهید. این موضوع به دلیل وجود جاوا اسکریپت در سایت یا سیستم شما است و کدی که روی صفحه مانیتور شما ظاهر می‌شود به این شکل است (if … other …) که به رایانه می‌گوید اگر کاربر روی (OK) کلیک کرد، یک کار را انجام دهد و اگر کاربر روی لغو کلیک کرد کار دیگری انجام دهد.

 

ذخیره اطلاعات جدید

طبق تصمیماتی که کاربر هنگام بازدید از صفحه می‌گیرد، JavaScript برای تشخیص هویت‌های جدید به عناصر وب سایت بسیار کارآمد و مفید است. به عنوان مثال: بیایید بگوییم که شما در حال ایجاد یک صفحه هستید با فرمی که می‌خواهید، با گرفتن اطلاعات در مورد بازدیدکننده وب سایت منجر به ایجاد نشانه‌ها می‌شود. شما ممکن است یک قسمت در JavaScript اختصاص دهید که به نام اول کاربر توجه داشته باشید.

JavaScript یکی از محبوب‌ترین زبان‌های برنامه نویسی در جهان است. همراه با HTML و CSS، جاوا اسکریپت یکی از سه فناوری اساسی است که تقریباً همه وب سایت‌ها به آن اعتماد دارند.

 

 

در حالی که HTML زبانی است که برای اختصاص معنی به هر بیت از محتوای وب سایت استفاده می‌شود و CSS زبانی است که برای قالب‌بندی و چیدمان عناصر HTML مورد استفاده قرار می‌گیرد، JavaScript رفتار را به صفحه وب می‌افزاید.

ما فقط از JavaScript در بعضی مواقع برای دستکاری در مقدار ویژگی صفحه نمایش استفاده می‌کنیم، اما این کار تقریباً برای هر ویژگی CSS قابل اجرا است. ما می‌توانیم از JavaScript برای تغییر تصاویر یا رنگ پس زمینه یا هرآنچه که کاربر می‌خواهد و بیشتر مایل به دیدن آن بخش است استفاده کنیم.

اگرچه ممکن است جالب به نظر برسد، دستکاری CSS تنها کاری نیست که جاوا اسکریپت بتواند انجام دهد. ما همچنین می‌توانیم به این بخش شمارش معکوس اضافه کنیم به طوری که هر بار که کاربر دکمه شمارش معکوس را فشار می‌دهد، هر تاریخی که مد نظرش باشد نزدیک‌تر می‌شود. با مراجعه به کد، یک دکمه با شناسه countDownButton و countclown و onclick اضافه خواهد شد.

 

طراحی وب سایت با جاوا چگونه است

جاوا یک زبان برنامه نویسی سطح بالا است که ابتدا توسط Sun Microsystems ساخته شده و در سال ۱۹۹۵ منتشر شد. جاوا بر روی سیستم عامل‌های مختلفی مانند Windows ،Mac،IOS و نسخه‌های مختلف UNIX اجرا می‌شود. این آموزش درک کاملی از جاوا به شما می‌دهد.

این مرجع ضمن یادگیری زبان برنامه نویسی جاوا، شما را با رویکردهای ساده و عملی آشنا می‌کند.

اولین سوالی که ممکن است ذهن شما را درگیر کند این است که چرا اصلا ما باید زبان برنامه نویسی جاوا را یاد بگیریم؟ جاوا برای دانشجویان و متخصصان شاغل یک مهندس نرم افزار عالی است، بخصوص وقتی که در حوزه توسعه نرم افزار کار می‌کنید ، جاوا بهترین همکار شما می‌شود.

 

 

نمونه‌های برتر طراحی سایت با جاوا اسکریپت

جاوا اسکریپت سیستم عامل‌هایی را ایجاد می‌کند که می‌توانند کاربر را درگیر خود کنند و از یادآوری سایت شما و بررسی مجدد آنها اطمینان حاصل کند. می‌توان از جاوا اسکریپت برای ایجاد بازی‌ها، API ها، قابلیت پیمایش و موارد دیگراستفاده کرد.

اینترنت پر از موارد الهام بخش طراحی وب سایت است، از جمله نمونه‌های بسیار خوبی از JavaScript که برای ایجاد وب سایت و ارائه تجربیات عالی کاربر استفاده می‌شود. در اینجا ما برای الهام بخشیدن به برخی از نمونه‌های مختلف جاوا اسکریپت را انتخاب می‌کنیم.

این نمونه‌های برتر آموزش طراحی سایت با جاوا اسکرپت عبارت‌اند از:

• Histography
• Filippo Bello
• The St. Louis Browns
• Leg Work Studio
• IBM Design

آموزش طراحی وب سایت با جاوا

طراحی وب با جاوا (Java) تمام فناوری‌های مهم و بسیار مورد نیاز مانند (Xhtml ،CSS ،Java Script ،JQuery ،Adobe Photoshop CS6 ،Bootstrap ،Dreamweaver) طرح‌بندی‌های مختلف و انواع پروژه را در برمی‌گیرد. در موسسه ما (مکتب خونه) به شما در زمینه توسعه وب سایت‌های (استاتیک و پویا) آموزش می‌دهیم. برای توسعه و طراحی وب سایت سمت سرور، می‌توانید PHP ،Java یا Net را بیاموزید. شما به راحتی با مراجعه به بخش آموزش جاوا اسکریپت می‌توانید از دوره‌های شگفت‌انگیز ما بهره‌مند شوید.

 

 

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

• HTML: برای قالب‌بندی صفحات وب به کمک برچسب‌های مختلف نیز تعریف ساختار اسناد استفاده می‌شود.
• CSS: این یک زبان طراحی است که فرآیند ارائه صفحات وب را ساده می‌کند.
• JavaScript: این یک زبان برنامه نویسی کامپیوتر پویا است. جاوا اسکریپت وب سایت را را به منظور تعامل با کاربر و ایجاد صفحات پویا پیاده‌سازی می‌کند.

 

 

آموزش قدم به قدم طراحی وب سایت با (CSS and JavaScript)

در این بخش سعی می‌کنیم به شما به صورت قدم به قدم آموزش دهیم که بتوانید با استفاده از (CSS and JavaScript) وب سایت خود را طراحی کنید.
توجه داشته باشید که روش‌های نشان داده شده در این آموزش برای افزودن پرونده‌های CSS و JavaScript به یک صفحه وب، مختص صفحات GitHub نیست. این روش‌ها برای هر وب سایت و هر وب سایت میزبانی (GitHub ، GitLab ، BitBucket و …) کار خواهند کرد.

بدون تبلیغ بیشتر، بیایید شروع کنیم!

• ابتدا کد زیر را در index.html اضافه کنید:

 

<!DOCTYPE html>
<html>
<head>
<title>My webpage!</title>
</head>
<body>
<h1>Hello, World!</h1>
<h4 id='date'></h4>
</body>
</html>

افزودن JavaScript به صفحه وب سایت

در مرحله بعدی یاد خواهیم گرفت که چگونه می‌توان جاوا اسکریپت را در یک پرونده جداگانه به صورت index.html وارد کرد. پوشه‌ای بنام javascript ایجاد کنید. در داخل آن پوشه، فایلی با نام index.js ایجاد کنید. در داخل این فایل JavaScript، خط زیر را اضافه کنید:

 

document.getElementById('date').innerHTML = new Date().toDateString();

 

• سپس در برچسب (head) در index.html کد زیر را اضافه کنید:

 

<script async src="./javascript/index.js"></script>

 

سپس برای بارگذاری کد JavaScript در صفحه وب یک برچسب (script) را در صفحه index.html اضافه کنید. ویژگی src برچسب (script) را روی (javascript/index.js) تنظیم می‌کنیم. این کار به مرورگر می‌گوید پرونده (index.js) را که در پوشه (javascript) قرار دارد را بارگیری کند. این کار به صورت غیر همزمان اتفاق می‌افتد و سپس کد JavaScript اجرا می‌شود و تقریباً بلافاصله صفحه وب را بروز می‌کند. اکنون که ما به وب سایت JavaScript اضافه کردیم، اجازه می‌دهیم مقداری CSS اضافه کنیم.

افزودن CSS به صفحه وب

ابتدا پوشه‌ای بنام (style) ایجاد کنید. در داخل این پوشه، فایلی با نام (styles.css) ایجاد کنید. کد زیر را در (style.css) بنویسید یا جایگذاری کنید:

 

body {
text-align: center;
background-color: #f0e8c5;
}

 

اکنون به پرونده (index.html) برگردید و برچسب link زیر را در زیر برچسب head درست بالای برچسب script که در قسمت آخر اضافه کردیم اضافه کنید:

 

<link rel="stylesheet" href="styles/styles.css" />

 

اکنون صفحه ‘index.html ‘ را در مرورگر خود تازه کنید. ما سبک‌ها یا (style) را با موفقیت به صفحه وب اضافه کردیم! با نگاهی به کدی که به ‘style.css ‘ اضافه کردیم، می‌بینید که متن را محور قرار دادیم و یک رنگ پس زمینه براق را به قسمت body صفحه وب اضافه کردیم. سپس یک برچسب <link > را با ویژگی rel = “stylesheet” به “index.html ” اضافه کردیم. این کاربه مرورگر می‌گوید ما سبک‌های CSS را از یک پرونده جداگانه بارگیری می‌کنیم.
ما همچنین ویژگی href = “styles / styles.css” را اضافه کردیم. این به مرورگر می‌گوید سبک‌هایی که می‌خواهیم اضافه کنیم در پرونده “styles.css ” قرار دارد که در پوشه “سبک‌ها” قرار دارد.

چند سبک CSS به وب سایت اضافه کنید

محتوای صفحه ‘index.html ‘ خود را با کد زیر جایگزین کنید:

 

<!DOCTYPE html>
<html>
<head>
<title>My webpage!</title>
<link rel="stylesheet" href="styles/styles.css" />
<script async src="./javascript/index.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<h4 id='date'></h4>

<div class="image-section">
<div class="section-style">
<img src="https://source.unsplash.com/random/400x200" alt="" />
<p>A random image courtesy of unsplash.com.</p>
</div>

<div class="section-style">
<img src="https://source.unsplash.com/random/400x200" alt="" />
<p>A random image courtesy of unsplash.com.</p>
</div>
</div>

<div class="image-section">
<div class="section-style">
<img src="https://source.unsplash.com/random/400x200" alt="" />
<p>A random image courtesy of unsplash.com.</p>
</div>

<div class="section-style">
<img src="https://source.unsplash.com/random/400x200" alt="" />
<p>A random image courtesy of unsplash.com.</p>
</div>
</div>
</body>
</html>
همچنین محتویات "styles.css " را با کد زیر جایگزین کنید:
body {
text-align: center;
background-color: #f0e8c5;
}

div {
margin-top: 15px;
}

.image-section {
display: flex;
justify-content: center;
}

.section-style {
margin-right: 25px;
margin-left: 25px;
background-color: white;
}

 

خب کار ما در این قسمت تمام می‌شود و شما دیگر می‌توانید برای خود وب سایت طراحی کنید و وارد کسب و کار طراحی وب سایت شوید.