تا %60 تخفیف خرید با صدور مدرک برای 4 نفر فقط تا
00 00 00

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

قیمت: 378,410 تومان

با 25% تخفیف مدرس: 283,810 تومان

با 30% تخفیف وب سایت و مدرس: 264,890 تومان

مهم: برای خریدهای بالای 100 هزار تومان باید از رمز پویا استفاده کنید و امکان خرید با رمز ایستا وجود نخواهد داشت

آموزش طراحی سایت صفر تا صد قسمت 56 : آشنایی با BOM

در قسمت پنجاه و پنجم به بررسی مبحث BOM که مخفف Browser Object Model است خواهیم پرداخت. مهمترین بخش این مبحث آشنایی با شئ window است که امکاناتی را در اختیار ما قرار می دهد که در این بخش به بررسی آن ها خواهیم پرداخت. مباحثی که در این بخش با آن ها آشنا خواهیم شد:

  1. آشنایی با شئ window و کاربردهای آن
  2. نحوه بدست آوردن طول و ارتفاع پنجره مرورگر
  3. آشنایی با قابلیت های scroll در جاوا اسکریپت
  4. ست کردن دستی میزان scroll بوسیله توابع scrollTo و ScrollBy
  5. آشنایی با تابع print برای چاپ صفحه وب
  6. آشنایی با تابع open برای باز کردن پنجره جدید بوسیله جاوا اسکریپت
  7. نحوه دسترسی به المان های صفحه باز شده بوسیله تابع open
  8. آشنایی با رویداد onscroll جهت کنترل المان ها در زمان scroll شدن صفحه
  9. مثال هایی برای نمایش دکمه goto top و ایجاد fixed navigation با استفاده از رویداد onscroll
  10. آشنایی مقدماتی با اشیاء navigator، screen، history و location

