본문 바로가기

자바스크립트기초

 (20)
<자바스크립트 기초> 10. DOM 스크립트 (1) * DOM 스크립트란 - DOM 스크립트는 Document Object Model 스크립트의 약자로써 HTML문서의 태그나 클래스, 텍스트, 속성 등을 모두 객체로 취급한다는 의미이다. - DOM 스크립트는 위의 객체들을 조정하기 위해 만들어졌다. * 스크립트의 위치 - DOM스크립트에 들어가기전에 스크립트의 위치에 대해 짚고 넘어갈 필요가 있다. 스크립트 태그는 헤드에 넣어야할 것 같지만 단순히 그렇게만하면 DOM스크립트와 같이 body를 읽어야 변수를 받아들이는 스크립트는 수행이 불가능하다. 그러면 어떻게 해야할까. 이를 알아보기위해 id가 main-title인 h1태그를 title이라는 변수에 넣는 돔스크립트를 작성한다고 치자. var title = document.getElementById('ma..
<자바스크립트 기초> 09. 변수의 유효범위 * 유효범위 - 변수는 각각 유효범위(Scope)를 가진다. 이 때 스크립트 전체에 영향을 미치는 변수를 전역변수라 하고, 특정 부분에서만 작동하는 변수를 지역변수라 한다. 아래에서 더 자세히 알아보자. * 전역변수 var a = 100; 위는 전역변수이다. a를 100이라 선언했으므로, 어디에서든 a를 다른 값으로 주지 않는 한 100이다. 즉 어디에서나 쓸 수 있다. 그러나 이러한 점 때문에 최대한 안쓰는 것이 좋다. 겹칠우려가 있으며, 이 때는 뒤에서 선언된 것만 인식된다. * 지역변수 function sample() { var b = 200; } 위와 같이 함수 내에서 생성된 변수를 지역변수라 한다. 이는 변수가 선언된 함수 내에서만 작동한다. 이 함수 밖에서 b를 호출하면 정의되지 않았다고 뜬다..
<자바스크립트 기초> 08. 객체 * 객체란 - 객체는 배열과 비슷하게 여러가지 데이터를 저장할 수 있는 기능을 갖고 있다. 그러나 배열과 달리 인덱스를 직접 원하는 형태로 지정이 가능하다. - 위와 같이 객체는 인덱스가 아닌 키를 지정하여 각 값과 대응시킨다. - 참고로 위의 사진과는 달리 객체에는 순서가 없다. 우리는 순서와는 별개로 키를 이용하여 값을 대응시킨다. * 객체 만들기 - 객체는 배열과 달리 {} 중괄호를 이용하여 만들 수 있다. var grades = {'harry': 80, 'iu': 98, 'suzy': 95}; : 위와 같이 중괄호 안에 키와 값을 각각 대응시켜 만든다. - 또다른 방법으로 빈 객체를 만들고 키와 값을 추가시켜갈 수 있다. var grades = {}; grades['harry'] = 80; gra..
<자바스크립트 기초> 07. 배열 * 배열이란 - 배열(Array)은 한 변수에 여러개의 데이터를 담을 수 있는 형식이다. * 배열의 생성 - 배열은 대괄호를 이용하여 만든다. var students = ['harry', 'iu', 'suzy']; alert(students[0]); alert(students[1]); alert(students[2]); // harry // iu // suzy - 배열에 각각의 원소(Element)를 담으면 이는 각각 식별자를 가지게 된다. 프로그래밍에서 첫번째는 0을 의미한다. 이 때 이러한 식별자를 색인(Index)라 한다. - 배열의 각 원소를 불러오기 위해 변수뒤에 인덱스를 대괄호에 넣어 불러올 수 있다. * 배열과 반복문 - 위의 배열에서 하나의 원소가 추가되거나 여러 개의 원소가 추가되었을 때..
<자바스크립트 기초> 06. 함수 * 함수 - 함수(Function)는 자주 사용하는 로직을 정리하여 필요할 때 마다 재사용하도록 돕는 것이다. - 이는 반복문과 마찬가지로 코드의 재사용성을 매우 높여줄 뿐만아니라 코드 곳곳에서 사용하더라도 함수부분만 보수하면 다른 부분까지 영향을 미치므로 유지보수도 용이하다. - 함수를 사용함으로써 코드가 간단해지고 이는 가독성을 높여준다. - 반복문은 한 곳에서 여러작업을 반복할때 사용한다면 함수는 여러곳에서 비슷한 작업을 반복할 때 사용한다. * 함수의 사용 function sumtwo(a, b){ return a + b; } alert(sumtwo(20, 80)); // 100 - 함수의 정의 : 함수는 먼저 fuction 을 써서 정의를 해야한다. 그 뒤에는 임의의 함수명을 사용한다. - 함수의..
<자바스크립트 기초> 05. 반복문 * 반복문이란 - 반복문은 비슷한 작업을 반복해야할 때 프로그래밍을 통해 컴퓨터에게 반복적 작업을 지시하는 구문이다. 이러한 의미로 반복문은 주로 loop라고 불린다. - 반복문은 while문과 for문으로 나뉜다. * while - while문은 if문과 같이 불린값이 오는 조건을 적고 이 조건이 true일때 반복이되는 구문이다. - 이 때 무한루프가 생성될 수 있으므로 주의해야한다. var i = 0 ; while(i < 5){ document.write('Welcome to My Blog' + i + ''); i ++ } - 위는 i를 통해 무한루프가 생성되지 않도록 제어하였다. i++ 를 통해 i는 1씩 커지게되었고, i가 5보다 작아졌을 때 비로소 while문을 탈출한다. * for 문 - fo..
<자바스크립트 기초> 04. 조건문 * 조건문 - 조건문은 프로그래밍의 꽃으로써 조건이 만족할 때에만 실행시키도록 제어하는 구문이다. * Boolean - 조건문에 앞서 불린 형식이 필수이다. 이는 앞서 비교연산자에서 봤었던 true와 false를 의미한다. 조건문에서 조건이 바로 이 불린이다. * 문법 - 조건문은 if로 작성한다. if(1 > 0) { alert('large'); } // large - 위의 조건은 true 이므로 if문이 실행된다. 이 때 조건이 false라면 이는 실행되지 않는다. if(1==2){ alert('two'); } else { alert('not two'); } // not two - if문은 if else 구문으로 확장이 가능하다. else는 if에 작성한 조건이 false일 경우 실행되는 구문이다. ..
<자바스크립트 기초> 03. 변수와 비교 1. 변수 * 변수란 - 자바스크립트는 변수를 이용하여 좀 더 효율적인 연산이 가능하다. 변수는 어떤 숫자나 문자를 우리가 원하는 변수에 지정하겠다는 뜻이다. * 변수의 선언 - 변수를 사용하기위해 먼저 변수를 선언해야한다. var x = 1; alert(x + 9); // 10 - 변수는 위와 같이 var로 시작하고 원하는 변수를 지정한다. 이 때 var은 생략이 가능한 경우도 있으나 정확한 이해없이는 생략을 권하지 않는다. var x = "Harry", y="Blog" ; alert(x); alert(y); // Harry // Blog - 위와 같이 가장 앞에 var을 쓰고 여러 변수를 선언하는 것도 가능하다. 2. 비교 * 동등연산자와 일치연산자. - 동등연산자(Equal Operator) : 값..
<자바스크립트 기초> 02. 숫자와 문자 1. 숫자 * 분류 - 자바스크립트는 따옴표 없이 숫자만 쓰일 경우 숫자로 인식한다. 그러나 숫자에는 크게 두 종류가 있다. - 정수 : 정수는 소숫점이 없는 -1, 3, 13 과 같은 숫자들을 말한다. - 실수 : 실수는 소숫점이 있는 1.1, 2.7 과 같은 숫자들을 의미한다. * 연산 - 숫자는 우리가 익히 알고있는 연산자들로 바로 계산이 가능하다. alert(20+5); - 위를 실행하면 25가 출력된다. 참고로 곱하기는 *(Asterisk)를 사용한다. - 이 외에도 자바스크립트는 아래와 같은 다양한 연산들도 가능하게 한다. Math.pow(2,4); // 16, 2의 4제곱 Math.round(3.7); // 3, 3.7을 반올림 Math.ceil(1.2); // 2, 1.2를 올림 Math...
<자바스크립트 기초> 01. 자바스크립트란 1. 자바스크립트란 * 자바스크립트 - 자바스크립트는 웹브라우저에서 프로그래밍적인 동작을 수행하게 만드는 유일한 언어이다. * 변화 - 탈브라우저 : 기존의 JS는 웹 브라우저의 앞단(front-side)을 제어하기 위한 언어였으나, 현재는 node.js 와 같은 툴로 웹 서버에서까지 사용가능하며, 그 외에도 다양한 변화가 이루어지고 있다. - 탈웹 : 현재의 자바스크립트는 웹에서 뿐만아니라 모바일환경, Google Apps script 등까지 확장되고 있다. 2. 자바스크립트의 사용 * 작성 - HTML문서 내에서 작성 : 자바스크립트 구문은 HTML문서 내에서 태그를 이용하여 작성할 수 있다. - JS 문서로 작성 : 자바스크립트 구문은 확장자가 .js인 문서에서 작성후 html문서와 연결할 수 있다..

티스토리툴바