본문 바로가기

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

HTML+Java script (기초) BOM - window (최상위) , screen, location, history, navigator 객체에 대해 알아본다. 우선 버튼을 눌렀을 시, 현재창에서 특정 사이트가 열리게 해보자. 현재 창이 아닌, 새로운 창으로 띄워보자. 빈 윈도우를 띄워보자. 새로운 비 윈도우에 글씨도 쓸 수 있다. 윈도우를 닫는 버튼 내용을 적어보자. 그런데 문제는 현재 창이 닫힌다.. (예상은 새로 띄운 창을 닫고 싶었지만) 버튼 두개를 추가하여 열고, 닫아 보자. 변수로 쉽게 제어할 수 있다. 이제 새로 창을 띄우고, 창을 움직여 보자. move window 버튼도 해보자. 누르때마다. 창이 (10,10)으로 이동한다. setTimeout을 이용해 몇초 후에 자동 실행되게 해보자. setInterval을 이용해서 1초마다 .. 2019. 12. 16.
HTML+Java script (기초) DOM 요소(속성 변경, 노드 동적 생성) DOM 트리 요소 속성 변경, 노드 동적 생성 임의 이미지 파일 두개를 추가하여, 이미지에 대한 속성을 변경 해보자. 우선 버튼을 눌렀을 때, 이미지가 바뀌게 해보자. 요소 스타일 속성 변경에 대해서 알아보자. p태그로 글을 쓰고, 버튼을 누르면 속성을 바꾸도록 하자. 요소에 일일이 스타일을 바꾸려니 코드가 너무 길어진다. 만약 바꾸려는 요소가 여려개면 color를 그만큼 써야한다... 클래스 속성을 이용해서 편하게 적용시키자. 처음부터 클래스 속성 변경을 하면, 바뀌지만 첫 번째 버튼을 누르고 클래스 속성으로 변경하는 두 번째 버튼을 누를시 적용이 안된다. (우선순위 때문에) 위와 같이 코드를 추가하면 두 버튼 동작이 잘된다. 이제 DOM트리의 노드를 동적 생성 및 추가해보자. 버튼 3개를 추가하고 하.. 2019. 12. 16.
HTML+Java script (기초) DOM (트리 구성 요소 제어 요소,속성,텍스트 ) ③DOM 트리를 구성하는 요소에 대해 알아보자. node ①요소 : 1 ②속성 : 2 ③텍스트 : 3 노드에 대한 종류와 요소 제어하기 document는 html의 상위, html안에는 head, body가 있다. id가 p1인 요소의 타입과 네임을 알아보자. (결국, 에 타입과 네임이 나옴) .attributes는 가리키고 있는 요소의 속성을 얻어온다. ( id 속성 ) id는 속성이므로, 타입은 2 / 네임은 id로 나온다. .value는 id에 쓴 값이 나온다. 기존 e는 e=document.getElementById('p1'); 로 되어 있었다. (결국, var e는 안에 요소를 가르키게 된다.) a 요소의 속성을 알아보자. 속성이므로 값은 2를 반환한다. e.firstChild는 a요소의 자식이.. 2019. 12. 16.
HTML+Java script (기초) Exception, throw (예외처리) JS에서는 에러가 나면 그 줄 이후부터 실행이 안된다. 그때 사용하는 예외처리를 알아본다. 우선 다이얼로그를 띄우자. 다이얼로그 창 다음에 글자를 출력해보자. 이제 일부러 에러를 만들자. alert -> aler로 바꾸겠다. 이러면 어떻게 실행이 될까? aler 줄도 실행이 안되며, 그 밑에 글자까지 실행이 안된다. 에러가 나오더라도, 그 줄 이외에는 실행을 하고 싶을때 예외처리를 해보자. 에러가 예상되는 줄을 try안에 넣는다. 그리고 만약에 에러가 났을 시, 실행하고 싶은 문장을 catch안에 넣자. 에러가 나서 catch 안에 내용이 실행되고, 그 밑에 글씨도 나온다. try,catch와 같이 사용되는 finally를 알아보자. 에러가 나든 안나든 무조건 실행하고 싶을때는 finally이용하여 그 .. 2019. 12. 13.
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.

티스토리툴바