TechLabs

조건문 1. 조건문 데이터가 들어왔을 때, 조건을 확인한다. true인 경우 run code. false인 경우 skip code. if(조건){ 조건 성립 시 실행하는 코드 }else{ 조건 성립하지 않을 시 실행하는 코드 } 경우에 따라 run another code 가능. if(조건 1){ 조건 1 성립 시 실행되는 코드 }else if(조건 2){ 조건 2 성립 시 실행되는 코드 }else{ 위의 조건 모두 성립하지 않을 시에 실행되는 코드 } 2. 논리 연산자 && : AND 연산자, 모두 true인 경우에 true || : OR 연산자, 하나라도 true인 경우에 true 3. 비교 연산자 두 개의 데이터 서로 비교하는 연산자 === : 엄격한 비교, Boolean 값 반환한다. == : 느슨..

1. 함수 선언 후 실행하기 함수는 선언 후 반드시 실행해야 사용할 수 있다. 실행은 소괄호를 이용한다. 함수 : 기능 수행 또는 계산을 수행하는 코드 집합을 의미한다. 함수 사용 : 호출 방법, 함수 선언 종류 // 0. 함수 정의하고 실행하는 방법 // 함수 정의하기. // const output = function () { // console.log("함수를 실행했습니다."); // }; // 함수 실행하기. // 함수명() // output(); 2. input 값 가져오는 dateFormMaker 함수 만들기 원하는 날짜를 가져오는 동적인 값을 만들기 위하여 함수를 만들어준다. 여기서 document.querySelector를 이용하는데 document는 객체의 일부이다. // 1. dateFo..

1. 이벤트 감지하기 [예시] 회원가입 시 입력 변경 시에 이벤트가 발생하는 것을 알 수 있다. 2. onchange vs oninput onchange 값이 포커스가 벗어날 때마다 반영하는 함수이다. oninput 실시간으로 변경되는 값을 모두 반영하는 함수이다. 결이 비슷하지만, 차이가 나는 함수이기에 적절하게 이용하자. 3. 0 vs "0" - 조건문을 이용할 때에 조건을 달아줘도 되지만, Boolean을 달아주는 경우도 많다. input에서 value를 가져오면 문자열로 반환된다. 숫자 0 false를 반환한다. 문자열 0 true를 반환한다. 4. 모든 값 입력 시 버튼 활성화하기 버튼을 비활성화 상태로 만들어놓기. 입력창의 모든 태그의 값을 가져오기. 그 값들이 모두 비어있지 않은 경우에 버튼..

1. 회원가입 폼 오류 확인하기 처음에는 발견하지 못했는데, 강의를 수강하다가 알게 되었다. - 인증번호 받기를 여러 번 클릭하면 여러 번 시간 반복 함수가 실행되어 서로 화면 갱신하기 위하여 충돌이 발생한다. - setInterval 함수가 종료되지 않아서 계속 else 구문을 반복한다. 2가지 문제점이 발생하였고, 문제점을 해결해보자. 2. 회원가입 폼 오류 수정하기 2-1. 인증번호 받기 버튼 제어하기 인증번호 받기 버튼을 제어하기 위하여 버튼의 상태를 Boolean을 통하여 설정한다. 상태를 제어하는데에 Boolean이 많이 사용되므로, 자주 이용하기. 주의할 점은 시간은 함수 내에 지정해야 하고, 버튼 상태는 함수 밖에 지정해야 한다. 그래야 시간은 계속하여 갱신되어 나중에 버튼을 눌러도 실행되..

1. 함수 - 우리가 직접 만드는 기능을 의미한다. - 기능 제작 function 함수명(매개변수){ 함수를 호출했을 때 실행할 명령문 } // 매개변수와 데이터 반환은 옵션이다. 매개변수 데이터를 외부에서 받아와서 함수 안에서 이용하는 것이다. 필요 시 받아서 이용하는 것이기 때문에 옵션이다. 예를 들면 내장 함수에서 데이터를 받아야 되는 경우가 있을 수 있지만, 아닌 경우도 있을 수 있다. 데이터 반환 return 을 이용하여 결과 데이터를 반환하는 것을 의미한다. 필요 시 반환하는 것이기 때문에 옵션이다. // 함수 실습 function sayHello() { console.log("안녕하세요."); } // undefined sayHello(); // 안녕하세요. // undefined funct..