مدرس: حسین احمدی
منبع: ITpro
#bom_در_جاوا_اسکریپت #رویداد_onscroll_در_جاوا_اسکریپت #آموزش_html #آموزش_طراحی_وب #دوره_آموزشی_جاوا_اسکریپت #فیلم_آموزشی_طراحی_وب #آموزش_جاوا_اسکریپت #آموزش_css #دوره_آموزشی_طراحی_وب #فیلم_آموزشی_جاوا_اسکریپت
عنوان
1 آموزش طراحی سایت صفر تا صد قسمت 1 : مقدمه ای بر دوره 23′:39″ رایگان
2 آموزش طراحی سایت صفر تا صد قسمت 2 : ساختار HTML 32′:29″ 9,900
3 آموزش طراحی سایت صفر تا صد قسمت 3 : قالب بندی متن ها 41′:38″ 9,900
4 آموزش طراحی سایت صفر تا صد قسمت 4 : ماهیت برچسب ها در HTML 50′:55″ 11,880
5 آموزش طراحی سایت صفر تا صد قسمت 5 : استفاده از Link ها 37′:28″ 7,920
6 آموزش طراحی سایت صفر تا صد قسمت 6 : کار با تصاویر در HTML 27′:0″ رایگان
7 آموزش طراحی سایت صفر تا صد قسمت 7 : کار با جداول در HTML 36′:56″ 7,920
8 آموزش طراحی سایت صفر تا صد قسمت 8 : فرم ها و ورود اطلاعات 54′:58″ 14,810
9 آموزش طراحی سایت صفر تا صد قسمت 9 : آشنایی اولیه با CSS 48′:21″ رایگان
10 آموزش طراحی سایت صفر تا صد قسمت 10 : کار با فونت و متن در CSS 32′:47″ 9,900
11 آموزش طراحی سایت صفر تا صد قسمت 11 : بک گراند در CSS 21′:0″ 7,920
12 آموزش طراحی سایت صفر تا صد قسمت 12 : Display و Visibility در CSS 11′:39″ رایگان
13 آموزش طراحی سایت صفر تا صد قسمت 13 : مفهوم BoxModel 31′:15″ 13,860
14 آموزش طراحی سایت صفر تا صد قسمت 14 : Position ها در HTML و CSS 27′:31″ 11,880
15 آموزش طراحی سایت صفر تا صد قسمت 15 : استفاده از Pseudo Class ها 18′:36″ رایگان
16 آموزش طراحی سایت صفر تا صد قسمت 16 : ایجاد Navigation ها 16′:3″ 9,900
17 آموزش طراحی سایت صفر تا صد قسمت 17 : ایجاد منوهای کشویی با HTML 21′:48″ 9,900
18 آموزش طراحی سایت صفر تا صد قسمت 18 : ایجاد Mega Menu در CSS 9′:13″ رایگان
19 آموزش طراحی سایت صفر تا صد قسمت 19 : خاصیت Float و Layout صفحات 34′:23″ 12,830
20 آموزش طراحی سایت صفر تا صد قسمت 20 : آشنایی با Pseudo Element ها 15′:52″ رایگان
21 آموزش طراحی سایت صفر تا صد قسمت 21 : آشنایی با Grid System 1:5′:29″ 18,770
22 آموزش طراحی سایت صفر تا صد قسمت 22 : آموزش CSS Reset 6′:32″ رایگان
23 آموزش طراحی سایت صفر تا صد قسمت 23 : آموزش HTML5 34′:56″ 7,270
24 آموزش طراحی سایت صفر تا صد قسمت 24 : طراحی وب سایت خبری : بخش 1 47′:39″ 9,900
25 آموزش طراحی سایت صفر تا صد قسمت 25 : کار با فونت های شخصی در CSS 15′:57″ رایگان
26 آموزش طراحی سایت صفر تا صد قسمت 26 : طراحی وب سایت خبری : بخش 2 1:2′:1″ 13,860
27 آموزش طراحی سایت صفر تا صد قسمت 27 : طراحی وب سایت خبری : بخش 3 37′:24″ 5,940
28 آموزش طراحی سایت صفر تا صد قسمت 28 : آموزش CSS3 21′:0″ رایگان
29 آموزش طراحی سایت صفر تا صد قسمت 29 : Background و Color در CSS3 23′:45″ 7,920
30 آموزش طراحی سایت صفر تا صد قسمت 30 : آشنایی با Gradient در CSS3 17′:9″ رایگان
31 آموزش طراحی سایت صفر تا صد قسمت 31 : کار با سایه ها در CSS3 21′:25″ 10,850
32 آموزش طراحی سایت صفر تا صد قسمت 32 : کار با متن در CSS3 10′:48″ رایگان
33 آموزش طراحی سایت صفر تا صد قسمت 33 : Transform ها در CSS3 18′:2″ 8,870
34 آموزش طراحی سایت صفر تا صد قسمت 34 : محیط سه بعدی (3D) در CSS 17′:11″ 8,870
35 آموزش طراحی سایت صفر تا صد قسمت 34 : Transition در CSS3 15′:51″ رایگان
36 آموزش طراحی سایت صفر تا صد قسمت 36 : ایجاد مکعب سه بعدی (3D Cube) 20′:23″ 10,850
37 آموزش طراحی سایت صفر تا صد قسمت 37 : ایجاد Animation در CSS3 23′:28″ 9,900
38 آموزش طراحی سایت صفر تا صد قسمت 38 : Multiple Columns 16′:21″ رایگان
39 آموزش طراحی سایت صفر تا صد قسمت 39 : آشنایی با Flexbox در CSS3 18′:27″ رایگان
40 آموزش طراحی سایت صفر تا صد قسمت 40 : طراحی واکنشگرا یا Responsive 33′:35″ 17,550
41 آموزش طراحی سایت صفر تا صد قسمت 41 : تکنیک Sprite Images 20′:5″ 8,870
42 آموزش طراحی سایت صفر تا صد قسمت 42 : آشنایی با Font Awesome 19′:38″ رایگان
43 آموزش طراحی سایت صفر تا صد قسمت 43 : آشنایی با تکنیک Flipcard 13′:26″ 7,650
44 آموزش طراحی سایت صفر تا صد قسمت 44 : تکنیک Hover Effect 17′:23″ رایگان
45 آموزش طراحی سایت صفر تا صد قسمت 44: آموزش جاوااسکریپت 15′:49″ رایگان
46 آموزش طراحی سایت صفر تا صد قسمت 46 : مفاهیم اولیه جاوا اسکریپت 20′:10″ رایگان
47 آموزش طراحی سایت صفر تا صد قسمت 47 : نوع های داده و عملگرها 42′:24″ 14,810
48 آموزش طراحی سایت صفر تا صد قسمت 48 : مباحث تکمیلی نوع های داده 30′:15″ رایگان
49 آموزش طراحی سایت صفر تا صد قسمت 49 : آشنایی با حلقه ها (Loops) 21′:0″ 8,870
50 آموزش طراحی سایت صفر تا صد قسمت 50 : دستورات کنترلی if و switch 19′:31″ رایگان
51 آموزش طراحی سایت صفر تا صد قسمت 51 : آشنایی با توابع (Functions) 18′:34″ 9,900
52 آموزش طراحی سایت صفر تا صد قسمت 52 : آموزش کار با DOM 40′:16″ 16,790
53 آموزش طراحی سایت صفر تا صد قسمت 53 : آموزش کار با DOM 14′:15″ 8,870
54 آموزش طراحی سایت صفر تا صد قسمت 54 : آموزش کار با DOM 5′:31″ رایگان
55 آموزش طراحی سایت صفر تا صد قسمت 55 : آموزش کار با DOM 54′:9″ 15,840
56 آموزش طراحی سایت صفر تا صد قسمت 56 : آشنایی با BOM 28′:25″ رایگان
57 آموزش طراحی سایت صفر تا صد قسمت 57 : کار با فرم ها در JavaScript 34′:19″ 8,870
58 آموزش طراحی سایت صفر تا صد قسمت 58 : آموزش Timing Events 12′:16″ رایگان
59 آموزش طراحی سایت صفر تا صد قسمت 59 : چند مثال کاربردی JavaScript 32′:45″ 8,870
زمان و قیمت کل 26:21′:5″ 378,410
35 نظر
zahra .m

