YUYANE

구현 영상 youtu.be/zpSneH_aFHA 사용 JS(DOM, jquery), css, html 코드 github.com/Miri-Hwang/TIL/tree/main/python/udemy/jsp/connect_four_game_byMe

상황 설명 var color = circle.css('background-color'); if(color === 'orange'){ circle.css('background-color','blue') turn=!turn; break; } 원의 색깔이 '오렌지' 일 때, '파랑'으로 바꾸고자 코드를 작성했다. 오류 원의 색깔이 어떤 색이든 상관 없이, 무조건 색깔이 바뀌었다. 원인 CSS 파일에서 'background-color' 값을 'orange'로 설정한 것을 조건문에서 그대로 넣어준 것이 원인이었다. color값을 로그 찍어보니 실제로 rgb 값이 찍혔다. 해결 var color = circle.css('background-color'); if(color === "rgb(255, 165, 0)"){..

jQuery / DOM, HTTP requests(AJAX) 등과 상호작용 흐름을 원활하게 하는 자바스크립트 라이브러리 / jQuery가 만들어졌을 당시에는 .querySelector()가 존재하지 않았기 때문에, 애초에 역할은 DOM과의 상호작용을 조금 더 간단하게 도우는 것이었다. / 현재도 방대하게 사용되는 중 간단한 예시 //jQuery var divs = $('div'); $(el).css('border-width', '20px'); //Vanilla var divs = document.querySelectorAll('div'); el.style.borderWidth = '20px';

틱텍토 게임 오늘 과제로 간단한 틱텍토 게임을 만들었다. 사진 처럼 빙고 칸 안에 o와 x를 표시하는 기능이 전부. 문제의 코드 var block_one = document.querySelector('#one') var block_two = document.querySelector('#two') var block_three = document.querySelector('#three') var block_four = document.querySelector('#four') var block_five = document.querySelector('#five') var block_six = document.querySelector('#six') var block_seven = document.querySele..

DOM 자바스크립트 코드가 HTML/CSS 와 상호작용 하도록 만드는 인터페이스 브라우저가 모든 HTML 태그와 자바스크립트 객체를 저장하는 DOM을 구축함 예시 웹사이트 DOM 확인 방법 어떤 웹사이트에서든 DOM을 볼 수 있다. 웹사이트->(마우스오른쪽 버튼 클릭) -> 검사(inspect)-> console console.dir(document)입력 주요 document attributes - document.url - document.body - document.head - doment.links - document.getElementById() - document.getElementByClassName() - document.getElementsByTagName() - document.query..

For Loop 자바스크립에는 세 가지 유형의 For 루프가 있다. 1) For : 숫자 만큼의 루프를 돎 for(var i=0; i

== , === 값을 비교할 때 사용되는 부호 == : 값을 비교 === : 값과 데이터 유형 모두를 비교 "2" == 2 // true "2" === 2 // false 5 !== "5" // true 5 != "5" //false

?로 표현하는 if/else문 - 예시 : let result = condition ? value1 : value2; condition이 참이라면 value1 , 거짓이라면 value2 반환된다. 참고 ko.javascript.info/ifelse