2024.12.02 [html, css, javascript]

📝  노트로 돌아가기

 

 

이전글 2024.11.29 [html, css]

다음글 2024.12.03 [html, css]

---

개념 - javascript 배열

See the Pen 개념- 배열 by se.eun (@se-eun) on CodePen.

***영상 시청후 다시 복습겸 정리***

 

 

참고용 자료 링크

 

 

수업 영상

 

 

 

MDN web docs _ Array

Array - JavaScript | MDN

 

 

---

 

 

개념 - 배열 평균 구하기

function solution(arr){
    var sum = 0;
  
    for(var i = 0; i< arr.length; i++){
      sum += arr[i];
    }
    return sum / arr.length;
}

console.log(solution([10, 20 ,30])); // 20
console.log(solution([80, 90, 100])); // 90

 

 

---

 

 

 

javascript에서 jquery없이 배경색 바꾸기

See the Pen Untitled by se.eun (@se-eun) on CodePen.

 

function hello(){
  var els = document.getElementsByTagName("div");
  for(var i=0;i <els.length;i++){
    els[i].style.backgroundColor='red';
  }
}

 

** jquery 없이는 javascript 작성이 불편하기 때문에 jquery 라이브러리를 가져와서 사용한다.

 

 

 

---

 

 

라이브러리 가져오기

 

cdnjs

cdnjs - The #1 free and open source CDN built to make life easier for developers

 

태그를 가져오는 방법

 

 

1. html에 태그를 복사해서 붙여넣기

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/cjs/react-dom.production.min.js" integrity="sha512-rQ8r3x2diBJ44/PxRABilQsWXIGypCmw6yXTWIE2XUUbOBs0PLbWHnePJpoaPhyhblGobtMYutKBXV4b2VE3Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

 

2. html에 url를 복사해서 붙여넣기

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

 

 

---

 

 

 

javascript에서 jQuery라이브러리 가져와서 배경색 바꾸기

See the Pen Untitled by se.eun (@se-eun) on CodePen.

 

 

---

개념적용해서 문제 풀어보기

 

문제 - 버튼을 누르면 div 700개의 배경색을 파란색으로 변경해주세요.(제이쿼리 사용)

See the Pen 문제 - 버튼을 누르면 div 700개의 배경색을 파란색으로 변경해주세요.(제이쿼리 사용) by se.eun (@se-eun) on CodePen.

 

var divs = document.getElementsByTagName('div');

function a() {
  $('div').css('background-color','blue');
}

 

 

 

 

문제 - 처음 버튼은 body 엘리먼트의 배경을 red로, 두번째 버튼은 body 엘리먼트의 배경을 blue로 변경시켜야 합니다.

See the Pen 문제 - 처음 버튼은 body 엘리먼트의 배경을 red로, 두번째 버튼은 body 엘리먼트의 배경을 blue로 변경시켜야 합니다. by se.eun (@se-eun) on CodePen.

 

console.clear();

var a = function() {
    $('body').css('background-color', 'red');
};

function b() {
    $('body').css('background-color', 'blue');
}

function c() {
    $('body').css('background-color', '');
}

 

 

 

 

문제 - 짝수번째 버튼은 body 엘리먼트의 배경을 red로, 홀수번째 버튼은 body 엘리먼트의 배경을 blue로 변경시켜야 합니다.

See the Pen 문제 - 짝수번째 버튼은 body 엘리먼트의 배경을 red로, 홀수번째 버튼은 body 엘리먼트의 배경을 blue로 변경시켜야 합니다. by se.eun (@se-eun) on CodePen.

 

$('section > button:nth-child(2n + 1)').click(function () {
    $('body').css('background-color', 'blue');
});

$('section > button:nth-child(2n)').click(function () {
    $('body').css('background-color', 'red');
});