آیا زبان برنامه نویسی سی شارپ ارزش یادگیری را دارد؟

 

آموزش سی شارپ

 

آیا زبان برنامه نویسی سی شارپ ارزش یادگیری در سال 2022 را دارد؟ زبان C# در هر پلتفرمی از جمله دسکتاپ، آنلاین، فناوری های آینده، بازی ها و خدمات ادغام شده است. بنابراین، قطعاً باید همین الان سی شارپ را مطالعه کنید، زیرا بهترین شانس ورود به بازار کار را به شما می دهد و همچنان که در حرفه خود پیشرفت می کنید، شما را فعال نگه می دارد.

زبان C# در سال 2022 ارزش یادگیری را دارد زیرا این زبان برنامه نویسی اصلی است که به هر زبان برنامه نویسی سطح بالاتر کمک می کند. نه تنها از سی شارپ می توان برای ساخت برنامه های کاربردی ویندوز استفاده کرد، بلکه می توانیم برنامه هایی بسازیم که سیستم عامل های لینوکس، MacOS، iOS و Android را هدف قرار دهند.

اگر قبلاً در زمینه برنامه نویسی پیشینه دارید، می توانید انتظار داشته باشید که بین 2 تا 3 ماه زمان برای یادگیری اصول برنامه نویسی سی شارپ داشته باشید. از سوی دیگر، ایجاد مهارت ها و دانش مورد نیاز برای به دست آوردن شغل به عنوان یک توسعه دهنده، حدود 1 تا 2 سال تمرین نیاز خواهد داشت.

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

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

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

زبان های برنامه نویسی سی شارپ

C#- تلفظ سی شارپ - یک زبان برنامه نویسی همه منظوره، سطح متوسط و شی گرا است که در سال 2000 توسط مایکروسافت ایجاد شد. C# توسط Anders Hejilsbergطراحی شده است تا بخشی از ابتکار .Netباشد. نسخه فعلی آن 9.0 است که به عنوان بخشی از .NET 5.0 در سال 2020 منتشر شد. در ابتدا قرار بود این زبان Cool نامیده شود که مخفف زبان شی گرا شبیه به C است. این زبان شباهت هایی با زبان های دیگر از جمله C، C++، و شاید بحث برانگیزترین، جاوا دارد.

سی شارپ به نحوی مشابه سایر زبان‌های نوع Cمتکی است و از قوانین نحوی آشنا مانند استفاده از نقطه ویرگول برای عبارات پایانی، پرانتزهای فرفری برای عبارات گروهی، براکت‌های مربع برای اعلام (و دریافت داده‌ها از) آرایه‌ها و استفاده از علامت تساوی (=) استفاده می‌کند.

چه نرم افزاری می توانید با آن بسازید؟

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

یکی از کاربردهای بسیار محبوب سی شارپ در توسعه بازی های ویدیویی هم برای رایانه های شخصی و هم برای کنسول های بازی ویدیویی است. در واقع این زبان انتخابی واقعی برای توسعه دهندگان بازی است. بخشی از جذابیت در این عرصه به این موضوع مربوط می شود که موتور بازی یونیتی بر روی C++ و C# ساخته شده است. به همین دلیل، سی شارپ کاملاً با موتور بازی ادغام می‌شود، موتوری که برای ساخت بسیاری از برترین بازی‌های ویدیویی در جهان امروز استفاده می‌شود.

از آنجایی که سی شارپ بسیار شبیه به C++ است، آموزش C++ را برای برنامه نویسان بازیهای کامپیوتری آسان‌تر می‌کند، زبان دیگری که در جامعه گیمرها بزرگ است. بازی‌هایی که می‌توانید در سی شارپ ایجاد کنید، از پلتفرم‌ها، اسکرول‌های جانبی، بازی‌های RPG، واقعیت تغییریافته (AR)، واقعیت مجازی (VR) و همچنین بازی‌های موبایل. البته، تا حد زیادی به لطف چارچوب دات نت، برنامه های کاربردی وب حوزه دیگری هستند که C# در آن برتری دارد. در صورت تمایل می توانید از چارچوب دات نت یا از یک پلت فرم منبع باز استفاده کنید.

نوشتن برنامه های دسکتاپ یکی دیگر از نقاط قوت زبان برنامه نویسی سی شارپ هستند. به لطف کد کارآمد، مقیاس پذیری و این واقعیت که نگهداری از آن بسیار آسان است، سی شارپ یک انتخاب عالی برای ایجاد برنامه های کاربردی در آن است. در واقع، برخی از بزرگترین نام های فناوری با استفاده از این زبان ایجاد شده اند، از جمله Adobe Photoshop. Mozilla Firefox، MySQL Server و Thunderbird.

معایب برنامه نویسی سی شارپ

مانند هر زبان برنامه نویسی، سی شارپ هم خالی از اشکال نیست. بسیاری از مشکلاتی که مهندسان نرم‌افزار با سی شارپ دارند، مربوط به اولویت‌های شخصی است، مانند مشکلاتی که در مورد شی گرا بودن آن بسیار زیاد است. برخی دیگر C# را از نظر استانداردهای کدنویسی و بهترین شیوه‌ها کمی سنگین و سخت‌گیرانه می‌دانند.

