본문 바로가기

안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/HTML+Java script32

HTML+Java script (기초) Array (배열-정렬,추가,삭제,반복,객체<->json 변환) 배열을 만들고 정렬, 추가,삭제, 반복[forEach,map], 객체json 변환을 알아보자. 배열을 만들어보고, 출력을 해보자. arr과 arr1 배열이 있고 그 두 배열을 붙인 배열을 만들어 보자. 배열에서 특정 요소 값의 순서를 알고 싶다면 indexOf()를 이용하자. (만약 값을 못찾을 시 -1 반환) arr에는 [10,20,30] 들어있다. 배열을 만들고 새로운 값을 넣거나 꺼낼 수 있다. [삽입: push(), 꺼내기 : pop()] stack= [1,2,3,4,5,6] 이라는 배열에 10을 삽입하고, pop()을 이용해서 값을 꺼내보자. (push(), pop() 마지막 인덱스 기준으로 실행한다.) pop()과 비슷하지만 인덱스 기준이 다른 shift()를 알아보자. 우선 새로운 배열을 만.. 2019. 12. 13.
HTML+Java script (기초) Math (소수점 제어, 랜덤값) Math를 이용하여 소수점을 다양하게 표현하고, 랜덤값 범위도 정해보자. 우선 소수점이 있는 실수를 만들고 소수점 이하는 내림하자. 소수점 이하는 반올림해보자. 소수점 이하는 무조건 올림을 해보자. 이제 랜덤값을 만들어 보자. 특정 범위도 가능하다. 주의할 점이 있다. toFixed를 이용하면 리턴값이 문자열이므로 결과값이 문자열 결합으로 나온다.. 주의하자. (toFixed는 소수점을 자를때 사용한다. 기본 랜덤값은 소수점(0.0~1.0)으므로 편하게 사용하기 위해 toFixed를 사용하려면 주의 필요) 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 2019. 12. 13.
HTML+Java script (기초) String (문자열 탐색/대체/자르기/변경) 문자탐색, 문자 대체, 문자열 자르기, 문자열 변경을 알아본다. String에 대해 알아보자. ( === 는 자료형 비교 연산자이다.) string에 대한 메소드들을 알아보자. 문자를 탐색하는 match()를 알아보자 반환값은 찾은 문자열을 리턴한다. match()는 대소문자를 구분한다. 못찾으면 null을 반환한다. 만약 대소문자 구별없이 하고 싶다면 옵션을 추가하자. 해당 찾는 문자가 여러개 중복되어 있다면? g옵션을 추가해야한다. match()로 여러 문자를 반환을 받았을 시, 배열로 받기 때문에 Nice, Nice는 개수가 2개이다. [배열이 아니였다면, 한글자 한글자를 길이로 인식할 것이다.] 리턴 결과가 배열이므로, 요소의 인덱스로 접근 가능하다. 대소문자 구분을 안하려면 옵션을 이용하자. 또.. 2019. 12. 13.
HTML+Java script (기초) Number (지수, 소수점, 진법 변환) 지수 표현식, 소수점 자르기, 진법 변환 표기 우선 수치형과 Number의 자료형의 차이점을 알아보자. Number 객체의 기능들을 알아보자. .toExponetial()을 사용하면 지수 표현이 가능하다. toFixed()를 이용하면 소주점 자르기가 가능하다. 반환형은 문자열 toString()을 이용해 쉽게 진법 변환 표기 가능하다. 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 2019. 12. 13.
HTML+Java script (기초) Date (날짜 객체) 날짜를 표시하는 객체를 알아보고, 버튼 클릭시 날짜 계산, 버튼 클릭시 현재 시간이 나오는 예제이다. 날짜를 가지고 있는 객체 Date()에 대해 알아보자. 모든 객체의 자료형은 object이다. 현재 날짜를 가지고 있는 객체를 문자로 표시하면 요일, 월, 일, 년도가 나온다. 영어로.. toLocaleString() 메소드로 한국 기준으로 표시 가능하다. getYear()은 년도를 알려준다. 그러나 기준이 1900년도를 기준으로 얼마나 지났는지 반환해준다. (현재 년도는 2019년이므로 2019-1900 = 119이다.) 2019가 나오기 위해 getFullYear()로 사용하면 된다. 년도와 마찬가지로 월, 일, 시간을 얻을 수 있다. (단, 월은 0부터 카운트 하기 때문에 +1을 해야 현재 12월 .. 2019. 12. 13.
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.