한번 해보자 코딩

자바스크립트 퀴즈 이펙트 5 💜 퀴즈 5번째 코드 보기 / 완성 화면 자바스크립트를 이용해 만든 퀴즈 이펙트 5번을 정리해보겠습니다. 문제는 정보처리 기능사 문제를 따왔습니다. header 부분에 link 태그를 이용해 css를 연결해줍니다. 폰트정보와 그리드 배경에 대한 css와 사이트 디자인 css를 따로 설정해뒀습니다. 폰트, 기본 디자인 CSS @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); * { margin: 0; padding: 0; box-sizing: bor..

자바스크립트 시험 4 오답 01. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } ✨ 정답보기 1, 3, true 02. { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document.write("함수1가 실행되었습니다."); _______(); } callback(func); //함수1가 실행되었습니다. //함수2가 실행되었습..

search Effect 서치 이펙트 💜 서치 이펙트 코드 보기 / 완성 화면 완성된 화면입니다. 검색하기 화면에 검색하는거에 따라 밑에 설명이 나옵니다! 한번 검색해보세요! 그럼 작업을 해보겠습니다! CSS연결 link 태그를 이용해 reset.css와 search.css를 올려줍니다. 클릭해서 파일을 만들어주고 따로 들어가서 css작업을 해줍니다. reset.css @font-face { font-family: 'CookieRun'; font-weight: 400; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot'); src: url('https://cdn.jsdeli..

자바스크립트 마우스 효과 GSAP 사용 💜 마우스 효과 코드 보기 완성 화면 오늘은 마우스 효과 GSAP를 이용한 마우스 애니메이션 효과를 써보겠습니다. Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 The best way to predict the future is to invent it. 미래를 예측하는 가장 좋은 방법은 미래를 창조 하는 것이다. hunmi961119@gmail.com body안에 header와 main, footer 영역을 나누어 텍스트를 넣어줍니다. 폰트 CSS @import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css'); @import url('https:/..

자바스크립트 마우스 효과 (조명효과) 💜 이미지 유형 코드 보기 완성 화면 마우스 이펙트 조명효과를 배워봤는데요 한번 정리해보겠습니다! 그 다음 head안에 style 태그로 css작업을 해줍니다. mouse cursor에 마우스 디자인을 작업해줍니다. background를 사용해 커서 디자인 안에 사진이 보이게 작업해줍니다. cursor: none; 으로 마우스 커서가 안보이게 해주고, cursor디자인 위로 글자가 오게하려면 z-index를 넣어 주면 됩니다. 마우스 효과 1번은 아래 링크에 들어가시면 보실 수 있습니다. https://mi-1119.tistory.com/43 자바스크립트 마우스 이펙트(마우스 효과) 자바스크립트 마우스 이펙트(마우스 효과) 💜 이미지 유형 코드 보기 완성 화면 Suc..

자바스크립트 마우스 이펙트(마우스 효과) 💜 이미지 유형 코드 보기 완성 화면 Success comes after repeated failures. 성공은 실패를 거듭한 후에 온다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px main태그 안에 마우스 효과를 넣어줄 글씨와 이벤트 속성인 clientX와 clientY, offsetX, offsetY, pageX, pageY, screenX, screenY를 사용해 마우스의 X, Y좌표값을 넣어줍니다. window.addEventListener("mousemove", function(event){ documen..

자바스크립트 퀴즈 사이트 만들기 4 💜 퀴즈 4번째 코드 보기 / 완성 화면 오늘은 자바스크립트 퀴즈 만들기 4번째를 정리해 보겠습니다! Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 정답입니다! 틀렸습니다! 정답 확인하기 hunmi961119@gmail.com body 안에 header, main, footer 로 구역을 나눠 작업해줍니다. main 안에 퀴즈로 들어갈 각각의 이름들을 지정해 입력해줍니다. 객관식 문제들이기 때문에 quiz choice 태그를 만들어 안에 4개의 자식요소 태그를 또 만들어 줍니다. //선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelect..

자바스크립트 시험 3 오답 01. { (function(){ console.log("함수가 실행되었습니다."); })(); } ✨ 정답보기 함수가 실행되었습니다. 02. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } ✨ 정답보기 함수가 실행되었습니다. 03.(X) { let sum = 0; for(var i=1; i5의 결과는 false가 되고, j 변수는 4로 초기화 j != 0 의 결과는 true가 된다. m변수는 논리 연산자 &&를 사용해 j num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } ✨ 정답보기 73 📑 풀이 함수를 ..

퀴즈 사이트 만들기 3번째 오늘은 퀴즈 사이트 만들기 3번째로 했던 걸 정리해보겠습니다. 💜 퀴즈 3번째 코드 보기 / 완성 화면 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 body태그 안에 들어간 main태그 입니다. 사이트 안에 들어갈 속성값들을 지정해줬습니다. 선택자 //선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelectorAll(".quiz__title"); //시험 종목/시간 const quizQuestion = quizWrap.querySelectorAll(".quiz__question..

자바스크립트 데이터 제어하기 정리 오늘은 데이터 제어하기인 while문(반복문), do while문, break문, continue문들의 *document.write() 위치에 따른 값 변화가 헷갈려서 다시 한 번 정리하면서 공부해보려고 합니다. while문 while문은 조건식이 참인 동안 반복해서 코드를 실행하는 반복문입니다. 조건식이 참일 경우 while문 안의 코드가 실행, 실행되고 나면 조건식이 다시 검사, 조건식이 여전히 참이면 코드를 다시 실행. 조건식이 거짓이 될때까지 반복. { let num = 0; while(num

자바스크립트 시험 2 오답 1. { if( null ){ console.log("true"); } else { console.log("false"); } } 정답 false 2.(X) { let num = 0; while( num 6 ){ break; } console.log(num); } } 정답 1,2,4,5,6 ✔ 'num'은 무한루프 루프 내에서 'num' 변수를 1씩 증가 if 조건문을 사용하여 'num'값이 3인 경우 'continue'를 실행하여 해당 루프를 건너뜀 그리고 'num'값이 6보다 큰 경우 'brake' 를 실행하여 무한 루프를 탈출. 따라서 값이 1부터 시작 3은 건너뛰고 6까지 출력 7.(X) { for(let i=1; i { const str = "함수가 실행되었습니다.";..

오늘은 저번에 했던 퀴즈 사이트를 이어서 좀 더 업그레이드 된 버전을 살펴보겠습니다. 💜 퀴즈 2번째 코드 보기 / 완성 화면 정답을 적으면 웃는 강아지가 틀리면 우는 강아지가! 우선 는 전과 동일하게 태그로 css와 연결시켜 작업해주고 Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 hunmi961119@gmail.com 도 동일하지만 태그 안에 링크를 걸어 다음퀴즈로 넘어가게 설정해줍니다. 일단 2개의 퀴즈를 만들었으니 2개만 만들어줬습니다. 하나씩 동일한 방법으로 추가해주면 되겠습니다. . 정답 확인하기 연변대비 설명 hunmi961119@gmail.com 태그도 전과 동일합니다. 이제 를 이용해 가장 복잡한 부분을 작성해줍니다. const로 선택자 데이터와 문제 정보의 데이터..

오늘은 수업시간에 배웠던 퀴즈 사이트를 정리해보려고 합니다. 💜 퀴즈 코드 보기 / 완성 화면 html 에서 타이틀을 지정해주고 link로 reset.css, quiz.css파일을 지정해줍니다. css파일을 따로 만들어 html과 css를 구분해 작업하기 더 쉽게 합니다. Quiz 정답 확인하기 유형 . 정답 확인하기 연변대비 hunmi961119@gmail.com body안에 로 각각의 문서 구조를 정의해줍니다. 안에 들어간 내용은 강아지를 만들기 위한 구조들입니다. 가져온 코드는 좋아요! 싫어요!가 분명한 강아지 애니메이션 See the Pen Cute Dog by David López (@davidlpz) on CodePen. 좋아요! 싫어요!가 분명한 강아지 애니메이션 wsss.tistory.co..

자바스크립트 데이터 불러오기(배열, 객체) 오늘은 자바스크립트 데이터 불러오기 배열과 객체에 대해 정리해 보겠습니다! 배열 펼침연산자(Spread Operator) 자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자 { let arr1 = [100,200,300,400,500]; let arr2 = [600,700]; console.log(arr1, " ");//100,200,300,400,500 //배열 console.log(...arr1,);//100 200 300 400 500 //...으로 불러오면 데이터 console.log(...arr1, ...arr2);//100 200 300 400 500 600 700 } { const arr = [1,2,3,4,5]; ..

자바스크립트 화살표 함수 오늘은 화살표 함수를 정리해보려고 합니다. 기본적인 함수들은 이제 외워서 눈에 들어오긴 하는데 기본함수를 쓰고 화살표 함수로 바꿀 순 있는데 딱 화살표 함수로만 나와있으면 알아보기 쉽지 않더라구요 그래서 정리해보면서 익히려고 합니다! 일단 함수의 종류를 다시 한번 정리해볼게요! 선언적 함수 함수를 호출할 때 함수의 앞 또는 뒤에서 호출이 가능 function func(){ document.write("실행되었습니다.") } func(); 익명 함수 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어 준다 변수 선언 이후에 호출 cosnt func = funtion(){ document.write("실행되었습니다.") } func(); 매개변수 함수 함수를..

지금까지 배운 것들 중에 부족한 부분들 정리 사실 다 부족하지만 그 중에 아직도 바로바로 안나오고 익숙하지 않은 용어들을 정리해보면서 공부해보려고 한다. 이제는 익숙한 용어들도 한 번 더 정리하면서 머리에 익히기! JAVASCRIPT 기본 명령어 prompt(명령, 메세지) : 사용자의 정보를 얻기위해 띄우는 입력창 prompt('당신의 나이는 몇살입니까?'); alert(알림, 경보) : 사용자에게 띄우는 안내창 (경고창으로 많이 쓰임) alert('자바스크립트'); confirm(확정) : 사용자에게 띄우는 확인창 confirm('정말 삭제 하시겠습니까?'); 변수(var, let) //변수 변수명 = 데이터(값); var num = 10; var str = 'javascript'; var temp ..

시험 오답 학원에서 본 시험 오답노트! 확실히 시험을 봐야 내가 모르는게 뭔지 정확하게 알 수 있는 것 같다. 혼자 공부하다 보면 다 알았다고 생각하는데도 문제를 풀어보면 그게 아닌.. 이번에 틀린 문제로 확실히 알았으니 다음 시험은 100점 가보자고-! 출력값 보고 빈칸 채우기 1. (x) { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 정답 x y x+y 😥 3번째 출력값이 javascript인줄 알았는데.. 300이었다. 당연하다고 생각하지 말고 문제는 하나하나 자세히 뜯어볼것! 변수 var에 각각의 a,b,c데이터값을 저장해줬으니 ..

자바스크립트 함수 마무리 문제 1,2 모던 자바스크립트 함수 마무리 문제 1 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. 힌트! 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언 parseInt( )함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환 반환값이 숫자일 경우에만 함수를 실행 정답 function isPositive(n) { if (n > 0) { alert(`${n}은 양수입니다.`); } else if (n < 0) { alert(`${n}은 음수입니다.`); } else { alert(`${n}은 0입니다.`); } } cons..

함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합으로 이해하면 됩니다. 분류 종류 설명 사용자의 정의 함수 선언적 함수 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수 내장 함수 인코딩, 디코딩 함수 숫자 판별 함수 유 •무한 값 판별 함수 숫자변환 함수 문자 변환 함수 자바스크립트 코드 변경 함수 프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수 선언적 함수 선언적 함수의 형식 { function func(){ document.write("실행되었습니다."); //실행문이 있어야함 } func(); //가장 기본적인 함수 } 선언적 함수의 호출 선언적 함수는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니..

자바스크립트 데이터 저장하기 자바스크립트에서 데이터 저장하는 방법들에 대해 정리해보려고 합니다. 변수 변수는 데이터를 저장하는 저장소입니다. 데이터 변경이 가능하고, 마지막으로 지정해준 데이터가 값이 됩니다. 데이터를 추가할수도 있습니다. 데이터 저장 { var x = 100; var y = 200; var z = "javascript"; console.log(x); console.log(y); console.log(z); } 데이터 저장 + 데이터 변경 { let x = 100; let y = 200; let z = "javascript"; x = 300; y = 200; z = "react"; console.log(x); console.log(y); console.log(z); } 데이터 저장 + 데..

모던 자바스크립트 03 마무리문제 1,2 풀어보기 오늘은 모던 자바스크립트 책에 있는 03 마무리 문제 1,2를 풀어보려고 합니다! 하나씩 같이 풀어볼까요? 마무리 문제 1 배열이 주어지고 이 배열에서 10보다 큰 값을 찾아서 화면에 표시해 주는 문제입니다. 10보다 큰 숫자 찾기 주어진 배열 : [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] 힌트! 배열 요소의 개수만큼 for 문을 반복 if 문을 사용해서 요소의 값과 10을 비교 documen.write 문을 사용해 화면에 표시 정답! { const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; for(let i=0; i< arr.length; i++){ //배열의 요소 갯수를 알 수 있는 length를..

자바스크립트 조건문 오늘은 제가 지금까지 배운 자바스크립트 조건문에 대해 정리해보려고 합니다! if문, 다중 if(else if), if문 생략, 삼항 연산자(조건 연산자), 중첩 if문, for문, 중첩 for(table),switch문, while문, do while문, break문 continue문 에 대해 정리해보겠습니다! if문 if다음에 { }를 사용해 조건을 표기합니다. 조건을 체크한 후 결괏값이 ture면 if문에 있는 명령을 , false면 if문에 있는 명령은 건너뛰고 다음명령을 실행합니다. if (조건) { 조건이 ture일 때 실행할 명령(들) } if...else문 조건을 체크한 후 ture일 때 처리할 명령과false일 때 처리할 명령이 따로 있다면 if 문과 else문을 사용합..

자바스크립트의 반복문에 대해서 반목문을 사용하면 여러번 실행해야할 것들을 줄일 수 있어 불필요한 명령을 늘어놓지 않아도 됩니다. 그럼 소스도 더욱 깔끔해져서 프로그램 실행도 더 빨라지겠죠? 그럼 , for문과 forEach, for in, for of 반복문에 대해 알아보겠습니다. for문 자바스크립트에서 가장 많이 사용하는 반복문은 for문입니다. for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리합니다. for (초깃값; 조건; 증가식) { ... } 초깃값 : 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화합니다. 초깃값은 0이나1부터 시작합니다. 조건 : 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야..

자바스크립트 연산자의 종류에 대해 연산자 3+5, 3 a>b가 참이면 true, 거짓이면 false가 됩니다. b가 참이면 true, 거짓이면 false가 됩니다. >= a>=b가 참이면 true, 거짓이면 false가 됩니다. ex) 5 == '5' 는 false가 나옵니다. !== a !== b, a와 b가 같지 않거나 데이터 타입이 같지 않지 않으면 ture, 같으면 false가 됩니다. 이상, 초과, 이하, 미만 표현 이상 num >=10, 10 이상을 의미 합니다. 초과 num > 10, 10 초과를 의미 합니다. 이하 num ture && true = true true && false = false false && true = false false && false = false || (OR연산..

자료형이란 무엇일까? 오늘은 자료형에 대해 알아보려고 합니다. 자료형 자료형이란 프로그램에서 처리할 자료의 형태를 말합니다. 3이라는 숫자를 숫자로 처리하는지, 문자열로 처리하는지에 따라 결괏값이 달라집니다. 자바스크립트의 자료형은 크게 원시유형과 객체로 나뉘어 집니다. 원시유형은 하나의 값만 저장하는 자료형으로 숫자와 문자열, 논리형, undefind, null, symbol 유형이 있습니다. 그리고 원시 유형 외에는 모두 객체입니다. 우선 숫자형에 대해 더 알아볼까요? 숫자형 숫자형은 모든 프로그램에서 가장 기본이 되는 자료형입니다. 정수와 실수를 명확히 구별 정수도 크기에 따라 다른 자료형을 사용 정수와 실수를 함께 묶어 '숫자형'이라고 함 큰따옴표 없이 입력하면 숫자로 인식 숫자를 큰따옴표로 묶으..