Languages/자바스크립트 (3) 썸네일형 리스트형 자바스크립트로 구구단 표 만들기 구구단 표 만들기 html에 1단부터 9단까지 81개의 숫자를 일일이 써서 테이블을 만들 수 있지만, 이 방법은 너무 오래걸리고 실수가 생길 염려가 있습니다. 이럴 때는 구구단의 규칙을 이용해서 테그의 엘리먼트들을 동적으로 생성해서 표를 만들 수 있습니다. document.createElement() 라는 함수에 테그의 이름을 인자로 넘기면 하나의 엘리먼트를 리턴하고 객체 인스턴스를 추가하고 싶은 엘리먼트에 .appendChild() 메소드를 호출하여 넘겨주면 우리가 생성한 엘리먼트가 자식으로 들어가게 됩니다. html이 아닌 javascript로도 테그를 생성하고, 테그들 간의 위계관계도 조정할 수 있다는 사실을 기억하시기 바랍니다. 구구단 표 입니다. javascript 파일 분리하기 javascript 파일 분리하기 이전 포스팅에서는 html파일 내부에 스크립트 태그를 직접 열어서 그 내부에 코드를 직접 작성해서 화면에 알림창을 띄워보았습니다. 지금은 html내부가 간단하지만 웹페이지가 복잡해질 수 록 여러가지 기능을 하는 스크립트 들이 늘어나게됩니다. 이 때 javascript를 분리시켜 놓으면 나중에 문제가 생겼을 때 코드를 유지보수 하기가 쉽고, 가독성도 좋아집니다. 그렇다면 어떻게 자바스크립트 코드를 html 코드와 분리시키는지 알아보도록 하겠습니다. 우선 html파일 옆에 .js 라는 확장자를 가진 파일을 하나 생성합니다. 이름은 아무거나 지어도 되는데, 헷갈리지 않게 하기 위해서 html파일과 같은 이름을 가지도록 파일을 생성하였습니다. 그리고 나서 index.js 파일 .. 자바스크립트로 HelloWorld 브라우저에 띄우기 자바스크립트로 Hello World 브라우저에 띄우기 HTML파일에서 Java script를 사용하고 싶으면, 위에 형광색으로 칠한 부분처럼 java script 코드 부분을 script 라는 코드로 감싸면 됩니다. alert라는 함수를 이용해서 함수안에 'Hello World"라는 문자열을 넣은 뒤에 html 파일을 실행하면 아래와 같이 웹페이지 상단에 알림창에 우리가 넣었던 문자열을 볼 수 있습니다. alert함수는 단순히 텍스트를 출력하는 것 이외에도, 사용자에게 긴급한 메시지를 보내거나, 디버깅을 할 때 사용됩니다. 이전 1 다음