سلام استاد، وقت بخیر

از خصیصۀ scrollTop که استفاده می کنم، فقط مقدار صفر برمی گردونه.

  <style>
        body{
            background-color:gainsboro;
        }
        #container{
            width:960px;
            height:3000px;
            background-color:white;
            margin:10px auto;
            border:1px solid gray;
        }
        #scrollInfo{
            position:fixed;
            bottom:10px;
            left:100px;
            right:100px;
            height:40px;
            font-size:2em;
            text-align:center;
        }
        .bnt1{
            position:fixed;
            left:20px;
            bottom:20px;
        }
        .message{
            position:fixed;
            top:150px;
        }
        .top{
            position:fixed;
            bottom:20px;
            right:20px;
        }
    </style>
<body>
    <div id="container">
        <button class="bnt1" onclick="new function () { window.scrollBy(0, 100);}">Scroll Down</button>
        <button class="top" onclick="new function () { window.scrollTo(0, 0); }">Go to Top</button>
        <button class="message"  onclick="alert(document.body.scrollTop)">show alert</button>
    </div>
    <p id="scrollInfo"></p>
    <script>
        window.onscroll = function () {
            document.getElementById('scrollInfo').innerHTML = 'Document Scrolled ' + document.body.scrollTop;
        };
    </script>
</body>

مشکل کدم کجاست؟

حسین احمدی

سلام، وقت بخیر

در نسخه های جدید chrome و firefox دیگه از body نمیتونید استفاده کنید، باید از documentElement به صورت زیر استفاده کنید:

document.getElementById('scrollInfo').innerHTML = 'Document Scrolled ' + document.documentElement.scrollTop;
zahra .m

استاد برای اینکه nav رو طوری تعریف کنم که با transition، در محور X ها تمام صفحه بشه باید چه کدی رو بنویسم؟

حسین احمدی

برای تمام صفحه شدن کافیه مقدار width رو برابر 100% قرار بدید. ولی با transition رو بیشتر توضیح بدید.

zahra .m

مثلا برای مثالی که داخل این درس زدید که وقتی scroll به یه مقدار معینی رسید، پهنای menu bar به صورت تمام صفحه بشه، منظورم اینه که با استفاده از style دهی خصیصۀ transition در بخش script، کاری کنیم که این روند تبدیل شدن به تمام صفحه بصورت انیمیشن وار انجام بشه.طی مدت زمانی مثلاً 1 ثانیه ای.

Gelareh Soluki
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <style>

        body{
            height:2000px;
        }

        *{
            margin:0;
            padding:0;
        }


        #down{
            position:fixed;
            bottom:20px;
            right:20px;
        }


        #top{
            position:fixed;
            left:20px;
            bottom:20px;
           
        }

        nav{
            background-color:deepskyblue;
            height:70px;
            width:100%;
        }
        nav .nav{
            position:fixed;
            left:0;
            top:0;
            right:0;
        }

        nav ul{
            list-style:none;
        }

        nav ul li{
            display:inline-block;
        }

        nav ul li a{
            display:inline-block;
            text-decoration:none;
            color:white;
            padding:0 10px;
            line-height:70px;
        }

        #pixel{
            position:fixed;
            bottom:20px;
            left:55px;
            right:55px;
            font-size:1.5em;
            text-align:center;
        }

    </style>
