본문 바로가기

안드로이드 웹앱 콘테츠 개발자 양성(국비지원)226

HTML + Java script (기초) 프로토타입 (전역 변수,함수 처럼.. 상속처럼) 프로토타입에 대해서 알아보자. 간단히 프로토 타입에 대해 설명을 하면, C++,Java등에서 class를 들어봤을 것이다. 보통 Class는 변수와, 함수를 묶어서 보관하는 그런 것이라 한다면, JS에서는 class라는 개념이 없었다. (최근에 ECMA6 표준에서 Class 문법이 추가됨.) 프로토 타입은 만약 변수 a, b를 가진 class A가 있을 시 var bob = new A(); var kim = new A(); 선언했을 시, 메모리에는 bob에 변수 a,b kim에 변수 a,b를 할당한다. 만약 100개의 객체를 만든다면? 200개의 변수가 메모리에 할당한다. 이럴때 프로토 타입을 사용하여 해결 할 수 있다. 프로토타입이라는 빈 공간 Object에 a,b를 넣어놓고 bob, kim이 공유해서.. 2019. 12. 13.
HTML+Java script (기초) 객체 사용방법 객체의 종류 및 생성자 사용, 정보의 은닉으로 변수 접근 방법, 객체 복사 등을 알아본다. 객체의 종류에 대해서 알아보자. 리터럴 객체는 객체를 생성하면서 설계하는 방식이다. person의 멤버 함수도 호출 해보자. 위 사진처럼 person.show(); 호출했지만 화면에 아무것도 안보인다. 그 이유는 멤버 변수에 접근하려면 this. 키워드를 써줘야 한다. 그리고 객체에서 멤버 함수를 선언하는 문법은 정해져 있다. (객체 안에서 아래처럼 선언하면 에러남) 만약에 새로운 객체를 만들고 싶다면 다시 만들어야 한다. 멤버 함수에도 파라미터를 줄 수 있다. person2.show에는 파라미터가 없다. 그래도 전달을 한다면? show()의 내용이 실행되고 전달된 파라미터는 arguments에 저장된다. pers.. 2019. 12. 12.
HTML+Java script (기초) 함수 사용 함수 선언 및 호출하고 매개변수,리턴도 해본다. 지역,전역 변수의 차이를 알아보고, 함수의 매개변수를 저장해주는 내장 배열 변수 및 클로저 변수에 대해서도 사용해 본다. 우선 간단하게 함수를 선언하고 호출을 해보자. 함수 호출을 먼저하고 선언을 나중에 해도 오류가 안난다. 다른 스크립트에서 사용을 해도 동작이 된다. 위 상황가 같이 다른 스크립트 안에서 호출을 한다. (차이점 : 스크립트가 나눠져서 호출될 시, 함수선언 부분이 위에 있어야함. 호출보다 아래면 동작안한다!!!) body요소 안에서 함수 호출하면 잘 된다. doby는 head보다 뒤에 실행되기 때문에 아까와 비슷한 상황이다 스크립트가 나눠져 있을시 호출을 먼저하고 아래에 선언을하면 동작을 안한다. 우선 함수의 파라미터 전달을 알아보기 전에 .. 2019. 12. 12.
HTML+ Java script (기초) dialog 다양한 다이얼로그 창을 확인 일반적인 알림 경고창을 띄워보자. 알림창이 두개를 적었을 시, 하나를 닫으면 다음창이 나온다. 자동으로 확인,취소 버튼이 있는 다이얼로그도 있다. 확인, 취소 버튼에 따라서 제어를 하고 싶다면, 리턴값을 받아서 알맞게 사용하자. 다이얼로그 창에 입력한 값은 string타입으로 리턴된다. 주의하자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Dialog //일반적인 알림 경고창.. 알림이 여러개면 순차적으로. alert(); alert('알림'); // 사용자에게 확인/ 취소를 선택하도록 하는 다이얼로그 // 리턴값 : true, false var answer=confirm('종료하시겠습니까?.. 2019. 12. 11.
HTML+Java script (기초) 배열 자바스크립트를 이용하여 배열 사용방법에 대해서 알아보자. 우선 배열을 만들고 화면에 출력해보자. arr2는 배열 길이가 3으로 만들었지만, 추후에 없는 인덱스 번호를 사용해도 자동으로 추가 생성된다. arr2 배열의 값을 출력해보자. 위 사진처럼 없던 인덱스를 사용해도 추가 생성이 되고 값도 들어간다. 중간에 자동으로 생성된 방에는 undefined로 나온다. 이제 객체로 배열을 생성해보자. 코틀린이랑 비슷하게 자바스크립트에서 for문을 사용하여 배열 값을 출력해 보자. 자바스크립트에서 배열을 만들고, 나중에 값을 추가해도 된다. 지금까지 대괄호를 사용해서 배열 요소들에 접근했지만 키값을 이용해서 접근 가능하다. 연관 배열 (키값 사용)로 만드는데 객체처럼 만들 수 도있다. 연관 배열로 사용할 때 ['키.. 2019. 12. 11.
HTML+Java script (기초) HTML요소와 속성을 JS객체,멤버변수처럼 사용 요소를 이용하여 객체처럼 JS에서 제어하기 HTML JS 요소 : 객체 속성 : 멤버변수 자바스크립트에서 HTML 요소, 속성을 사용해보자. 우선 임의 값을 입력하고 계산하는 것을 해보자. 계산된 결과를 보여줄 input 요소를 만들자. JS에서 HTML 속성을 멤버 변수처럼 사용하여 값을 얻어와 보자. 위 사진처럼 값은 string으로 되기 때문에, 문자열 결합이 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66.. 2019. 12. 11.
HTML+Java script (기초) 연산자, 기능 메소드 알아보기 ==, ===, >>, >>>, Number.MAX_VALUE, 전역 변수, typeof(), parse 알아봄. 자바스크립트에서는 중복된 이름의 변수를 선언해도 에러가 안난다. 그리고 같은 변수에 마지막에 값이 없으면 기존의 값이 나온다... (신기) 수치형 변수값 표기를 해보자. (정수,실수) '==' 비교는 값을 비교하는 연산자이다. 숫자와 문자열은 다른 자료형이므로 + 연사자를 사용하면 결합이 된다. '===' 연산자는 자료형을 비교하는 연산자이다. 자바에서는 0으로 나누면 예외가 발생한다. 하지만 자바스크립트에서는 Infinity로 출력됨. 비트 연산자도 존재한다. 표현 가능한 최대값을 알아보자. var을 사용하여 변수 선언을 했지만, 안쓰고도 변수를 사용할 수 있다. ( 전역 변수로 됨) 수치.. 2019. 12. 11.
HTML+Java script (기초) 자료형, 함수 참조, 객체 만들기 자료형과 기능 메소드, 객체 사용하는 간단 예제 자바스크립트에서 사용하는 자료형의 종류를 알아보자. 변수 선언은 var을 사용한다. (자료형을 var로 사용) 자료형 위치에 var만 사용하는데... 일단 여려 값을 대입하자. var 변수에 클래스도 넣고, 값 없이도 넣어서 출력해보자. 이제 궁금하던 var 변수들의 자료형은 어떻게 출력이 될까? 숫자는 number, 글자는 string, ture는 boolean, 클래스는 object, 값이 없으면 undefined로 된다. var은 딱히 자료형이 고정이 아니기 때문에, 처음에 숫자를... 그다음 문자를 참조해도 상관이 없다. 함수도 변수에 참조 가능하다. 함수의 자료형을 출력해보자. function으로 나온다. 문자열은 객체로 인식된다. 길이를 출력하면.. 2019. 12. 11.
HTML+Java script (기초) 자바스크립트 문법 사용 (<script> 사용부터..) - document.write(), 세미콜론이 없어도 사용 가능, 외부 스크립트 적용 알아보기 자바 스크립트를 사용하기 위해서는 html문서는 반드시 필요하다. 우선 가장 기초인 Hello world를 출력해보자. 자바스크립트도 줄바꿈은 자동으로 되지 않는다. 자바스크립트문 안에 HTML 언어를 사용 가능하다. HTML에서 태그는 줄바꿈을 해주는 태그이다. 비슷하게 자바스크립트 문법에서 HTML 문법을 사용 가능하다. 자바스크립트와 자바는 관계가 없는 언어이지만, 참조 변수를 출력하면 비슷하게 toString으로 자동 출력이된다. 반복문도 사용 가능하다. 실행 순서는 크게 보면 HTML문서 안에 있으므로, head 영역을 실행하고 body영역을 실행한다. 그래서 Hello world와 button은 가장.. 2019. 12. 11.