سی شارپ نیز در گذشته تا حد زیادی به چارچوب دات نت متکی بود و برنامه های ساخته شده با زبان برنامه نویسی واقعاً برای آن پلتفرم یا برای اجرا در محیط ویندوز در نظر گرفته شده بودند. این امر باعث می‌شود از برخی جهات دسترسی به بازارتان را کمی محدود کنید. سی شارپ اکنون روی مک و لینوکس نیز اجرا می‌شود، بنابراین دیگر چنین مشکلی وجود ندارد. شکایت دیگر در مورد سی شارپ این است که بارگذاری آن کند است؛ هر تغییری در کد سی شارپ شما نیاز به کامپایل مجدد دارد که ممکن است کمی دردسرساز باشد.

آینده زبان برنامه نویسی سی شارپ

در حالی که سی شارپ پرکاربردترین زبان روی کره زمین نیست، اما همچنان از طرفداران زیادی برخوردار است که به طور مداوم در 20 سال گذشته افزایش یافته است. نشانه هایی وجود دارد که نشان می دهد رشد این زبان تا حدودی متوقف شده است، اما کاهش واقعی نشان نداده است.

به لطف آن، محبوبیت آن در محافل بازی، و سرمایه گذاری آن در توسعه موبایل و برنامه های وب، C# بعید است به این زودی ها به جایی برسد. چه زبان C# را به عنوان زبان اصلی خود یاد بگیرید یا به عنوان زبان دوم (یا سوم) توسعه دهنده، واقعاً اشتباه نکرده اید.

آموزش کن وس Rectangle در HTML

قبل از فکر کردن در مورد ایجاد بازی های کنشی HTML5، اجازه دهید با اساس آن شروع کنیم.
ابتدا روی دکمه ی قرمز کلیک کنید. اگر دکمه ی قرمز در بوم نقاشی نمی بینید، احتمالا تمایل داشته باشید مرورگر درستی برای ادامه بگیرید.

?

1 2 3 4 5 6 7 8 9 10

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas> ‎<button onclick="draw_square();return true;">Red Square</button> <script>     function draw_square() {     ‎  var c1 = document.getElementById("c1");     ‎  var c1_context = c1.getContext("2d");     ‎  c1_context.fillStyle = "#f00";     ‎  c1_context.fillRect(50, 50, 100, 100);     ‎} ‎</script>‎

برای کشیدن هرچیزی در بوم نقاشی، چیزی بین برچسب opening و برچسب closing از <canvas>
قرار ندهید، مرورگرهایی که بوم نقاشی را پشتیبانی می کنند، آن را نادیده خواهند گرفت. شما می توانید فقط از جاوااسکریپت برای انجام نقاشی خود استفاده کنید.
قانون شماره یک، عنصر بوم نقاشی شما باید دارای یک ID باشد، بنابراین می توانیم از جاوااسکریپت برای قراردادن آن استفاده کنیم. قانون شماره دو، هر بوم نقاشی دارای یک کانتکست می باشد. در واقع کانتکست بوم نقاشی آن چیزی است که قرار است روی آن نقاشی بکشیم، نه خود بوم.

?

1 2	var c1 = document.getElementById("c1");    var c1_context = c1.getContext("2d");‎

از لحاظ نگارش، نه تنها کانتکست های دو بعدی، بلکه سه بعدی آن نیز در دسترس می باشند. به هرحال کانتکست سه بعدی که webGL نامیده می شود، برای شما توسط W3G یا WHATWG آورده نمی شودبلکه توسط یک شرکت غیرانتفاعی به نام Khronos Group ارائه می شود. علاوه بر آن گوگل هم در دسامبر 2010 برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد.
اجازه دهید از رنگ قرمز (fillStyle="#f00";) استفاده کرده و یک مربع قرمز با اضلاع 100px بکشیم.

?

1 2	c1_context.fillStyle = "#f00"; c1_context.fillRect(50, 50, 100, 100);‎

 

برای ادامه مثال ها روی طراحی سایت کلیک کنید

سربرگ HTML

سربرگ HTML‏‏

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

Document declaration tag

< html>

< head>

    Document header related tags

< head>

< body>

    Document body related tags

< body>

< html>

 

این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب< head>نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:< title>, < meta>, < link>, < base>,< style>, < script >, و < noscript > tags.

 

برچسب < title> در HTML

این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.

 

نمونه یک

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Title Tag Example</title>

</head>

<body>

    <p>Hello, World!<p>

</body>

</html>

برچسب < meta> در HTML

این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

 

نمونه دو

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Title Tag Example</title>

    <!-- Provide list of keywords -->

    <meta name="keywords" content="C, C++, Java, PHP, Perl, Python">

 

    <!-- Provide description of the page -->

    <meta name="description" content="Simply Easy Learning by Tutorials Point">

 

    <!-- Author information -->

    <meta name="author" content="Tutorials Point">

 

    <!-- Page content type -->

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 

    <!-- Page refreshing delay -->

    <meta http-equiv="refresh" content="30">

 

    <!-- Page expiry -->

    <meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">

 

    <!-- Tag to tell robots not to index the content of a page -->

    <meta name="robots" content="noindex, nofollow">

</head>

<body>

    <p>Hello, World!<p>

