FrontEnd/JavaScript
-
[JS] Do it! JS - 03 변수와 자료형, 연산자FrontEnd/JavaScript 2022. 5. 2. 20:17
03-1 변수를 선언하는 규칙 var (let 또는 const) 변수이름; 1. 의미가 있는 이름으로 짓는다. 2. 여러 단어를 연결한 변수 이름은 Camel Case로 지음 - 첫 번째 단어는 소문자로, 두 번째 단어부터는 대문자로 시작하는 방법 3. 선언할 수 없는 이름도 있다. - 변수이름의 첫 글자는 문자, 밑줄(_) 또는 달러 기호($)로 시작 - 그 뒤부터는 문자, 밑줄, 달러 기호, 숫자 사용 가능 변수에 값이나 식 저장하기 Do it! 실습 - 나이 계산 프로그램 만들기 나이 계산하기 (결과 값 표시) let과 const : ES6 버전부터 변수 선언 시 let, const 사용 가능, let으로 선언한 변수는 블록 내에서만 사용 가능 나이 계산하기 (결과 값 표시) 03-2 자료형 이해하..
-
[JS] Do it! JS - 02 자바스크립트와 친해지기FrontEnd/JavaScript 2022. 5. 2. 18:52
알림창으로 출력 var name = prompt("이름을 입력하세요. "); console.log(name); name = prompt("이름을 입력하세요. ", "홍길동"); // 홍길동 : default 값 console.log(name); 웹 브라우저 화면에 출력 - document.write() 함수 var name = prompt("이름 : "); document.write(name + "님, 어서오세요!"); 복습 var age; age = prompt("나이를 입력하세요. "); document.write(age + "살입니다."); 콘솔에 출력하기 - console.log() 함수 var name = prompt("이름을 입력하세요. "); console.log(name + "님 어서오세요..
-
[JS] Do it! JS - 01 자바스크립트FrontEnd/JavaScript 2022. 4. 30. 10:56
01 안녕? 자바스크립트! 01-1 웹 프로그래밍이란? 프로그래밍 : 프로그램을 만드는 과정, 사람이 원하는 대로 컴퓨터가 작동할 수 있도록 컴퓨터 언어로 명령어를 나열하는 행위, 어떤 문제를 분석하고, 논리적으로 해결할 수 있는 방법을 찾아 코딩하는 과정까지 포함 코딩 : 소스코드를 작성하는 행위 웹 프로그래밍 : 웹에 관련된 프로그램을 만드는 행위, 웹 브라우저와 관련된 프로그램을 작성하는 것 웹 사이트의 작동 : 서버와 클라이언트의 요청과 응답 클라이언트(웹 브라우저) : 필요한 정보 요청 서버 : 요청을 처리해 알맞은 정보 전달 웹 프로그래밍 백엔드(Back-end) : 서버에서 사용자 요청 처리, 데이터 관리 PHP, DB, ASP, Java, ... 프론트엔드(Front-end) : 서버에..
-
[JS] 선택자 종류FrontEnd/JavaScript 2022. 4. 24. 02:35
getElementBtId : 고유한 ID로 선택 getElementsByClassName : 같은 이름의 클래스 모두 선택 (배열) getElementsByTagName : 같은 태그(ex. h1, button ...) 모두 선택 (배열) querySelector : 한 개의 요소만 선택 (CSS 선택자로 선택) querySelectorAll : 복수 선택 가능 (CSS 선택자로 선택)  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ querySelector와 getElement의 차이는 속도...? getElement가 1.2배 정도 빠르다고 한다. 그렇지만 선택의 자유도는 querySelector가 더 큰 듯 하다. 생각해보면 웹 서핑을 할 때 1, 2초만 ..
-
[JS] 좋아요, 싫어요 버튼FrontEnd/JavaScript 2022. 4. 24. 02:33
function clickLikeBtn() { if (likeBtn.classList.contains('active')) { likeBtn.classList.remove('active'); like_sign = 0; } else { if (unlike_sign == 1) alert("이미 싫어요를 눌렀습니다."); else { likeBtn.classList.add('active'); like_sign = 1; } } } function clickUnlikeBtn() { console.log('unlikebtn') if (unlikeBtn.classList.contains('active')) { unlikeBtn.classList.remove('active'); unlike_sign = 0; } else..