JavaScript 31

Do it : JS -6. 객체

객체란? -'복합' 자료형이라고 불린다 -객체 안에 여러 자료형 포함 된다 : 숫자, 문자열 등 -객체도 자료형이다 = 자료를 저장하고 처리하는 기본 단위 -하나의 변수에 다양한 정보를 담기 위해 사용 -사용 ex. 회원 정보 : 이름, 아이디, 비번, 생년월일 -객체(Object) : 자바스크립트 프로그램에서 인식할 수 있는 모든 대상 가리킴 -자바스크립트에서는 웹 문서나 웹 브라우저와 관련된 것들을 객체로 인식 객체 종류 내장 객체 -자주 사용하는 요소는 미리 객체로 정의되어 있음 ex. Date 객체, Number, Boolean, Array, Math 문서 객체 모델(DOM) -객체를 사용해 웹 문서를 관리하는 방식 -이미지, 링크, 텍스트 필드 등도 모두 각각 객체로 만들어져 있음 ex. Doc..

JavaScript 2020.10.08

Do it : JS -5. 함수와 이벤트

여러 동작을 묶은 덩어리 - 함수 함수를 사용하면 좋은점 -함수 : 명령을 한 번에 실행할 수 있게 한 덩어리로 묶는 것. -명령의 시작과 끝을 명확하게 구별 -함수에 별도의 이름 붙이면 > 같은 기능이 필요할 때마다 함수 실행 -내장함수 : 미리 만들어져 있어서 함수 가져다 사용 가능 함수 정의하고 실행 -함수 선언 : 어떤 명령을 처리해야 할지 미리 알려주는 것 ex. addNumber()함수 선언 -function 예약어, 중괄호 안에 함수에서 실행할 여러 명령 묶는다. -함수 실행 : 선언한 함수를 가져와 사용 -함수 이름을 사용한다 = 함수 호출한다 -자바스크립트 소스 안 어디에서든 함수 실행 가능 > 보통 앞부분 이나 뒷부분에 함수 선언 모아 놓는다. -함수 선언 부분을 먼저 해석 버튼 눌렀을..

JavaScript 2020.10.05

Do it : JS -4. 제어문 : if문 | if..else문 | switch문 | for문 | while문 | do..while문 | break문 | continue문

조건에 따라 흐름 조절 - if문, if...else문, 조건 연산자 -프로그램 짤 때 작성 순서대로 명령 실행X -조건에 따라 명령 실행 순서가 정해짐 = if문 자주 사용 if문 -소괄호 조건이 true이면 > 중괄호 안에 자바스크립트 실행 -소괄호 조건이 false이면 > 중괄호 안에 자바스크립트 무시 if....else문 -소괄호 조건이 true이면 > if 중괄호 안에 자바스크립트 실행 -소괄호 조건이 false이면 > else 중괄호 안에 자바스크립트 실행 조건 연산자 - ? 와 : -조건이 하나이고, true일 때와 false일 때 실행할 명령도 하나뿐일 때 사용 -(조건) ? (조건이true일때) : (조건이 false일때) -60점 이상이면 통과, 그렇지 않으면 실패 truthy값, fa..

JavaScript 2020.10.03

Do it : JS -3.변수, 자료형, 연산자

변수 -변하는 값을 저장할 때 사용한다 -상황에 따라 다른 값을 입력받아야 할 때 사용한다 ex. 나이=올해 연도 - 태어난 연도 +1 -변수(Constant) : 나이, 올해 연도, 태어난 연도 -상수(Variable): 1 변수를 선언하는 규칙 3가지 -변수에 이름을 붙이는것 = 변수를 선언한다 -var 키워드 뒤 + 변수 이름 적기 ex. var apple; 규칙 1. 이름은 의미 있게 짓는다 ex. 올해 연도 currentYear 규칙 2. 여러 단어 연결한 이름 : 낙타 표기법(Camel Case) : 두 번째 단어부터는 대문자로 시작 규칙 3. 선언 불가한 이름 있음 = 변수의 첫글자 : 문자, 밑줄(_), 달러($)로 시작해야한다 변수에 값 | 식 지정하기 -변수를 선언하면서 저장 var a..

JavaScript 2020.10.01

Do it : JS -1,2.자바스크립트란, 입력과 출력, 규칙6가지