</body>

</html>

 

برچسب < base> در HTML

این برچسب برای تعیین URL پایه برای همه ی URL های وابسته در صفحه استفاده می شود، که به این معناست که همه ی URL های دیگر هنگامی که برای آیتم ارائه شده قرار می گیرند، دیگر URL ها به URL پایه زنجیر خواهند شد.
به عنوان مثال تمام صفحات و تصاویر ارائه شده، پس از پیشوند دار کردن URL های ارائه شده با URL پایه مسیر prefixing جستجو خواهند شد

 

نمونه سه

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Title Tag Example</title>

    <base href="http://www.tahlildadeh.com/" />

</head>

<body>

    <img src="/banner/02.jpg" alt="Logo Images" />

    <a href="/ArticleDetails/HTML Marquees" title="HTML Tutorial">HTML Tutorial</a>

</body>

</html>

 

برچسب < link> در HTML

این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.

 

نمونه چهار

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Title Tag Example</title>

    <base href="http://www.tahlildadeh.com/" />

    <link rel="stylesheet" type="text/css" href="/css/style.css">

</head>

<body>

    <p>Hello, World!<p>

</body>

</html>

 

برچسب< style>در HTML

این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.

 

نمونه پنج

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML style Tag Example</title>

    <base href="http://www.tahlildadeh.com/" />

    <style>

        .myclass {

            background-color: #aaa;

            padding: 10px;

        }

    </style>

</head>

<body>

    <p class="myclass">Hello, World!<p>

</body>

</html>

جهت مشاهده نمونه مثال ها برروی دوره آموزش طراحی سایت کلیک نمایید.

 

آموزش لینک های عکس در html

آموزش طراحی سایت-آموزش لینک های عکس در html

آموزش Image Link

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

 مثال:

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

 

نمونه یک

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Image Hyperlink Example</title>
</head>
<body>
    <p>Click following link</p>
    <a href="http://www.tahlildadeh.com" target="_self">
        <img src="http://tahlildadeh.com/banner/012.jpg" alt="tahlildadeh" border="0" />
    </a>
</body>
</html>

این ساده ترین راه ایجاد هایپرلینک با استفاده از تصاویر می باشد.

 

تصاویر حساس به ماوس

استانداردهای HTML و XHTML یک ویژگی ارائه می دهند که به شما اجازه می دهد لینک های مختلفی را در داخل یک تصویر اجرا کنید. شما می توانید براساس مختصات مختلف موجود روی تصویر، لینک های مختلفی را روی یک تصویر مجزا ایجاد کنید. زمانی که لینک های متفاوت به مختصات متفاوت ضمیمه می شود، می توانیم برای باز کردن داکیومنت های تارگت روی بخش های مختلف تصویر کلیک کنیم. چنین تصاویری که به ماوس حساس می باشند، تصاویر نقشه نامیده میشوند. دو روش برای ایجاد چنین تصاویری وجود دارد.

 

• Server-side image maps - توسط ویژگی ismap از برچسب < img> فعال می شود و دستیابی به یک سرور و پردازش برنامه های مربوط به تصویر نقشه لازم می باشد.
•  Client-side image maps - با استفاده از ویژگی usemap از برچسب < img> همراه با برچسب های متناظر< map> و < area> ایجاد می شود.

Server side image maps

آموزش html css

در اینجا به سادگی تصویر خود را داخل یک هایپرلینک قرار داده و از ویژگی ismap استفاده کنید که آن را یک تصویر خاص می سازد و وقتی یوزر در بخشی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را همراه با URL مشخص شده در برچسب < a>به سرور وب منتقل می کند. سرور از مختصات اشاره گر ماوس استفاده می کند تا تعیین کند کدام داکیومنت باید به مرورگر بازگردانده شود.
زمانی که ismap استفاده می شود، ویژگی href از برچسب < a> باید URL یک برنامه ی سرور را مانند یک cgi یا اسکریپت PHP و غیره در برداشته باشد، تا درخواست ورودی را براساس مختصات انتقال داده شده پردازش کند. مختصات موقعیت ماوس پیکسل های صفحه میباشند که از گوشه ی بالای سمت چپ تصویر شمرده می شوند و با (0,0) شروع می شوند. مختصات دنبال شده با یک علامت سوال، به انتهای URL اضافه می شوند.

 مثال:

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>ISMAP Hyperlink Example</title>
</head>
<body>
    <p>Click following link</p>
    <a href="http://tahlildadeh.com/Temp/Html/Exp1.html" target="_self">
        <img ismap src="http://tahlildadeh.com/Temp/Html/logo.png" alt="tahlildadeh" border="0" />
    </a>
</body>
</html>

 

سپس مرورگر پارامترهای جستجوی زیر را به سرور می فرستد که می تواند توسط اسکریپت ismap.cgi یا فایل map پردازش شود و شما می توانید هر داکیومنتی را که دوست داشته باشید به این مختصات لینک کنید.

 

/cgi-bin/ismap.cgi?20,30

از این طریق شما می توانید لینک های مختلفی را به مختصات متفاوت یک تصویر اختصاص دهید، و وقتی این مختصات کلیک می شوند، می توانید داکیومنت های لینک شده ی متناظر را باز کنید.

 

 توجه:

