🪄 JavaScript
온라인학습으로 첫 자바스크립트(+제이쿼리) 공부 시작!
실습하면서 기본적인 개념들을 정리할 수 있었다👍🏻
💻 로또 번호 추첨기
https://github.com/yoonmallang22/JavaScript/tree/main/practice/lotto
-
Math.random()
0 이상 ~ 1 미만 실수(float) -
parseInt()
소수점은 버리고 정수로 변환(int) -
배열(Array)
자료구조
하나의 변수에 여러 개의 값들을 넣을 수 있다 -
.push()
배열의 마지막 값 추가 -
DRY(Don't Repeat Yourself)
프로그래밍의 중요한 원칙
반복문 사용 -
조건문 if
-
.indexOf(값)
값이 있으면 위치, 없으면 -1
중복된 값 처리 -> 만약 중복이 아니라면.push() -
반복문 for
특정 횟수만큼 반복 -
반복문 while
특정 조건까지 반복
중복된 값이 있으면 숫자가 6개 안나올 수 있기 때문에 공을 6번 뽑을 때까지 반복 X
-> 공이 6개가 될 때까지 반복 O -
.length
배열의 길이 -
.sort()
배열의 값 정렬: 사전순 정렬, 맨 앞자리 기준으로 정렬
.sort((a,b)=>a-b)숫자 오름차순 정렬
💻 자소서 글자수 계산기
https://github.com/yoonmallang22/JavaScript/tree/main/practice/word
-
DOM(Document Object Model)
웹 화면을 구성하는 HTML 코드를 쉽게 접근할 수 있도록 만든 모델
자바스크립트로 DOM을 활용하여 화면을 구성하는 코드에 접근 가능하고 원하는대로 변경 가능하다 -
document
DOM의 진입점 역할 수행 -
document.getElementById('').value/document.getElementById('').innerHTML
특정 아이디를 가진 HTML 요소에 접근해서 값을 가져온다 -
.length
문자열의 길이 -
함수
명령어 모음
코드를 여러 번 사용해야 할 때 함수를 사용한다
글자를 쓸 때마다 자동으로 글자 수 세기
= 키보드를 누를 때마다 글자 수 세기
-> 글자 수 세는 코드를 함수로 만들어줌 -
이벤트: 마우스 클릭(
onclick), 키보드 누름(onkeydown), 값 변화, 페이지 로딩... -
이벤트 핸들링: 이벤트가 발생하면 ~해라
HTML 태그 안에이벤트=이벤트 핸들링작성 -
.substring()
문자열 남기기
제한 글자수 넘어가면 글자 입력이 더 이상 안되게 한다
💻 미니 스타크래프트
https://github.com/yoonmallang22/JavaScript/tree/main/practice/game
-
jQuery
자바스크립트를 쉽게 사용하게 해주는 라이브러리
장점- 간결한 문법
- 편리한 API
- 크로스 브라우징
-
제이쿼리 함수
.click(),.fadeIn(),.fadeOut(),.animate(),.css(),.text()
구글링 해서 사용 -
함수 정의 & 호출 분리
함수를 한 번만 사용한다면 두 가지 과정은 비효율적
function hello() {
console.log('hello');
}
// $(선택자).행위;
$('#click').click(hello);- 익명함수
함수를 따로 정의하지 않고 호출할 수 있다
함수 이름을 정해주지 않고 바로function () {원하는 코드}로 작성한다
$('#click').click(function () {
console.log('hello');
});- 콜백함수
함수에서 complete 인자를 주면 함수의 모든 실행이 끝나고 난 뒤에 complete 부분의 함수를 실행한다
💻 기념일 계산기
https://github.com/yoonmallang22/JavaScript/tree/main/practice/date
-
객체
{key: value}속성
key 속성명
value 값, 속성값 - 문자열, 숫자, 배열, 객체, 함수(메서드)도 들어갈 수 있다 -
자바스크립트의 모든 것은 객체다
content.length;문자열도 하나의 객체
document.write();돔을 다루는 객체
console.log();콘솔 객체 -
Date 객체
내장 객체
자바스크립트에는 특정 기능을 가진 객체가 내장되어 있어서 활용할 수 있다
var now = new Date();현재 시각을 기준으로 Date 객체가 만들어져서 변수에 담긴다
변수를 사용해서 now.getMonth(), now.getDate(), now.getTime() 등의 Date 객체의 메서드를 사용할 수 있다
// 특정 날짜(문자열)의 Date 객체 생성
var christmas = new Date('2020-12-25');
console.log(christmas); // Fri Dec 25 2020 09:00:00 GMT+0900
// 특정 ms의 Date 객체 생성
var ms = new Date(1000);
console.log(ms); // Thu Jan 01 1970 09:00:01 GMT+0900https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
