우당탕탕 코딩생활

오늘은 주관식 유형을 추가해보도록 하겠습니다. HTML 작성 . script // 선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title span"); const quizTime = quizWrap.querySelector(".quiz__title em"); const quizQusetionNum = quizWrap.querySelector(".quiz__question em"); const quizQuestion = quizWrap.querySelector(".quiz__question span"); const quizDesc = quizWrap.quer..

비트 연산자(bitwise operator) 비트 연산자는 비트(bit) 단위로 논리 연산을 할 때 사용하는 연산자입니다. 비트란? 비트를 설명하려면 이진수를 먼저 알아야하는데요. 이진수는 0과 1로 이루어져 있는 것을 말하며 이 이진수에서 한 자리를 나타내는 것을 비트(bit)라고 합니다. 비트 연산자 설명 & 대응되는 비트가 모두 1이면 1을 반환함. (비트 AND 연산) | 대응되는 비트 중에서 하나라도 1이면 1을 반환함. (비트 OR 연산) ^ 대응되는 비트가 서로 다르면 1을 반환함. (비트 XOR 연산) ~ 비트를 1이면 0으로, 0이면 1로 반전시킴. (비트 NOT 연산) 부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴. (right shift 연산) 설명을 이렇게 들으면 ..

정답에 따라 표정이 변하는 강아지 퀴즈! 오늘은 정답을 맞추었을 때, 틀렸을 때 표정이 변하는 강아지를 만들어 보려고 합니다. 정답을 맞추었을 때는 웃는 얼굴, 틀렸을 때는 우는 얼굴을 하는 강아지입니다. 꼬리는 기본적으로 흔들리고 있어요! 그럼 코드를 먼저 작성해야겠죠? HTML 코드 먼저 보시죠!! Quiz 정답확인하기 유형 . // like or dislike를 삽입하며 표정을 바뀌게 합니다. 정답 확인하기 연변대비 dripidea77@gmail.com 기본 HTML 코드이며 css에 (정답을 맞추었을 때), (정답을 틀렸을 때)에 다른 표정의 코드를 작성해두었습니다. Css코드는 상당히 길기 때문에 생략하고 오늘의 포인트인 javascript를 보겠습니다. javascript 선택자와 문제 정보,..

Card Type 모바일 사용자가 폭증하면서 다양한 디바이스들이 나오고 있는 시대에 걸맞는 디자인 형식이라고 한다면 바로 ' 카드 타입 ' 입니다. 카드형 디자인은 웹과 모바일, 그리고 여러디바이스 화면크기에 최적화되는 모듈식 UI패턴이기 때문입니다. 특히나 이 카드 형식을으로 날아오른 사이트가 있습니다. 바로 '핀터레스트'인데요. 저도 이 사이트를 자주 이용하는데 그 중 하나가 수많은 컨텐츠를 많이, 보다 편리하게 볼 수 있다는 장점 때문이었습니다. 카드형 디자인은 매력적인 이미지나 컬러를 사용하여 지루하게 보일 수 있는 모듈UI 디자인의 단점을 보완하고 사용자에게 시각적인 즐거움과 직관적인 정보를 전달할 수 있게 하기도 합니다. 그래서 오늘은 이 카드형식의 페이지를 만들어 보려고 합니다. 레이아웃 및..

데이터 불러오기 자바스크립트 내에서 데이터를 불러오는 방법은 다양하게 존재합니다. 변수인지, 상수인지 혹은 배열인지 객체인지에 따라 달라지는 데이터 불러오기! 오늘 완벽하게 정리해보도록 하겠습니다. 1. 변수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법입니다. { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } //결과값 100, 200, javascript 2. 상수 : 데이터 불러오기 상수 안에 저장된 데이터를 불러오는 방법입니다. { const x = 100, y = 200, z = "javascript"; console.log(x, y, z); } //결과값 100, 200, javascript 3. 배열 : 데이터..

오늘은 통으로 외우기만 했던 구구단과 테이블을 파헤쳐 보려고 한다! 구구단 //구구단 for(let i=2; i 표 테두리 1. table이라는 변수를 먼저 선언하고 table border 로 테두리를 만들어준다. 이때 1은 선의 크기이자 border의 속성이다. 첫번째 for문은 tr태그를 5번 반복하기 위한 식으로 table += ""이 실행문이 된다. 2. 두번째 for문은 마찬가지로 td태그를 5번 반복하기 위한 식이다. 이 때 td사이에 j를 넣었기 때문에 칸 안에는 j의 값이 출력된다. 첫번째와 두번째 식이 끝났다면 마지막에 /tr을 사용하여 코드를 완성해주고 table이라는 태그를 열었기 때문에 닫아준 뒤 출력문 document.write(table); 코드를 사용해준다. ▶︎테이블 만드는 ..

배열 : 데이터 불러오기 부분에서 부족한 것 공부 배열 : 데이터 불러오기 2차 배열 { const arr = [100, 200, ["javascript","react"]]; console.log(arr[0]); console.log(arr[1]); console.log(arr[2][0]); console.log(arr[2][1]); } //const 키 = [값1, 값2, [값3, 값4]] / 값3 : console.log(arr[2[0]]); / 값4 : console.log(arr[2[1]]); ★갯수구하기 ( 자주 틀리는 부분 ) { const arr = [100, 200, "javascript"]; console.log(arr.length); } //console.log(키.length); 갯수..

이번에 테스트를 보게 되면서 느꼈던 점은 기초가 부족하다는 것이었다. 비슷한 형식이 많다보니 헷갈리고, 이리 저리 뒤섞여 버려서 이번 기회에 정리 및 복습을 해보려고 한다. 변수 변수는 데이터를 저장하는 저장소로, 저장과 변경 추가가 가능하다. 상수 데이터 저장은 가능하지만 변경은 불가능하다. 또한 이미 선언한 상수에 대해 중복 선언이 불가능 하며 상수의 값을 재지정 할 수도 없다. { const x = 100; const y = 200; const z = "javascript"; x = 300; //Assignment to constant variable. y = 400; z = "react"; console.log(x); console.log(y); console.log(z); } 변수와 공통점은 데..

오늘 자바스크립트 테스트를 보았고 그에 따른 오답노트를 작성하려고 한다. 🙃🙃 점수는 100점 만점에 60점. 많은 노력이 필요할 것 같다. 02. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100; let y = 200; let z = "javascript"; x = ___; // 추가 였다면 x = 이 아니라 x += 이어야한다. y = ___; z = ___; console.log(x); console.log(y); console.log(z); //300 //400 //jquery } 답 : 300 400 jquery 이 문제는 변수의 데이터 저장과 데이터 변경에 대한 문제였다. 정말 쉬운 문제였는데 나는 이걸 데이터 추가로 생각하는 바람에 틀리게 된 문제였다. 데이터 추가인지, 변경..

1. 양수 음수 구하기 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. 힌트 숫자를 받아서 양수, 음수,0을 판단하고 알림 창에 표시하는 함수를 선언합니다. 반환값이 숫자일 경우에만 함수를 실행합니다. parseint() 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. const num = parseInt(prompt("숫자입력.")); //parseInt()는 문자열을 실수로 바꾸는 함수. 사용자가 입력할 때 문자열이기 때문에 변경이 필요하다. if(num>0) { alert("양수입니다."); } else if(num