기록저장소

2.1 Hello, world! 2.2 코드 구조 2.3 엄격 모드 2.4 변수와 상수 2.5 자료형 2.6 alert, prompt, confirm을 이용한 상호작용 2.7 형 변환 2.8 기본 연산자와 수학 2.9 비교 연산자 2.10 if와 '?'를 사용한 조건 처리

1.1 자바스크립트란? 정의 '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어 JS로 작성한 프로그램을 스크립트(script)라고 부름, 스크립트는 웹페이지의 HTML내에 작성할 수 있고 웹페이지를 불러올 때 스크립트가 자동으로 실행됨 특별한 준비나 컴파일 없이 보통의 문자형태로 작성, 실행 가능 자바(Java)와는 매우 다른 언어 i 왜 자바스크립트인가? 처음 LiveScript로 불리다가 인기많은 Java의 이름을 이용해 홍보하기 위해 명칭이 바뀜, 자바와는 독자적인 언어, 꾸준한 발전으로 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어가 됨 JS는 브라우저뿐 아니라 서버에서도 실행 가능, 이 외에도 JS엔진(JS engine)이라 불리는 특별한 프로그램이 들어있는 모든 디바이스..

이벤트 1강. 이벤트 객체 들여다보기 2강. 이벤트 객체 파라미터? 함수의 구조 // 함수 선언 function makeLog(str) { console.log(str); } // 함수 호출 makeLog('안녕하세요'); makeLog함수는 파라미터 하나(str)를 받도록 정의도어, 함수를 호출할 때 파라미터로 값을 하나 넘길 수 있음 이벤트 핸들러 $(document).on('keydown', keyboardInput); 이벤트 핸들러 함수(keyboardInput)를 호출하는 코드가 자바스크립트 내부에 구현된 상태, 함수 선언에 파라미터를 넣는 것만으로도 이벤트 객체 전달이 가능 // 이벤트 객체를 사용할 경우 function keyboardInput(e) { console.log(e.key); }..

jQuery I 1강. DOM pt.1 HTML의 트리구조 = 문서 객체 모델(Document Object Model), DOM 구조, 텍스트가 아닌 Object로 생성된 구조 2강. DOM pt.2 document - html - head - title / meta - body - form - input typeof document = "object" document.getElementById('submin-btn'); //document라는 최상위 객체에서 불러옴 jQuery를 이용해서 DOM트리 다루기 - 다양한 방식으로 DOM객체 선택하기 - DOM 트리에 요소 추가하고 빼기 - DOM트리의 요소 변형시키기 3강. jQuery 사용해보기 Hello Codeit! 청소 코딩 숙제 영화 $("#hel..

과제로 워밍업 1강. JavaScript의 기능들 2강. Math 정리노트 절대값(Absolute Number) : Math.abs(x) console.log(Math.abs(-10)); //10 console.log(Math.abs(10)); //10 최댓값(Maximum) : Math.max(a, b, c) console.log(Math.max(2, -1, 0); //2 최솟값(Minimum) : Math.min(a, b, c) console.log(Math.max(2, -1, 0); //-1 거듭제곱(Exponentiation) : Math.pow(x, y) console.log(Math.pow(2, 3); //8 제곱근(Square Root) : Math.sqrt(x) console.log(Mat..

HTML, CSS와의 콜라보레이션 1강. 환경설정 F12 - console 에서 임시적용 가능 2강. HTML의 해결사, 자바스크립트 Home Home Home //▽ Home Home //photo라는 id값을 가진 요소 가져오기 //src 변경 Home 3강. 코드를 함수로 빼기 Home Home //photo라는 id값을 가진 요소 가져오기 //src 변경 Home //clickSeoul이라는 함수 호출 //간략히 하기 Home Home //하나의 함수로 남기기 .......?? seoul tokyo 4강. 폰트 굵기 바꾸기 5강. jQuery jquery cdn 최신버전, minified Home Home //▽ 6강. jQuery 설치 정리 노트 1. 링크 사용하기 _ jQuery CDN 더 빠..

과제로 복습하기 1강. 팩토리얼! 0! = 1 1! = 1 2! = 1 * 2 = 2 3! = 1 * 2 * 3 = 6 .. 을 구하는 함수 만들기 function factorial(n) { let result = 1; // 여기에 코드를 작성해 주세요. for(let i =1; i= 1; i--) { result = result * i; } return result; } // 테스트 코드 console.log(factorial(12)); console.log(factorial(6)); console.log(factorial(3)); console.log(factorial(0)); 2강. 거스름돈 구하기 function calculateChange(payment, cost) { // 코드를 작성해 주세요..

자료형 심화 1강. 다양한 숫자 표기법 //숫자 표기법 let millionaire = 100000000; let myNumber = 1e9; //지수표기법 1 * e의 9승 console.log(millionaire); //100000000 console.log(myNumber); //100000000 console.log(millionaire === myNumber); //true console.log(25e5 === 2500000); //true console.log(5.3e3 === 5300); //true console.log(-6.1e8 === -610000000); //true console.log(16e-5 === 0.0016); //true console.log(3.5e-3 === 0.0..

배열 1강. 배열 순서(위)가있는 값을 활용할 때 객체보다 유용 //배열(Array) let courseRanking = { '1st' : 'js기초', '2nd' : 'git', '3rd' : '컴퓨터개론', '4th' : '파이썬' } //▽ let courseRanking = [ 'js기초', //요소(element) 'git', '컴퓨터개론', '파이썬' ] //배열내 순서 index == propertyName(객체) //indexing : 원하는 배열의 요소를 가져올 때, 0~ //console.log(배열이름[index]); console.log(courseRanking[0]); //js기초 console.log(courseRanking[2]); //컴퓨터개론 console.log(cours..

객체 1강. 객체와 프로퍼티 객체(Object) : 연관된 여러 값을 한번에 저장 '자바스크립트의 모든 것이 객체다!' { brandName : '코드잇', bornYear : 2017, isVeryNice : true, worstCourse : null, bestCourse: { title :'자바스크립트', language : 'javascript' } //(property)key : (property)value = property(객체의 속성) // └ string 문자열이지만 └ 문자열, 숫자, 불린, null 가능, 객체내 객체 가능 // 따옴표 생략가능, 생략시 1,2,3 // 1. 첫글자는 반드시 문자, 밑줄(_), 달러기호($) 중 하나로 시작 // 2. 띄어쓰기 x // 3. 하이픈 - ..