[JAVASCRIPT] 기초

 

 

자바스크립트란?

 - 상호작용하는 웹사이트를 구현할 수 있게 해주는 용어

 

자바스크립트 예시

 - 삽입 <input> 을 활용 - 속성 type="button" 버튼 삽입,  value="day" 버튼 속의 값

&amp;lt;input&amp;gt; 태그 구문 예제

  > onclick="**" < 자바스크립트의 속성이 와야한다. 

  > document.querySelector('body').style.backgroundColor='black'  < 이 문서에서 body 태그를 선택하는 코드.

  > 큰 따음표가 아닌 작은 따음표를 쓴다, 바디 태그의 스타일 백그라운드를 '검정'으로 바꾼다.

 

예제

 - 1.스크립트 태그

  - <script> 안의 구문을 웹 브라우저는 자바스크립트로 이해한다.

&amp;lt;script&amp;gt; 코드

&amp;lt;html 결과물&amp;gt; - 산술 연산을 한다.

 

  - 자바스크립트는 반응한다. 1+1 을 2로 표기함. 

 -2.이벤트

예시 2. 자바스크립트 이벤트 발생

  - alert 알림, onchange 변화가 발생했을때, 이 경우는 문자를 입력했을 때 changed 라는 창 발생

  - onkeydown, onclick 키를 누르거나 클릭했을때를 의미함. on*****를 이벤트라고 표시함. 어떤 액션을 지정한다

-3.콘솔

 - F12- console 파일을 만들지 않고도 자바스크립트를 실행시켜서 데이터를 처리할 수 있음.  

예시 3. 콘솔 예제

  - 이렇게 입력할 경우 글자의 수를 표기해줌

  - 여기서 입력하여 실행하면 자바스크립트가 보고있는 웹페이지를 대상으로 실행됨.

 

데이터 타입(자료형) - <script> 내에서 선언해야함.

 - 종류 : String, Number, variable, boolean, array, object

  - number 연산자 - +, -, *, / arithmetic operations(산술연산)

  - string 문자열은 따음표로 시작해서 따음표로 끝나면 됨, 작은 따음표도 가능  ex)"Hello World"

     >"Hello World".length 라고 입력하면 헬로월드의 글자수를 알려줌 뛰어쓰기 포함 11자.

     > 여기서 이 length 에 해당하는 속성값 혹은 메소드를 찾기 (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String)

 - variable 변수  - assignment operations(대입연산자는 '=' 왼쪽에 오른쪽 삽입) ex) x=1; constant 상수 

   > ex) var name = 'dongsu'; alert("abcde"+name+"abced");