프로그래밍/자바스크립트17

• 

  HTML, CSS 및 JavaScript를 사용하여 웹 아날로그 시계를 만드는 방법 HTML, CSS 및 JavaScript를 사용하여 웹 아날로그 시계를 만드는 방법 bing GPT로 생성한 AI코딩 아래는 HTML, CSS 및 JavaScript를 사용하여 아날로그 시계를 만드는 방법입니다. bing GPT로 질문하여 얻은 대답으로 만든 웹 아날로그 시계입니다. HTML, CSS 및 JAVASCRIP를 사용하여 만들어 달라고 했습니다. 위의 코드는 HTML, CSS 및 JavaScript를 사용하여 아날로그 시계를 만드는 방법을 보여줍니다. 이 코드를 사용하여 웹 페이지에 아날로그 시계를 추가할 수 있습니다. 시계의 크기와 색상을 변경하려면 CSS를 수정하십시오. 시계의 시, 분 및 초를 조정하려면 JavaScript를 수정하십시오. 아래는 웹 코딩으로 작업된 아날로그 시계 적용 시.. 프로그래밍/자바스크립트 2023. 11. 24.

• 

  [자바스크립트] 예외 처리 - try catch finally 문 예외 처리 프로그래밍을 하다 보면 예상치 않은 곳에서 오류가 발생할 때가 있다. 그 오류가 문법적인 오류일 때도 있고, 정상적인 문법인데도 오류가 발생할 때가 있다. 에러 (Error) - 문법적 오류일 때 발생하는 오류. try{}catch{} 문으로 해결할 수 없는 오류. 예외 (Exception) - 정상적인 문법인데 프로그램 실행 중 발생하는 오류. try{}catch{} 문으로 해결할 수 있는 오류. 예외 처리 방법 프로그램에서 예외가 발생하면 프로그램이 멈춰버리는 상황이 발생한다. 그래서, 프로그램에서 예외 발생시 이를 처리하기 위해 try{}catch{}finally문을 사용한다. 1. try{}문 : 예외가 발생될거라는 의심가는 부분에 try{}문으로 감싸고, 2. catch{}문 : 그 .. 프로그래밍/자바스크립트 2017. 8. 30.