شما برنامه نویسی CGI را زمانی فراخواهید گرفت که برنامه نویسی perl را مطالعه کنید. می توانید اسکریپت خود را بنویسید تا این مختصات انتقال داده شده را با استفاده از PHP یا هر اسکریپت دیگری پردازش کنید. فعلا اجازه بدهید روی یادگیری HTML تمرکز کنیم، می توانید این فصل را بعدا بازبینی کنید.

Client side image maps

این تصاویر به وسیله ی ویژگی usemap از برچسب < img> فعال می شوند و به وسیله ی برچسب های ضمیمه ی< map>و< area> تعریف می شوند.
نقشه ای که قرار است نقشه را طراحی کند، به وسیله ی< img> به عنوان یک تصویرعادی وارد صفحه می شود، به جز اینکه این مورد ویژگی اضافه ای به نام usemap همرا خود دارد. مقدار ویژگی usemap مقداری می باشد که در یک برچسب< map>استفاده می شود تا برچسب های تصویر و نقشه را لینک کند.< map>همراه با برچسب های< area> همه ی مختصات تصویر و لینک های مربوطه را تعریف می کند.
برچسب< area> در داخل برچسب نقشه مختصات و شکل حاشیه های قابل کلیک در داخل تصویر را تعریف می کند. در اینجا مثالی از تصویر نقشه می بینید.

 

نمونه سه

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <img src="http://tahlildadeh.com/banner/012.jpg" width="250" height="150" alt="Tahlildadeh" usemap="#planetmap">

    <map name="planetmap">

        <area shape="rect" coords="0,0,40,126"  href="http://tahlildadeh.com/banner/02.jpg">
        <area shape="circle" coords="90,58,20"  href="http://tahlildadeh.com/banner/04.jpg">
        <area shape="circle" coords="124,78,20"  href="http://tahlildadeh.com/banner/05.jpg">
    </map>
</body>
</html>

 

سیستم مختصات

مقدار حقیقی مختصات کانلا به شکل در سوال وابسته است. در اینجا خلاصه ای می بینید که قرار است با مثال های مفصل دنبال شوند.

 

 

rect = x1 , y1 , x2 , y2

x1 و y1 مختصات گوشه ی بالای سمت چپ از مستطیل می باشد. x2 و y2 مختصات گوشه ی سمت راست پایین می باشند.

 

circle = xc , yc , radius

 

xc و yc مختصات مرکز دایره و radius شعاع دایره می باشد. دایره ای به مرکز200,50 با شعاع 25 دارای ویژگی coords="200,50,25" خواهد بود.

 

poly = x1 , y1 , x2 , y2 , x3 , y3 ,... xn , yn

 

جفت های مختلف x-y رئوس چند ضلعی می باشند، با یک خط که از یک نقطه به نقطه ی دیگر کشیده شده. یک چندضلعی لوزی شکل با بالاترین راس آن در نقطه ی 20،20 و 40 پیکسل، در عریض ترین نقطه ی خود دارای ویژگی coords="20,20,40,40,20,60,0,40" می باشد.
تمام مختصات مربوط به بالاترین گوشه ی سمت چپ تصویر می باشند. هر شکل دارای یک URL مربوطه می باشد. می توانید از هر نرم افزار تصویری برای دانستن مختصات موقعیت های مختلف استفاده کنید.

 

آموزش طراحی سایت - آموزش ساخت جدول در html

آموزش Table در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.

 مثال:

نمونه یک

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Tables</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

ویژگی های colspan و rowspan

اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.

 مثال:

نمونه سه

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Colspan/Rowspan</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
        <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
        <tr><td colspan="3">Row 3 Cell 1</td></tr>
    </table>
</body>

</html>

 

پس زمینه ی جدول

می توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید.

 

• ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
• ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.

همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.

 مثال:

نمونه چهار

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Background</title>
</head>
<body>
    <table border="1" bordercolor="green" bgcolor="yellow">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
        <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
        <tr><td colspan="3">Row 3 Cell 1</td></tr>
    </table>
</body>
</html>

در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.

 

نمونه پنج

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Background</title>
</head>
<body>
    <table border="1" bordercolor="green" background="/images/test.png">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
        <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
        <tr><td colspan="3">Row 3 Cell 1</td></tr>
    </table>
</body>
</html>

آموزش html css

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.

 مثال:

نمونه شش

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Width/Height</title>
</head>
<body>
    <table border="1" width="400" height="150">
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.

 مثال:

نمونه هفت

    <title>HTML Table Caption</title>

    <table border="1" width="100%">
        <caption>This is the caption</caption>
        <tr>
            <td>row 1, column 1</td>
            <td>row 1, columnn 2</td>
        </tr>
        <tr>
            <td>row 2, column 1</td>
            <td>row 2, columnn 2</td>
        </tr>
    </table>
 

تیتر، بدنه و پاورقی جدول

جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از

 

• < thead> - برای ایجاد یک تیتر مجزا
• < tbody>- برای نشان دادن بدنه ی اصلی جدول
• < tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول

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

 مثال:

نمونه هشت

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table</title>
</head>
<body>
    <table border="1" width="100%">
        <thead>
            <tr>
                <td colspan="4">This is the head of the table</td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="4">This is the foot of the table</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</body>
 

