کدستانِ من



حروف 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

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

 

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


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>






تبلیغات

آخرین ارسال ها

آخرین جستجو ها

جزوه و خلاصه کتاب آموزش زبان انگلیسی | انگلیشدان جــــــوالــــــــدوز سایت شخصی علی اکبر فرجاد جریان شناسی اسباط دانلودرایگان نمونه سوالات متعادل سازی چهره زنانه ساخت و نصب تجهیزات کشتارگاه های دام آنتالیا رزیدنس X and I ★بر محمد و آل محمد صلوات★