• 

  [자바스크립트] 문서 객체 가져오기 문서 객체 가져오기 정적인 HTML 를 자바스크립트를 사용하여 동적으로 가져온다. getElementById(id) 매개변수 id가 태그 속성의 id와 같은 값일 때 문서 객체를 가져온다. 한번에 하나씩만 가져올 수 있다. getElementsByName(name) 매개변수 name가 태그 속성의 name과 같은 값일 때 문서 객체를 가져온다. 동일한 값이 여러개 있으면 배열로 가져온다. getElementsByTagName(tag) 매개변수 tag가 태그 와 같은 값일 때 문서 객체를 가져온다. 동일한 값이 여러개 있으면 배열로 가져온다. querySelector(선택자) 가장 처음 선택되는 문서 객체를 가져온다. (#id)에서 id와 같은 id를 가진 태그를 찾는다. querySelectorAll(선.. 프로그래밍/자바스크립트 2017. 8. 29.

• 

  [자바스크립트] window.moveBy() window.moveTo() - window 이동하기 윈도우 이동 - window.moveTo(x, y) | window.moveBy(x, y) window객체의 멤버 메소드(moveTo(), moveBy())로 윈도우를 이동 시킨다. window.moveTo(x1, y1) : 윈도우를 화면 (x1, y1) 에 위치시킨다. window.moveBy(x2, y2) : 윈도우를 화면 현 위치에서 (x2, y2) 만큼 이동시킨다. 사용 예 [script] // 윈도우 객체를 생성한다. var childWindow = window.open('','','width=200px, height=200px'); childWindow.document.write('window move'); // 윈도우 시작 좌표 - 단위 px childWindow.moveTo(100, 100.. 프로그래밍/자바스크립트 2017. 8. 28.

• [자바스크립트] Date 객체 및 D-day(디데이 날짜 및 시간 계산 Date 객체 날짜 및 시간을 구하는 객체 Date 객체 생성 new Date() : 현재 날짜 및 현재 시간를 가진 객체 생성 new Date(년, 월 - 1, 일, 시, 분, 초, 밀리 초) : 매개변수 값으로 날짜를 가진 객체가 생성된다. 월 계산시 (-1)을 주의 사용 예 // 현재 날짜 구하기 var now = new Date(); // 날짜 객체 생성하기 var newDay = new Date(2020, 7, 1, 10, 20, 30, 40); document.write("now : " + now); document.write(" "); document.write(" "); document.write("newDay : " + newDay); document.write(" "); 결과값 Date.. 프로그래밍/자바스크립트 2017. 8. 27.

• 

  [자바스크립트] 문서 객체 동적 생성 - createElement(), createTextNode(), appendChild(), innerHTML() 문서 객체 동적 생성 문서 객체 동적 생성(1) HTML 에 정의 되어 있지 않은 요소 노드와 텍스트 노드를 동적 생성한다. 아래에서 요소 노드와 텍스트 노드에 대해 알아본다. 본문 내용 동적 생성하기 html, head, title, body 와 같은 태그를 요소 노드라 한다 태그 사이에 '문서 객체 동적 생성' 또는 태그 사이에 있는 '본문 내용 동적 생성하기' 를 텍스트 노드라 한다. 문서 객체를 동적 생성을 위해 아래를 참고한다. 요소 노드 생성 : createElement(tag) - html 태그를 매개변수로 넘긴다. 텍스트 노드 생성 : createTextNode(text) - html 태그 사이에 넣을 텍스트를 매개변수로 넘긴다. html에 연동 하기 appendChild(노드) : 위에서.. 프로그래밍/자바스크립트 2017. 8. 25.

• 

  [자바스크립트] window.resizeTo(), window.resizeBy() - 윈도우 크기 변경 윈도우 크기 - window.resizeTo(x, y) | window.resizeBy(x, y) window객체의 멤버 메소드(resizeTo(), resizeBy())로 윈도우 크기를 변화 시킨다. window.resizeTo(x1, y1) : 윈도우를 화면 (x1, y1) 의 크기를 가진다. window.resizeBy(x2, y2) : 윈도우를 화면을 현 크기에서 (x2, y2) 만큼 증가시킨다. 사용 예 [script] // 윈도우 객체를 생성한다. var childWindow = window.open('','','width=200px, height=200px'); childWindow.document.write('window resize'); // 윈도우 시작 크기 - 단위 px childWi.. 프로그래밍/자바스크립트 2017. 8. 24.

• 

  [자바스크립트] window.open() 속성 및 사용법 window.open() 윈도우 새창을 생성할 때 호출한다. 자식 윈도우로 접근할 수 있다. 새창 (자식)윈도우 생성 window.open([URL], [NAME], [FEATURES], [REPLACE]); [URL] : 새창으로 띄울 웹 페이지 주소 [NAME] : 새창 이름 [FEATURES] : 새창의 옵션(크기, 위치, 메뉴바 등의 옵션 설정) [REPLACE] : 히스토리 리스트 옵션 사용 예 var childWindow01 = window.open('', 'child01', 'top=100px, left=100px, height=500px, width=500px'); childWindow01.document.write('자식창 childWindow01'); childWindow01.docum.. 프로그래밍/자바스크립트 2017. 8. 23.

• [자바스크립트] Math 객체 메소드 Math 객체 수학계산에 쓰이는 Math객체 Math객체는 생성하지 않고 객체자체를 바로 사용한다. 객체 속성 Math.E : 오일러상수 값 (2.718281828459045) Math.LN10 : 밑수가 10인 사용로그 값 (2.302585092994046) Math.LN2 : 밑수가 2인 자연로그 값 (0.6931471805599453) Math.PI : 원주율 값 (3.141592653589793) Math.SQRT2 : 2의 제곱근값 (1.4142135623730951) Math 객체의 메소드 Math.abs(x) : x의 절대값 리턴 Math.ceil(x) : x보다 크거나 같은 수 중 가장 작은 정수값를 리턴 Math.floor(x) : x보다 작거나 같은 수 중 가장 큰 정수값을 리턴 Mat.. 프로그래밍/자바스크립트 2017. 8. 21.

• 자바스크립트 Array 객채의 메소드 사용에 대해 알아보자 Array 객체의 메소드들에 대해 알아보자. 우선 Array 객체를 선언한다 var arrayEx = [17,14,13,11,15,12,16,20,19,18]; 1. concat(param1,,,) : 파라메터로 입력한 요소들을 모두 합친 배열을 리턴 var arr1 = [31,32,33]; var arr2 = [41,42,43]; var array01 = arrayEx.concat(arr1,arr2); document.write("arrayEx.concat(arr1,arr2) : " + array01 + " "); 출력 2. join() : 배열 요소들을 문자열로 변환하여 리턴 var array02 = arrayEx.join(); document.write("arrayEx.join() : " + arr.. 프로그래밍/자바스크립트 2017. 3. 14.

• 자바스크립트 String 객체 메서드 String 객체 메서드 String 객체의 메서드를 사용하여보자 아래 stringEx String 변수를 각 String메서드에서 활용한다. var stringEx = "This Is String."; 출력 1. charAt(position) : position 위치의 문자를 리턴 var stringEx01 = stringEx.charAt(3) document.write("stringEx.charAt(3) : " + stringEx01 + " "); 출력 2. charCodeAt(position) : position 위치의 문자를 유니코드번호로 리턴 var stringEx02 = stringEx.charCodeAt(3) document.write("stringEx.charCodeAt(3) : " + s.. 프로그래밍/자바스크립트 2017. 3. 13.

• 자바스크립트 객체(object) 객체 ( Object ) 객체는 키, 요소(속성), 메소드로 이루어져 있다. 객체는 {}(중괄호) 로 생성한다. 예제) var car = { name : '소나타', displacement : '2000cc', type : '승용차', tire : 4, drive : function (){ document.write("메서드 호출."); } }; 위 예제에서 키,요소(속성), 메서드는 아래와 같이 구분된다. 키 : name, displacement, type, tire 요소(속성) : '소나타', '2000cc', '승용차',4 메소드 : drive 키 와 요쇼(속성) 객체를 대입한 변수에서 키를 이용하여 객체의 요소에 접근하는 방법을 알아보자. 객체변수['키'] => 요소(속성) 객체변수.키 => 요소.. 프로그래밍/자바스크립트 2017. 3. 11.