جدول های تودرتو

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

شما می توانید از یک جدول در داخل جدولی دیگر استفاده کنید. نه تنها جدول ها، بلکه می توانید تمام برچسب ها را در داخل برچسب داده ی استفاده کنید.

 مثال:

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

 

<a class="btn btn-danger" href="/Try/441/9" target="_blank">امتحان کنید</a><p> </p><p class="MsoNormal" style="unicode-bidi: embed; direction: rtl; margin: 0in 0in 10pt; line-height: 17pt;" dir="rtl"><span style="line-height: 18pt; mso-bidi-language: fa;" lang="FA"><span style="font-size: 12pt; color: #000000;">    

  <br></span></span></p><div class="row" style="padding-top: 10px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul class="bookMoreInfo">
                           
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                               
<span class="VisitCountHolder">
      
<span class="fa fa fa-eye"> </span>
<span id="BodyContent2_UVVisitCount1_VisitCountSeparator" class="VisitCountSeparator"> </span>
<span id="BodyContent2_UVVisitCount1_VisitCountCount" class="VisitCountNumber">1945</span>
</span>
                        </li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<em class="fa fa-download"> </em>  
<span id="BodyContent2_Lbl_dlcount">424</span>
                        </li>
   
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">تاریخ ارسال:  
<span id="BodyContent2_Lbl_createdate">1394/07/27</span>
                        </li>
   
                    </ul>
                </div>
   
            </div><div id="BodyContent2_dlPDF">
   
   
<div class="row" style="padding-top: 10px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <!--
                            .UserPassTable tr td {
                                text-align: right;
                                background-color: transparent !important;
                                color: #604e44;
                            }
   
                            .UserPassTable a {
                                color: #604e44 !important;
                            }
   
   
   
                            @media only screen and (max-width: 950px) {
                                .UserPassTable tr td {
                                    display: block;
                                    width: 100%;
                                    padding-right: 5px;
                                }
   
                                    .UserPassTable tr td::before, .UserPassTable tr td::after {
                                        content: " " !important;
                                        width: 0px;
                                    }
   
                                table.UserPassTable td:nth-of-type(1)::before {
                                    content: " " !important;
                                    width: 0px;
                                }
   
                                .UserPassTable tr td:nth-child(2n+1), .UserPassTable tr:last-child td:nth-child(2) {
                                    background-color: #239ead;
                                    color: white;
                                }
   
                                .UserPassTable tr td:nth-child(2n), .UserPassTable tr:nth-child(3) td:nth-child(1) {
                                    background-color: #f3f8fb;
                                    color: black;
                                }
                            }
                          
-->
                        </div></div></div><table style="width: 100%;" border="1">
<tbody><tr>
<td>
<table style="width: 100%;" border="1">
<tbody><tr>
<th>Name</th>
<th>Salary</th>
                    </tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
                    </tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
                    </tr>
                </tbody></table>
            </td>
        </tr>
   

               
               
            </tbody></table><table class="table-striped table-bordered UserPassTable" style="width: 100% !important; margin: 0 !important;">
<tbody><tr>
<td class="text-center">
   
<em class="fa fa-download fa-2x text-center"> </em>
   
                                </td>
<td class="text-center">
<a id="BodyContent2_Lnk_dl" href="/UserControls/CNTDL.aspx?Type=ARTA&ID=441">
                                               
                                                      
<span class="text-fa">دریافت این مقاله بصورت PDF</span>
                                    </a>
<a id="BodyContent2_Lnk_source" href="/UserControls/CNTDL.aspx?Type=ARTS&ID=441">
                                               
                                             
<span class="text-fa">دریافت سورس کد مقاله</span>
                                    </a>
                                </td>
                            </tr>
<tr>
   
<td colspan="2">
                                       
<br>
                                    پس از دانلود فایل رمز آن را به دقت وارد نمایید .فایل ها دارای رمز عبور می باشند.
                                                   
                                </td>
                            </tr>
<tr>
<td class="text-center">
<em class="fa fa-key fa-2x"> </em>
   
                                </td>
<td class="text-danger">tahlildadeh.com
                               یا
                               www.tahlildadeh.com
                                                  
                                </td>
                            </tr>
                        </tbody></table>
<div class="ipShow">
                        </div>

ممکن است در این وبلاگ کدها نمایش داده نشود جهت مشاهده کدها برروی آموزش طراحی سایت کلیک نمایید.

آموزش طراحی سایت-دستورات شرطی در جاوا اسکریپت

امروز با پست جدیدی از سری پست های آموزش طراحی سایت همراه شما هستیم. در این پست دستورات if .. else در جاوا اسکریپت را مورد بررسی قرار می دهیم.

دستورات شرطی را به منظور انجام عملیات خاص در صورت برقرار بودن شرایط معین بکار می بریم، بدین معنا که در صورت درست بودن شرط معین دستورات و عملیات معینی اجرا شود.

 

دستورات شرطی (conditional statements)

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