</head>
<body>
    
    <nav class="nav">
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">News</a>
            </li>
            <li>
                <a href="#">POS systems</a>
            </li>
        </ul>
    </nav>

    
    <button id="down" onclick="scrolldown();">Scroll Down</button>
    <button id="top" onclick="scrollup();">Go Top</button>
    <p id="pixel">

    </p>

    <script>

        function scrolldown() {
            window.scrollBy(0, 160);
        }

        function scrollup() {
            window.scrollTo(0, 0);
        }

        window.onscroll = function () {
            document.getElementById('pixel').innerHTML = 'Pixel' + document.documentElement.scrollTop;

            if (document.documentElement.scrollTop >300) {
                document.getElementById('top')[0].style.display = 'inline-block';
            }
            else {
                document.getElementById('top')[0].style.display = 'none';
            } 
        };
       
    </script>
</body>
</html>

Gelareh Soluki

سلام استاد اینجا چرا button با id =top

در حالت عادی display = none!

نیست

دستور من کار نمیکنه میشه راهنمایی کنید مرسی!

حسین احمدی

سلام، وقت بخیر

مشکل اینجاست که شما وقتی از getElementById استفاده می کنید دیگه نباید مثل آرایه باهاش رفتار کنید، یعنی دیگه نیازی به مشخص کردن اندیس نیست، چون getElementById فرض میکنه که شما فقط یک المان با Id مشخص شده دارید. کد بالا رو به صورت زیر تغییر بدید (فقط بخشی که در زیر اومده):

            if (document.documentElement.scrollTop >300) {
                document.getElementById('top').style.display = 'inline-block';
            }
            else {
                document.getElementById('top').style.display = 'none';
            } 

مشخص کردن اندیس برای زمانی هست که از getElementsByClassName استفاده می کنید که نتیجه خروجی یک آرایه هست.

Gelareh Soluki

بله متوجه شدم

مرسی که جواب میدید

Gelareh Soluki

سلام استاد

این کد رو میشه بگید چه مواقعی متغیر رو داخل پرانتز اونطوری مینویسن

نمیتونم بخونم

var slideIndex = 1;
showSlides(slideIndex);
Gelareh Soluki

و اینکه این اعداد یعنی چی

onclick="plusSlides(-1)
حسین احمدی

سلام، وقت بخیر

در مورد سوال اولتون، زمانی که شما نام یک متغیر رو به عنوان پارامتر یک تابع استفاده می کنید، مقدار اون متغیر که داخل کد شما عدد 1 هست به عنوان مقدار پارامتر ارسال میشه. تو قمست اول منظور رفتن به اسلاید شماره 1 هست، هر اسلاید یک ایندکس داره که بوسیله تابع showSlides که پارامتر ورودیش ایندکس اسلاید هست اسلاید مورد نظر نمایش داده میشه.

در مورد سوال دوم، تابع plusSlides یک واحد به اسلاید جاری اضافه می کنه، فرض کنید که ما 5 اسلاید داریم و اسلاید جاری اندکس شماره 3 هست، اگر تابع plusSlides رو با عدد 1 فراخوانی کنیم اسلاید شماره 4 نمایش داده میشه، یعی یک واحد به ایندکس اسلاید جاری افزوده میشه، و اگر عدد منفی باشه، مثلاً -1 یک ایندکس از ایندکس جاری کم میشه و به اسلاید شماره 2 میریم.

Gelareh Soluki

ممنونم از توضیحتون

ولی من نمیتونم بفهمم

و اینکه میخوام اسلایدر کدش رو بنویسم که نمیششه

حسین احمدی

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

Gelareh Soluki

نه من میخوام فقط شما راهنماییم کنید چون حرف شمارو بهتر متوجه میشم

Gelareh Soluki
<div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="img1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>


<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

این کد رو ببینید استاد

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>
Gelareh Soluki
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
} 
Gelareh Soluki

کد بالا javascript هست

Gelareh Soluki

حالا سوالم اینجاست که چرا تو for slides[i] display=none شده و خط آخر نشونش داده چرا

Gelareh Soluki
slides[slideIndex-1].style.display = "block"; 

اینجا منظورمه

حسین احمدی

سلام مجدد، اسلاید های شما div هایی هستن که کلاس dot دارن و داخل اسلایدر فقط باید یکی از المان ها نمایش داده بشه و با کلیک کردن رو دکمه های مورد نظر اسلاید جاری تغییر داده میشه.

