npm یا مدیر پکیج نود چیست؟

حروف npm نمایش دهنده ی node package manager هستند. اگر شما در حال کار روی یک پروژه ی جاوااسکریپت باشید - فرقی نمی کند این پروژه یک برنامه ی تحت وب مانند آنگولار یا یک برنامه ی سمت سرور مثل نود باشد – می توانید از npm استفاده کنید تا پکیج های کدِ افراد دیگر را در برنامه ی خود نصب کنید. منظور از پکیج هر قطعه کدی است که یک شخص تصمیم گرفته است آنرا از طریق npm منتشر کند.

npm در واقع یک ابزار است که باید آنرا روی سیستم کامپیوتر خود نصب کنید و بعد از نصب می توانید از آن برای نصب پکیج های مورد نظر در پروژه ی خود استفاده کنید. npm بخشی از برنامه ی نود جی اس است بنابراین با نصب آخرین نسخه ی نود، npm هم بصورت اتوماتیک در سیستم شما نصب می شود و بعد از نصب می توانید از دستورات آن در خط فرمان استفاده کنید. برای نصب، حذف و به روز رسانی پکیج های npm باید از خط فرمان سیستم خود استفاده کنید.

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

 

برای به کارگیری npm در پروژه، پروژه باید شامل فایلی به اسم package.json باشد. این فایل شامل اسم پکیج های مورد استفاده ی پروژه می باشد و در آن نسخه ی پکیج هم مشخص شده است.

اگر پروژه ی شما فایل package.json را ندارد باید ابتدا آن را ایجاد کنید. برای ایجاد این فایل باید در برنامه ی خط فرمان سیستم خود به فولدر پروژه بروید و سپس از دستور

npm init

استفاده کنید. بعد از انجام تنظیمات لازم، فایل package.json برای پروژه ی شما ایجاد می شود. اگر پروژه ی شما فایل package.json را دارد نیازی به اجرای این مرحله نیست.

 

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

npm install

استفاده می شود. بعد از اجرای این دستور می بینید که فولدر جدیدی به اسم node_modules کنار فایل package.json ایجاد شده است و کد پکیج های موجود در این فایل در آن وارد شده است.

 

برای این که پکیج جدیدی را به پروژه ی خود وارد کنید دستور npm install با اسم پکیج همراه می شود. برای اینکه اسم پکیج در فایل package.json ذخیره شود در انتهای این دستور –save قرار می دهیم. برای مثال برای نصب پکیج Express در پروژه ی نود جی اس از دستور

npm install express –save

استفاده می کنیم.

 

منبع نوشته: سایت مدیوم

دسترسی به عنصرهای HTML از طریق جاوااسکریپت

1) getElementsByTagName

اولین تابع برای دسترسی به عنصرها، استفاده از اسم تگ هاست. این تابع اسم تگ را به عنوان ورودی می گیرد. برای مثلا برای انتخاب تگ های p از کد:

document.getElementsByTagName("p")

استفاده می کنیم. توجه کنید که این تابع آرایه ای از تگ های مورد نظر را برمی گرداند.

  مثال:  

    <p id="text">Click the button to change me.</p>
    <button onclick="changeText()">click me</button>
    <script>
        function changeText() {
	    document.getElementsByTagName("p")[0].innerHTML = "I am changed";
	}
    </script>
    
    

2) getElementById

اگر بخواهیم عناصر را با استفاده از اسم آی دی آن ها انتخاب کنیم از این تابع استفاده می کنیم. این تابع (اسم) آی دی را به عنوان ورودی می گیرد و یک عنصر را برمی گرداند. 

  مثال:  

    <p id="text">Please READ ME.</p>
    <button onclick="read()">click me</button>
    <script>
        function read() {
            document.getElementById("text").style.fontSize = "40px";
        }
    </script>

3) getElementsByClassName

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

  مثال:  

  <p>This is an <span class="important">important</span> announcement.</p>
  <p>Please <span class="important">pay attention</span>.</p>
  <p>Please read this <span class="important">carefully</span>.</p>
  <button onclick="attention()">pay attention</button>
  <script>
    function attention() {
      let x = document.getElementsByClassName("important");
      for(let i = 0; i < x.length; i++) {
        x[i].style.color = "red";
      }
    }
  </script>

4)  querySelectorAll

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

  مثال:  

  <div class="row">
      <div class="col-1">col-1</div>
      <div class="col-2">col-2</div>
      <div class="col-1">col-1</div>
      <div class="col-1">col-1</div>
      <div class="col-3">col-3</div>
    </div>
    <button onclick="oneline()">Line the DIVs</button>
  <script>
    function oneline() {
      var elms = document.querySelectorAll('[class^="col-"]');
      for(let i = 0; i < elms.length; i++) {
        elms[i].style.float = "left";
        }
      }
  </script>