دستور if - از این ساختار در مواقعی که می خواهیم در صورت بر قرار بودن شرط معینی دستور مشخصی اجرا شود، استفاده می کنیم . چنانچه شرط تعیین شده صحیح یا برقرار نبود، هیچ دستوری اجرا نخواهد شد. دستور else - از این ساختار زمانی استفاده می کنیم که می خواهیم در صورت بر قرار بودن شرط، دستور معینی اجرا شود و در صورت عدم بر قراری آن شرط، دستور یا مجموعه ای از دستورات دیگر اجرا گردند.

دستور else if : اگر شرط درست باشد دستور مقابل if اجرا می شود در غیر این صورت دستور مقابل else اجرا می گردد (در صورت غلط بودن شرط اول، شرط دیگری را برای امتحان کردن مشخص می کند).

دستور Switch : برای گزینش و اجرای یک دستور از میان چندین دستور مختلف بکار می رود.

 

دستور شرطی if

از این ساختار در مواقعی که می خواهیم در صورت بر قرار بودن شرط معینی دستور مشخصی اجرا شود، استفاده می کنیم. چنانچه شرط تعیین شده صحیح یا برقرار نبود، هیچ دستوری اجرا نخواهد شد.

 

آموزش طراحی سایت دستور نگارش (syntax)

نکته:

توجه داشته باشید که دستور شرطی if با حروف کوچک نوشته می شود. نوشتن آن با حروف بزرگ If یا IF باعث ایجاد خطا می شود.

مثال:

در صورتی که زمان هنوز مرز ساعت 18:00 را رد نکرده، رشته ی "Good day" را نشان بده.

if (hour < 18)

{

greeting = "Good day";

‎}

 

نمونه یک

if (new Date().getHours() < 18) {

document.getElementById("demo").innerHTML = "Good day!";

}

 

امتحان کنید:

 

 

Display "Good day!" if the hour is less than 18:00:

 

 

Good Evening!

 

 

if (new Date().getHours() < 18) {

document.getElementById("demo").innerHTML = "Good day!";

}

 

 

 

دستور شرطی else

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