회원가입 인증 번호 시간 타이머 제작하기 1. 회원가입 인증 번호 시간 타이머 제작하기. 2, 회원가입 특정 시간 도달 시 인증 버튼 없애기. 3. 회원가입 특정 시간이 0초인 경우 인증 완료 버튼 비활성화 및 색상 변경하기. - setInterval 내장 함수를 이용하여 타이머를 제작하기. - 초에서 남은 분과 남은 초를 모두 계산하여, 화면에 보여줘야 한다. - 특정 시간이 되면 버튼을 비활성화하기. 1. 제작 방식 회원가입 인증 번호 시간 타이머를 제작하기 위해서는 dom을 조작하여 화면에 있는 숫자를 변경해야 한다. 180초 // 3분 179초 // 2분 59초 178초 // 2분 58초 . . . 인증번호 받는 버튼을 누르는 동시에 3분 부터 카운트 시작하기. 남은 시간을 분, 초로 환산하여 변..

1. Dom - Document Object Model - 동적인 프로그램으로 만들기 위하여 사용한다. 2. Dom 사용하는 방법 html 파일에서 id를 통하여 해당되는 태그를 가져오기. 해당 태그를 제작한 기능으로 제어하기. 2-1. html 코드 Hello 에서 World로 변경하는 버튼 만들기 Hello Change 2-2. javascript 코드 // 1. html에서 해당 태그를 가져오기 const targetWord = document.getElementById("target__word"); // console.log(targetWord); // 2. 해당 태그를 제어하기 const changeWord = function () { targetWord.innerText = "World"; }..

1. 수학 객체 자바스크립트의 수학 기능을 사용하는 명령어이다. Math.max() 최대값 Math.round() 반올림 Math.min() 최소값 Math.floor() 버림 Math.random() 0 ~ 1 랜덤한 숫자 Math.ceil() 올림 예전에는 컴퓨터가 전자 계산기 역할을 수행했기 때문에, 수학 객체가 탄생한 것이다. 2. 인증 번호 만드는 방법 수학 객체를 이용하여 인증 번호를 만들 수 있다. // Math.random, Math.floor, String, padStart를 이용한 인증 번호 만들기 Math.random() * 1000000; // 301924.7597895887 Math.floor(Math.random() * 1000000); // 705252 String(Math.f..

1. 반복문 - 같은 행위를 반복하는 것을 의미한다. 초기식 : 시작점을 의미한다. 여기서 변수를 지정하고 할당할 때 const를 사용하면 증감문에서 변화를 줄 수 없기 때문에 반드시 let을 사용하기. 시작점 의미한다. 조건식 : 검증 과정을 의미한다. 언제 반복문을 종료할 것인지 정할 수 있다. 끝 점을 의미한다. 증감문 : 1회 반복할 때마다 카운트를 어떻게 할 것인지 지정할 수 있다. - 몇 번을 반복할 것인지가 핵심이다. for(초기식; 조건식; 증감문){ 반복하여 실행할 내용 } 증감문에서 일반적으로 많이 사용하는 코드이다. i++ // i += 1, 하나씩 증가를 의미한다. i-- // i -= 1, 하나씩 감소를 의미한다. 2. Template Literals 템플릿 리터럴 - 템플릿 리터..

1. 조건문 - 특정 조건을 만족하면 실행한다. - 핵심은 시작점과 끝점이 존재한다는 것이다. - true 인 경우에는 시작점을 실행하고, false인 경우에는 끝 점을 실행한다. 조건의 개수는 신경쓰지 않아도 된다. - 각각 다른 명령이 실행될 수 있도록 만들어주면 된다. if(조건문){ console.log(A) // 조건문이 참인 경우 // A 실행하기 }else{ console.log(B) // 조건문이 거짓인 경우 // B 실행하기 } 2. 거짓같은 값 false 라고 평가되는 값을 의미한다. 0 마이너스 0 빈 문자열 null undefined NaN 이외의 값들은 true 라고 평가되는 값이다. 주의할 점은 빈 문자열인 경우 문자가 없어도 띄어쓰기가 있는 경우 에는 true 라고 평가된다. ..