웹 프로그래밍 이란? -웹 브라우저와 관련된 프로그램을 작성하는 것 -자바스크립트는 웹 프로그래밍에 가장 많이 쓰인다 자바스크립트로 무엇을 할 수 있을까? 1. 웹 사이트 동적으로 만든다 (ex. 화살표 버튼) 2. 웹 브라우저 프로그램 만든다 (ex. 버스정류장 어플리케이션, 그림판) 3. 서버용 프로그램 만든다 (ex. node.js) 자바스크립트의 특징은? -모든 웹 브라우저에서 작동한다 (ES5 문법 주로 사용) -별도의 프로그램 설치X -다양한 용도의 프로그램 개발 (ex. 어플, 아두이노, 드론, IoT) -공개 API 사용 가능 | API = 데이터를 다른 사람이 손쉽게 가져갈 수 있도록 미리 준비한 체계 -다양한 라이브러리(ex. jQuery), 프레임워크 (ex. 앵귤러, 뷰) 자바스크립..

JavaScript 2020.09.30

드림코딩 : JS -2. 콘솔 출력, JS 공식사이트, async VS. defer (by.자바스크립트 기초강의, ES5+)

Hello World 출력 console.log('Hello World'); node.js 설치하기! >여기서 js 파일 실행 가능 html 파일 연결하기 > js 파일 연결해서 실행 가능> 태그 안에 개발자 모드(ctrl+ shift + I) > console 탭 들어가면 Hello World 확인 가능 = node.js와 웹 모두 js에 대한 API가 있다(공통) 개발툴 활용하기 console 탭에서도 js바로 실행할 수 있다 source 탭 = 디버깅할 때 유용 > break point를 건다 자바스크립트 공식사이트는? 이크마 http://ecma-international.org/ Welcome to Ecma International Welcome Ecma International is an ind..

JavaScript 2020.09.29

생활코딩 : JS 정리 -5. 낮/밤 버튼 (by 웹 어플리케이션 만들기)

JS 낮/밤 버튼 1.낮/밤 버튼을 만든다. 2.오른쪽 구석탱이로 옮긴다. #control { float: right; } : CSS태그이므로 style태그에서 조정한다. 3.배경색/글자색이 다른 낮/밤 태그를 만든다. body.white{ background-color: white; color:black; } : CSS태그이므로 style태그에서 조정한다. class속성은 white이다. body.black{ background-color: black; color:white; } : CSS태그이므로 style태그에서 조정한다. class속성은 black이다. 4.버튼을 누르면 바디태그의 속성이 달라진다. 5.완성된 4의 태그를 모든 페이지에 붙여넣기한다.

JavaScript 2020.08.29

생활코딩 : JS 정리 -4. 이벤트 태그 (by 웹 어플리케이션 만들기)

JS 이벤트 태그 -HTML tag -JS tag prompt("hello world"); alert("hello world"); :알림창 API. 태그 안에 있을땐 그냥JS 태그이다. : 태그 안에 들어오면 onclick은 이벤트 태그가 된다. alert은 HTML태그 안에 넣을 수 있다. onclick : 클릭하는 이벤트 onfocus : 커셔 갔다대는 이벤트 onblur : 다른곳에 갔다대는 이벤트 : text창에 내가 원하는 글을 쓰고, 버튼을 누르면, 알림으로 그 글이 나오는 코드이다. getElementById : 아이디를 통해 태그를 가져온다 는 뜻. document. : 함수 분류 태그 .value : 값을 표시하는 태그 id="user_input" : 의 아이디를 유저인풋으로 설정한다는 ..

JavaScript 2020.08.29

생활코딩 : JS 정리 -3. 함수 (by 웹 어플리케이션 만들기)

함수 function 함수이름() {~~@~~} 함수이름(); function a(){ document.write("Hello Function"); } a(); 반복문과 다른점은 a();를 어디에서나 써도 된다. 출력이 된다. 함수의 입력 function a(input){ document.write(input); } a(2); : 2를 넣으면 2가 나온다. 3을 넣으면 3이 나온다. input으로 동일하게 했다. function a(input){ document.write(input+1); } a(5); : 6이 나온다. a에 있는 5가 input으로 들어간다. 그리고 1이 더해진다. 함수의 출력 function a(input){ return input+1; } document.write(a(5)); :..

JavaScript 2020.08.29