دستور if (شرط) { قطعه کدی که در صورت برقرار بودن شرط باید اجرا گردد

دستور } else {

قطعه کدی که در صورت غلط یا برقرار نبودن شرط اول اجرا می گردد {

اگر زمان از مرز ساعت 18 نگذشته، رشته ی "Good day" را نشان بده و در غیر این صورت "Good evening" را

if (hour < 18) {

‎ greeting = "Good day";

‎} else {

‎ greeting = "Good evening";

‎}‎

نتیجه:

 

نمونه دو

function myFunction() {

var hour = new Date().getHours();

var greeting;

if (hour < 18) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

document.getElementById("demo").innerHTML = greeting;

}

 

امتحان کنید:

body>

 

Click the button to display a time-based greeting:

 

Try it

 

 

 

 

function myFunction() {

var hour = new Date().getHours();

var greeting;

if (hour < 18) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

document.getElementById("demo").innerHTML = greeting;

}

 

 

 

دستور شرطی else if

اگر شرط درست باشد دستور مقابل if اجرا می شود در غیر این صورت دستور مقابل else اجرا می گردد (در صورت غلط بودن شرط اول، شرط دیگری را برای امتحان کردن مشخص می کند).

 

دستور نگارش

دستور if (شرط اول) { قطه کدی که در صورت صحیح بودن شرط اول باید اجرا گردد

دستور } else if (شرط دوم) { قطعه کدی که در صورت غلط بودن شرط اول و صحیح بودن شرط دوم باید اجرا شود

دستور } else { قطعه کدی که در صورت غلط بودن هر دو شرط اول و دوم باید اجرا شود }

مثال:

در صورتی که زمان حاضر مرز ساعت 10:00 را پشت سر نگذاشته، رشته ی "Good morning" نمایش داده می شود و چنانچه زمان از ساعت 20:00 عبور نکرده رشته ی "Good day" و در غیر این صورت نیز "Good evening".

if (time < 10) {

‎ greeting = "Good morning";

‎} else if (time < 20) {

‎ greeting = "Good day";

‎} else {

‎ greeting = "Good evening";

‎}‎

نتیجه:

 

نمونه سه

function myFunction() {

var greeting;

var time = new Date().getHours();

if (time < 10) {

greeting = "Good morning";

} else if (time < 20) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

document.getElementById("demo").innerHTML = greeting;

}

 

امتحان کنید:

 

 

 

Click the button to get a time-based greeting:

 

 

Try it

 

 

 

 

 

 

function myFunction() {

var greeting;

var time = new Date().getHours();

if (time < 10) {

greeting = "Good morning";

} else if (time < 20) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

document.getElementById("demo").innerHTML = greeting;

}

 

آموزش طراحی سایت ادامه دارد

 

آموزش طراحی سایت-آموزش افزونه اسلایدر در جی کوئری

سلام بر دوستان عزیزم..

امروز با یک مقاله دیگه از سری مقاله های آموزش طراحی سایت همراه شما هستیم. مقاله امروز برای دوستانی کاربردیست که با جی کوئری آشنایی داشته باشند؛ چون قرار همراه با هم یکی از افزونه های (پلاگین های) جی کوئری تحت عنوان SlideBars رو یاد گرفته و بکار بگیریم..

افزونه Slidebars در jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت مورد استفاده قرار می گیرد. Slidebars 2 دارای ویژگی های هیجان انگیز و پرکاربردی است.

برای استفاده از این افزونه لازم است پیش از هر کاری فایل های css و js مورد نیاز را به پروژه اضافه کنیم :

< link href="css/slidebars.css" rel="stylesheet" >
< script src="js/jquery.js" >< /script >
< script src="js/slidebars.js" >< /script >

 

در بخش body در صفحه Html، صفحه را به دو بخش محتوا اصلی و منو تقسیم می کنیم و محتوا دلخواه را در آنها قرار می دهیم :

< div canvas="container" >
 < h1 >welcome to my website< /h1 >
< p > introduction of slidebars.js< /p >
< p >
< button class="js-open-left-slidebar" >open left< /button >
< button class="js-close-left-slidebar" >CLOSE left< /button >
< button class="js-toggle-left-slidebar" >toggle left< /button >
< /p >
< /div >
< div off-canvas="slidebar-1 left shift" >
< p >menu left< /p >
< /div >

 

جهت و مدل باز و بسته شدن منو، با استفاده از پارامتر off-canvas مشخص می شود. قطعه کد جی کوئری را برای فراخوانی افزونه اسلایدر در جی کوئری، بصورت زیر می نویسیم :

$ (document).ready(function(){
var controller = new slidebars();
controller.init();

 

بعد از ایجاد یک نمونه جدید از شی، برای رویداد کلیک روی دکمه منو، متد باز کردن منو را اجرا می کنیم :

$ ('.js-open-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.open('slidebar-1');
})

 

با کلیک روی دکمه دارای کلاس مشخص، متد بستن منو را فراخوانی می کنیم :

$('.js-close-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.close('slidebar-1');
})

 

متد toggle، دو متد close و open را با یکدیگر اجرا می کند :

$('.js-toggle-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.toggle('slidebar-1');
})
//events

 

رویدادها

رویدادها برای ایجاد نمونه جدید، اعمال css روی منو که شامل shift و overlay ،push و reveal است، استفاده می شود و مدل رفتاری منو در زمان باز و بسته شدن را نشان می دهد. رویداد باز و بسته شدن منو نیز از جمله رویدادهای این افزونه است.

$ ( controller.events ).on( 'init', function () {
console.log( 'Init event' );
} );
$ (controller.events).on('css',function () {
console.log('css')
})
$ (controller.events).on('exit',function () {
console.log('exit')
})
$ (controller.events).on('opening',function (event,id) {
console.log('opening'+id);
})
$ (controller.events).on('opened',function (event,id) {
console.log('opened'+id);
})
$ (controller.events).on('closing',function (event,id) {
console.log('closing'+id);
})
$ (controller.events).on('closed',function (event,id) {
console.log('closed'+id);
})   

 

با آموزش های دیگر در زمینه آموزش طراحی سایت همراه ما باشید..

آموزش Jquery-مثال عملی

سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید

آموزش مثال Hello, world در Jquery

در مبحث قبلی با نحوه ی اضافه کردن jQuery به صفحه ی وب برای بهره وری از امکانات فوق العاده زیاد آن آشنا شدید. پیش از شروع به استفاده از کتابخانه ی jQuery بایستی با مفاهیم پایه ای آن آشنایی پیدا کنید و نظر خود را به مثال ساده ی زیر جلب نمایید:

نمونه یک

 

Hello, world!

 

 

$("#divTest1").text("Hello, world!");

 

همان طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند، استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:

نمونه دو

 

Hello, world!

 

 

document.getElementById("divTest2") = "Hello, world!";

 

اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery اجرای این عملیات را نیز بسیار آسان ساخته است.

 

 

آموزش طراحی سایت-آموزش متد های اعداد جاوااسکریپت

​

سلام بر دوستان عزیزم..

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

آموزش طراحی سایت : متدهای سراسری (global methods)

توابع سراسری (global functions) را می توان برای تمامی نوع داده های (data type) جاوااسکریپت بکار برد. جدول های زیر پرکاربرد ترین متدهایی که حین کار با اعداد در زبان جاوا اسکریپت کارایی دارند را با ذکر کاربرد آن فهرست می کند.

 

​

متد های مربوط به number، متدهایی هستند که می توان برای اعداد از آن ها استفاده کرد.

 

​

متد toString()

این متد یک عدد یا متغیر عددی را به عنوان رشته ی متنی بر می گرداند. متدهای مربوط به شی number را می توان برای انواع عدد بکار گرفت اعم از لفظ ها (literals)، متغیرهای عددی (variable)، عبارت های عددی (expression).

مثال یک :

    var x = 123;
    document.getElementById("demo").innerHTML =
        x.toString() + "< br>" +
       (123).toString() + "< br>" +
       (100 + 23).toS

 

متد toExponential()

رشته ی با اعداد گرد شده برمی گرداند که با قرارداد نمایی (exponential notation) نوشته شده باشد. این تابع در حقیقت یک متغیر عددی را به قرارداد نمایی (exponential notation) تبدیل می کند. یک پارامتر ورودی تعداد کاراکترهای بعد از ممیز اعشار را تعیین می کند.

مثال دو :

var x = 9.656;
document.getElementById("demo") =
x.toExponential() + "< br>" +
x.toExponential(2) + "< br>" +
 x.toExponential(4) + "< br>" +
x.toExponential(6);

پارامتر اختیاری است. در صورت مشخص نکردن پارامتر، جاوا اسکریپت عدد را گرد نمی کند.

 

متد toFixed()

رشته عددی با تعداد اعشار مشخص شده برمی گرداند.

مثال سه :

var x = 9.656;
document.getElementById("demo") =
x.toFixed(0) + "< br>" +
x.toFixed(2) + "< br>" +
x.toFixed(4) + "< br>" +
x.toFixed(6);

 

متد toPrecision()

یک رشته ی عددی با طول مشخص (تعداد کاراکتر معین) برمی گرداند.

مثال چهار :

var x = 9.656;
document.getElementById("demo").innerHTML =
x.toPrecision() + "<br>" +
x.toPrecision(2) + "<br>" +
x.toPrecision(4) + "<br>" +
x.toPrecision(6);

 

آموزش طراحی سایت : تبدیل متغیر به عدد

سه تابع در جاوا اسکریپت وجود دارد که متغیر را به عدد تبدیل می کنند.

The Number() method
The parseInt() method
The parseFloat() method

توابع بالا متدهای مختص شی number نیستند (number methods)، بلکه متدهای سراسری یا global زبان جاوا اسکریپت محسوب می شوند.

 

متد Number()

این تابع متغیرهای جاوا اسکریپت را به عدد تبدیل می کند.

مثال پنج :

document.getElementById("demo") =
Number(true) + "< br>" +
Number(false) + "< br>" +
Number(new Date()) + "< br>" +
Number("  10") + "< br>" +
Number("10  ") + "< br>" +
Number("10 6");   

 

متد parseInt()

تابع parseInt() یک رشته را تجزیه (parse) کرده و یک عدد صحیح برمی گرداند. استفاده از فاصله امکان پذیر می باشد. توجه داشته باشید که تنها عدد اول برگردانده می شود.

مثال شش :

document.getElementById("demo") =
parseInt("10") + "< br>" +
parseInt("10.33") + "< br>" +
parseInt("10 6") + "< br>" +
parseInt("10 years") + "< br>" +
parseInt("years 10"); 

چنانچه امکان تبدیل عدد مورد نظر وجود نداشته باشد، در جواب (NaN (not a number برگردانده می شود.

 

متد parseFloat()

تابع parseFloat() یک رشته را تجزیه (parse) کرده و در جواب یک عدد برمی گرداند. استفاده از فاصله مجاز می باشد. تنها اولین عدد برگردانده می شود.

مثال هفت :

document.getElementById("demo") =
parseFloat("10") + "< br>" +
parseFloat("10.33") + "< br>" +
parseFloat("10 6") + "< br>" +
parseFloat("10 years") + "< br>" +
parseFloat("years 10");

در صورت عدم امکان تبدیل عدد، (NaN (not a number برگردانده می شود.

 

متد valueOf()

یک متغیر عددی را به صورت های مختلف عدد (لفظ / literal، متغیر، عبارت عددی) برمی گرداند.

مثال هشت :

var x = 123;
document.getElementById("demo") =
x.valueOf() + "< br>" +
(123).valueOf() + "< br>" +
(100 + 23).valueOf();

در جاوا اسکریپت، یک عدد می تواند یک مقدار اولیه (typeof = number) یا یک شی (typeof = object) باشد. متد ValueOf() داخل زبان جاوا اسکریپت به منظور تبدیل اشیا یا آیجکت number به مقادیر اولیه بکار گرفته می شود، هیچ لزومی ندارد از آن در کد خود استفاده کنید.

 

با آموزش های دیگر از آموزش جاوا اسکریپت در آموزش طراحی سایت با ما همراه باشید....

​

آموزش طراحی سایت-JQuery

​

  

سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید

 

جی کوئری Jquery چیست؟

برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.

آموزش طراحی سایت : با توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع، jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار بالایی داشته باشید. تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه (plugin) پیدا کنید. قدرت و کارایی بالا، دامنه ی وسیع افزونه های پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر کتابخانه های jQuery تمایز بخشیده است.

 

آموزش طراحی سایت : آموزش انتخاب یک ویرایشگر مناسب برای jQuery

می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند. بهترین ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به یاری شما می آید.

داشتن لیستی از property ها، متدها و پارامترهای احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery یک تازه وارد هستید. در زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد: تصویر زیر توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.

​

 

​

 

این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.

 

 

آموزش استفاده از jQuery در صفحات وب

جهت استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی "Development" . نسخه ی "Production" برای وب سایت ها live و آماده می باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید مشاهده کنید خطا در کجا رخ داده است.

پس از دانلود فایل jQuery JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار ="text/javascript" src="jquery-1.5.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):

 

اکنون بخشی از صفحه ی شما به شکل زیر خواهد:

 

jQuery test

 

یک روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان (cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند، وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود. می توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید، مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد. برای نمونه، جهت اضافه کردن ویرایش jQuery 3.5.1 از سرورهای Google به صفحه ی وب مورد نظر، دستور زیر را وارد می کنید:

 

 

آموزش طراحی سایت ادامه دارد

​