★ DATE 시간을 다루는 내장 객체 현재 시각 var now = new Date(); //new 생성자함수() console.log(now); console.log(now.toString); //javascript는 자동으로 toString을 해줌 요소 추출 console.log(now.getYear()); //123 console.log(now.getFullYear());//2023 console.log(now.getMonth());//3(0부터) console.log(now.getDate());//21 console.log(now.getDay());//5(일(0)~토(6)) console.log(now.getHours());//10 console.log(now.getMinutes());//20 co..
★ 문자열 함수 문자열 선언 var txt = "Hello~ Hong~"; 1. 문자열 길이 console.log(txt.length); //자바(field), 자바스크립트(property) 2. 검색 indexOf() : 필드의 위치를 찾아주세요 lastIndexOf() : 끝에서부터 위치를 찾아주세요 console.log(txt.indexOf('~')); //5 console.log(txt.indexOf('~', 6)); //11 console.log(txt.lastindexOf('~')); //11 3. 대소문자 변환 console.log(txt.toUpperCase()); console.log(txt.toLowerCase()); 4. 추출 console.log(txt.substring(2,8));..
★ 형변환, Casting 1. number parseInt(value) 정수형으로 형변환 하여주는 함수 parseInt는 소수점 이하를 절삭한다. var n1 = 3.14; console.log(parseInt(n1)); n1= 3.99; console.log(parseInt(n1)); var n2 = '300'; console.log(parseInt(n2)); // number console.log(n2); // String 2. number parseFloat(value) float 형식으로 형변환 하여주는 함수 var n3 = 100; console.log(parseFloat(n3)); var n4 = '3.14' console.log(parseFloat(n4)); 숫자+문자열 처음부터 숫자가 나..
★ 변수 영역 1. 전역 변수 > HTML 페이지 전역 > 선언문 실행(생성) ~ 페이지 종료(소멸) var num1 = 100; //전역 변수. 태그 내에서 직접 선언. 2. 지역 변수 > 블럭 영역 변수(X), 함수 영역 변수(O), 함수만 지역으로 인식하고, 제어문을 인식하지 못한다. function m1() { var num2 = 200; //지역 변수 console.log('m1', num2); //지역내 지역변수 접근 O console.log('m1',num1); //지역내 + 지역변수 접근 O if(true) { var num3 = 300; //지역변수. if console.log('if', num3); } console.log('m1',num3); //이건 가능 } m1(); // cons..
★ JavaScript Function 구조 function m1(num) { return 10; } ex) 자바스크립트는 초기화가 되지 않는 변수의 상태를 null이라고 하지 않고, undefined라고 한다. console.log(arguments); //예약어 > 내장 배열 : 모든 매개변수를 자동으로 담는 배열 function m1() { console.log('m1'); } m1(); function m2(name) { console.log('name', name); console.log(arguments); //예약어 > 내장 배열 console.log(arguments[0]); console.log(arguments[1]); } m2('홍길동'); m2('아무개'); m2(); m2('홍길동..
★ JavaScript 자료형 1. number 숫자형(정수, 실수) 2. String 문자, 문자열 3. boolean 논리형 4. object 객체형 JavaScript에는 클래스가 없다. 하지만 객체는 있다. JavaScript에서 미리 정의 된 타입 객체는 있다. 개발자가 클래스는 선언할 수 없다. 자바 > 객체 지향 프로그래밍 언어 자바스크립트 > 객체 기반 프로그래밍 언어 5. 기타(=상수) a. null b. undefined c. NaN(Not a Number) 변수, 상수(리터럴) JavaScript는 변수의 타입이 없다. var 변수명; 변수는 모든 자료형의 데이터를 저장할 수 있다. (=자바의 Object 변수) var num = 10; var num2 = 3.14; var name ..
★ Front-end, Client-side Programing 1. HTML 골격 > 블럭 태그 내용물 > 인라인 태그 + 텍스트 2. CSS 서식 3. JavaScript 프로그래밍 기능 ★ JavaScript 브라우저에서 동작하는 프로그래밍 언어 Netscape > Navigator 초기 : 가볍다 + 쉽다 = 기능 적음 > 현재(2014년 이후) : 어려워짐.. C 계열 언어 > 기본 구문이 자바와 유사 Java JavaScript LiveScript > JavaScript 초반 > 폼태그 유효성 검사 + 링크 조작 + 이미지 조작 등.. 중반(~2013) > 모든 태그 조작 > DOM 후반(2014~) > ECMA2015(ES6) > Node.js 출시 (구글 크롬 V8 엔진) > 비 브라우저 ..
★ CSS3 레이아웃 flex(선형 레이아웃), grid(평면 레이아웃) ★ Grid Grid 함수 Grid Container - Grid 전체 영역 Grid Item - 내부 요소 - Grid Cell - Grid의 한칸 Grid Line - Grid Cell을 구분하는 각각의 선 Grid Number - Grid Line 번호 Grid Gap - Grid Cell 사이의 간격 사용 방법 .container { display : grid; } .container { /* 행과 열의 개수 + 크기 > 2행 3열*/ grid-template-rows: 100px 100px; grid-template-columns: 100px 100px 100px; } 행과 열 옵션을 주어 배열을 만들어냄 실행 결과 퍼센트..
