javascript_1

사용자가 어떤 행동을 했을때 반응이 나오도록 하는것이 자바스크립트 기본적으로 네비 등 다양한 움직임을 만들어낸다.

 

1. 자바스크립트는 인터프린터 언어이다.

 - 코드가 작성된 순서대로 윗줄부터 순차대로 구문분석을 한다. 그렇기 때문에 어떤식으로 진행되는지를 생각하며 만들어야 한다. 그렇지 않으면 움직임이 이상해질 수 있다.

2. 자바스크립트는 클라이언트 스크립트 언어이다.

- 이는 서버가 아닌 사용자의 컴퓨터 내에서 실행되는 것이기 때문에 서버의 부담감을 줄일수 있다.

3. 객체 기반 언어이다.

- 다양한 객체가 존재하며, 그에 해당하는 다양한 기능(메서드)들이 존재한다.

4. 공개된 언어이다.

- 완성된 스크립트는 외부로 분리할 수는 있으나 완벽히 숨길 수는 없다.

5. 다양한 라이브러리를 활용할 수 있다.

- 대표적으로는 제이쿼리 이다.

---

 

자바스크립트가 저장되는 부분은 2군데이다. head안의 부분, body 태그안의 부분이다.

 

버튼을 누르게 되면 파란 네모가 사라지도록 스크립트를 지정한다.

자바는 객체 지향 언어이기 때문에 버튼을 객체로 만들어야 한다. body안에 들어있는 버튼을 도큐멘트 오브젝트로 설정을 해야한다.

document.querySelector()로 도큐멘트 안의 객체를 지정해준다는 명령어를 넣어준다.

("button") 으로 지정해준 후 사용자의 행동에 대한 내용을 입력해주어서 자바스크립트의 실행경로를 알려준다. 이를 이벤트라고 하며 주로 "click" 으로 지정한다.

 

기능에 대한 내용을 기입하는데 도큐멘트 안의 클래스 box를 선택하여 해당 클래스의 style을 어떤식으로 변경하겠다고 명령을 넣어준다. 위는 display=none으로 사라지도록 명령을 넣어주면 

 

버튼을 누르게 되면 명령으로 넣어놓은 display :none; 이 들어가면서 해당 명령대로 도큐멘트가 변화한다.

---

자바스크립트 주석은 2가지이다. 

//document..... (한줄 주석) /*document.....*/ (여러줄 주석)

---

인터프린터 언어인 자바의 특성 때문으로 위에서 아래로 css,html을 읽고 아래로 내려와서 위에서 지정하였던 태그들과 내용들을 인식하고 변화하는것이 때문에 body안에 스크립트를 넣어야 한다. 만약 head에다가 입력하게 되면 아래의 내용을 인식하지 못하기 때문에 실행되지 않게 된다.

---

객체는 자료를 저장하고 처리하는 기본 단위 (오브젝트라고도 한다.)

이 안에는 매서드와 속성이 있다. 

객체(object).매서드().속성;

 

BOM (브라우저 객체 모델)

window는 브라우저 객체의 최상위 객체가 됨. 이 안에 하위객체를 포함하고 있고, 계층적 구조로 이루어져있다.

DOM (문서 객체 모델)

내장 객체

---

window - 

location - 

document - 

var는 공간을 만든다는 뜻으로 공간속에 유저의 이름을 저장한다.

창을 띄운다는 명령어 userName속 내용을 띄운다는 명령어 이다.

넣어놓은 이름의 값을 그대로 출력해준다. 왜냐하면 var 공간속 내용을 불러오라고 명령해주었기 때문에

---

해당 페이지를 팝업으로 띄우고자 할때

---

변수

변하는 데이터 값을 저장할 수 있는 메모리 공간이다. 변수에는 데이터가 오직 하나만 저장된다. 그래서 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워지게 된다.

 

변수에 하나의 식을 넣어놓고 +와 같이 함께 하는식을 넣어주면 자동으로 계산해서 입력해준다.

var age=10  >> age라는 공간을 만들고 그 안에 10이라는 데이터를 넣어 놓는다. 만일 뒤에 var age=20라는 명령이 있다면 앞서 넣었던 10이란 데이터는 자동으로 지우고 20이라는 데이터가 들어가게 된다.

변수 안에 num이라고 선언해주었는데 이 안의 데이터를 확인하고 싶을 경우

num안의 내용을 콘솔로 불러 와라라는 명령어로 검사로 확인을 해보게 되면 아무것도 출력 되지 않았다고 뜬다. (값을 넣지 않고 선언만 했기 때문에)

 

변수는 하나의 값만 적용되기 때문에 마지막에 입력된 값만들어가게 되고 위와같이 '10' 과 '20'을 넣어도 콘솔에서 20으로 입력값이 나오게 된다.

문자라고 알고 있지만 출력은 그냥 숫자로 출력되어서 숫자인지 문자인지 알수 없다 이럴때 사용할 수 있는것이 console.log();로 원하는 변수를 입력하여서 콘솔에 해당 데이터의 값(문자데이터, 숫자데이터)을 출력시켜준다. 

console은 데이터에 대한 원인을 알아보고 분석하기 위한 함수형 명령어라고 생각하면 된다.

+는 값을 더하라는 명령어이다. 더하라는 명령을 넣었지만 출력하라는 명령을 넣지 않아서 값이 나오지 않는다. 

 

document에 계산된 값을 출력(write)하여 보여주고 뒤에 <br> 태그를 넣어서 행을 바꾸어 주고

더한값을 재할당 한다는 식 (num1에 1과2를 더한 값으로 재할당하여 넣는다는것)을 입력한다. (num1이랑 num2를 더한 값을 num1로 다시 넣어주는것 ) 하지만 출력식이 없어서 나오진 않는다.

자바스크립트는 인터프린터 방식이기 때문에 위에서 아래로 순서가 진행된다. 위에서 값이 변경이 되어 뒤 내용에 영향을 주기 때문에 num1이 12로 변경되었기 때문에 num2의 값인 5가 더해져 값이 17로 나오는 것이다. 여기서 식을 더 넣어준다면 계속해서 그 값이 더해지게 된다.

여기서 새로운 변수를 지정하여서 값을 넣어주면 또 새로운 식을 만들수 있는 값이 정해지는 것이다.

---

데이터 형식

같은 형식의 데이터가 아니라면 더해지는 식을 넣어도 더해지지 않고 나열된다.

그렇기 때문에 데이터 유형을 확인하며 진행해 주어야 한다.

 

console.log 식에 typeof() 식을 넣어서 해당 데이터에 대한 출력을 명령하면 콘솔에서 해당 변수의 값이 각각 숫자와 문자임을 나타내준다. 숫자를 더해서 출력하려면 문자형을 숫자형으로 바꿔주어야 하는데,

 

Number 로 지정하는 식을 넣어주고 console에 출력하면 숫자로 입력된다. 여기서 합하여 출력하는 식을 넣지 않았기 때문에 아까와 같이 1010으로만 출력이 되고,

 

result 라는 변수에 다시 더하는 식을 넣어주고 출력하는 식을 넣어주면 (이때 식이 헷갈리지 않도록 뒤에 "<br>"을 추가하여서 줄을 바꾸어준다.) 원하는 식의 값이 출력된다.

---