سلکتورهای CSS

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

سلکتور	توضیحات
سلکتورهای پایه
*	سلکتور جهانی (Universal)، کلیه ی عناصر صفحه را انتخاب می کند
E	سلکتور نوع (Type) کلیه عناصر E را انتخاب می کند
test.	کلیه ی عناصر با کلاس test را انتخاب می کند (class="test")
demo#	کلیه ی عناصر با آی دی demo را انتخاب می کند (id="demo")
سلکتورهای ویژگی
[attribute]	هر عنصر با ویژگی attribute را انتخاب می کند
["attribute="value]	هر عنصر با ویژگی attribute که مقدار دقیق value را دارد انتخاب می کند
["attribute~="value]	هز عنصر با ویژگی attribute را انتخاب می کند به صورتی که ویژگیِ attribute تعدادی مقدار داشته باشد که این مقادیر با فاصله از هم جداشده اند و یکی از مقادیر، مقدارِ دقیقِ value است.
["attribute|="value]	هر عنصر با ویژگی attribute را انتخاب می کند به صورتی که مقدار آن value باشد یا با -value شروع شود.
["attribute^="value]	هر عنصر با ویژگی attribute را انتخاب می کند که مقدار آن با رشته ی value شروع شود.
["attribute$="value]	هر عنصر با ویژگی attribute را انتخاب می کند که مقدار آن با رشته ی value به پایان برسد.
["attribute*="value]	هر عنصر با ویژگی attribute را انتخاب می کند که مقدار آن شامل رشته ی value باشد.
سلکتورهای شبه کلاس ها (Pseudo-classes)
link:	لینک دیده نشده را انتخاب می کند.
visited:	لینک دیده شده را انتخاب می کند.
active:	عنصر را حین فعالیت انتخاب می کند.
hover:	لینک را موقع عبور موس انتخاب می کند.
focus:	عنصر ورودی هنگامی که روی آن تمرکز می شود را انتخاب می کند.
target:	عنصری که هدف یک URl است را انتخاب می کند.
(lang(language	هر عنصر با زبان language را انتخاب می کند (یعنی ویژگی lang برای عنصر برابر language باشد).
first-child:	هر عنصری را انتخاب می کند که فرزند اول والدینش باشد.
last-child:	هر عنصری را انتخاب می کند که فرزند آخر والدینش باشد.
first-of-type:	هر عنصری را انتخاب می کند که اولین هم نیا (خواهر یا برادر - sibling) از نوع خودش باشد.
last-of-type:	هر عنصری را انتخاب می کند که آخرین هم نیا (خواهر یا برادر - sibling) از نوع خودش باشد.
(nth-child(n:	عنصری را انتخاب می کند که nامین فرزند والدینش باشد.
(nth-last-child(n:	عنصری را انتخاب می کند که nامین فرزند والدینش، از آخر باشد.
(nth-of-type(n:	عنصری را انتخاب می کند که nامین هم نیا از نوع خودش باشد.
(nth-last-of-type(n:	عنصری را انتخاب می کند که nامین هم نیا از نوع خودش، از آخر باشد
only-child:	هر عنصری را انتخاب می کند با این شرط که تنها فرزندِ والدینش باشد.
only-of-type:	هر عنصری را انتخاب می کند با این شرط که تنها نوع در بین هم نیاها(خواهر و برادرها)ی خود باشد.
empty:	عنصری را انتخاب می کند که فرزند نداشته باشد.
root:	عنصری را انتخاب می کند که ریشه (root) باشد.
enabled:	هر عنصر فعال شده را انتخاب می کند.
disabled:	هر عنصر غیرفعال را انتخاب می کند.
checked:	هر عنصر علامت دار را انتخاب می کند.
(not(s:	هر عنصر که با سلکتور s مطابقت ندارد.
سلکتورهای شبه عنصرها (Pseudo elements)
first-line::	خط اول عناصر را انتخاب می کند.
first-letter::	حرف اول عناصر را انتخاب می کند.
before::	محتوایی را قبل از عنصر تولید می کند.
after::	محتوایی را بعد از عنصر تولید می کند.
سلکتورهای ترکیب کننده (Combinators)
E F	هر عنصر F که از نسل عنصر E (درون عنصر E) باشد.
E > F	هر عنصر F که فرزندِ (مستقیمِ) عنصر E باشد.
E + F	هر عنصر F که دقیقا بعد از عنصر E (خواهر یا برادر بعدی عنصر E) باشد.
E ~ F	هر عنصر F که یکی از هم نیاهای بعدی عنصر E باشد.