توی قسمت اول، یعنی حلقه for میاد ابتدا تمامی اسلاید ها display شون رو none می کنه که در حقیقت یعنی هیچ slide ای نمایش داده نمیشه:

  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }

حالا که تمامی اسلاید ها مخفی شد، میاد ایندکس اسلایدی که باید نمایش داده بشه رو دوباره block میکنه، یعنی روشی که استفاده شده اول تمامی اسلاید ها مخفی میشن و بعد اسلاید مورد نظر شما که بوسیله پارامتر n به تابع showSlides پاس دادید بوسیله تغییر خصوصیت display مجدد نمایش داده میشه. به صورت خلاصه:

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

بعد اسلاید مورد نظر رو نمایش بده

Gelareh Soluki

سلام استاد

اسلایدها داخل class=myslide هستن

چون وقتی getelement by classname کردم اون class مربوط به myslide رو گرفته که اسم متغیر رو slides گذاشته.

Gelareh Soluki

چرا به اینصورت نوشته

slides[slideIndex-1].style.display = "block";

-1

یعنی چی؟

Gelareh Soluki

استاد برای next و previous کردن

ی function نوشته با parameter n

که مقدار -1 و 1 رو بهش پاس داده

حالا وقتی مقدار -1 که مربوط به previous میشه رو جای n بذاریم مقدارش 0 میشه چون متغیر slideindex مقدارش 1 هست

و واسه ی next 1 رو بهش پاس داده که با variable slideindex جمع میشه

اینجوری درسته که میگم؟

حسین احمدی

دقیقاً درست متوجه شدید، فقط دقت کنید زمانی که -1 هم ارسال میشه مقدارش با slideIndex جمع میشه و البته مقدار خود slideIndex هم تغییر می کنه.

اون قسمت هم که به المان هایی که کلاس dot دارن کلاس active رو اضافه می کنیم برای مشخص کردن اسلاید جاری بر اساس دایره های رنگی هست که معمولاً زیر اسلاید نمایش داده میشه و با کلیک روی هر dot به اسلاید مربوطه میریم.

فقط یک سوال، الان کد رو تست کردید و بدون مشکل کار میکنه؟

Gelareh Soluki

بله استاد کار میکنه

Gelareh Soluki

سلام استاد روزبخیر

ببخشید استاد واسه ی event ها مثلا onclick

من اگه بخوام با زدن Enter بجای click رو دکمه اون مقدار ورودی روی صفحه چاپ شه باید چیکار کنم

مثلا شما روی button میزنید و ی p tag اضافه میشه به ی tag div با ی distinctive id

Gelareh Soluki

جای click روی button

Enter رو بزنم

حسین احمدی

سلام، وقت بخیر

شما باید از event هایی مثل keypress که مربوط به کنترل کلید های keyboard هستند استفاده کنید. مثلاً برای enter:

var elem = document.getElementById('my-element');
input.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("myBtn").click();
  }
});

تو کد بالا زمانی که کلید enter زده بشه رویداد click المان myBtn فراخوانی میشه، دقت کنید هر کلید یک کد داره، مثلاً کد enter عدد 13 هست که تو کد بالا استفاده شده، حالا شما می تونید هر کلید دیگه رو هم استفاده کنید.

رویدادهای دیگه ای هم هستن، مثل keydown یا keyup که می تونید استفاده کنید.

Gelareh Soluki

mercy ostad

Gelareh Soluki

سلام استاد این ی تیکش رو چرا به اینصورت نوشته

slides[slideindex - 1].style.display = "block";

من متوجه نمیشم

چرا slideindex -1 شده

Gelareh Soluki

استاد ی سوال دیگه برای blur کردن picture ما از filter استفاده میکنیم خب

حالا این عکس رو نگاه کنید این حالت خونه خونه شدن چطوری میشه انجام بدم

blur

Gelareh Soluki

استاد zoom کنید که قشنگ ببینید

حسین احمدی

سلام، وقت بخیر

در مورد سوال اولتون، slideIndex به این دلیل یک واحد ازش کم شده که تمامی آرایه ها در javascript از اندیس صفر شروع میشن، یعنی زمانی که به اولین خونه اشاره می کنیم اندیسش میشه 0 و الی آخر، و آخرین اندیس همیشه تعداد کل المان ها منهای یک میشه، یعنی اگر 8 المان داشته باشیم، خونه آخر میشه اندیس 7.

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

Gelareh Soluki

mercy ostad

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر