Daily coding

JavaScript : 자바스크립트 개요 및 getter / setter 본문

Front-end/Java Script

JavaScript : 자바스크립트 개요 및 getter / setter

sunnnkim 2020. 1. 6. 15:15

* Java Script

 : client 언어  (!= java (서버언어))
  - 목적 : Front end 제어하기 위한 스크립트(logic)
  - 보조 프로그래밍적 요소, 화면 제어를 하기 위한 요소 -> JQuery-> Vue / React
  - 컴파일을 하지 않는다 (가볍고 버전이 없음) -> 속도가 빠름
    < 예: 회원가입 -> 빈칸을 조사. ID 글자수를 조사, pw에 숫자포함 체크  >
  - CSS 에 대해서 구현
  - Timer 설정해서 특수효과 처리 가능함
  - 차트, 그래프로 표현이 가능하다
  - id (#,현 페이지에서 1개만 인식),

    class(. ,현페이지 다수인식, CSS),

    name(link를 연결해서 값을 넘겨줄 때 사용) 
    : 접근하기 위한 속성 (attribute)

  - 자바스크립트는 자바와 문법이 비슷하다

( 주석문 // , /**/ 사용, 제어문, 명령문 등)

 

 

< 자바스크립트문 확인하는 방법 >

1. alert( ) 이용하기

- 경고문을 띄우는 함수, 괄호 안에 확인하고자하는 데이터를 넣고 실행함

- 경고창이 띄워져있는 동안은 프로세스가 진행되지 않으므로 반드시 꺼줘야 하는 번거로운 일이 생김

 

2. console.log( ) 

- 위의 명령어는 웹 브라우저의 개발자도구 -> console 을 보면 확인할 수 있음 (디버깅 할 때 사용)
( 아이콘이 없다는 오류는 브라우저가 문제인 경우 )

 

 

* getter / setter

: 자바 스크립트에서는 태그의 id를 많이 사용해서 태그값을 가져옴

 

1) getter

var v = document.getElementById("demo").innerHTML;

var v = document.getElementById("demo").value; 

- 변수 선언은 var로 통합됨 (variable)
* document.getElementById("아이디명").innerHTML

- innerHTML : 문자열 등을 출력하는 태그의 값을 가져올 때

- value : input 태그 등 입력값이 있는 태그의 값을 가져올 때

 

 

* 아이디를 모를때 사용하는 함수

 

 

// 태그의 아이디설정이 안되어있을 때 ( document.getElementsByTagName("태그이름")[몇번때인덱스인지] )
var v = document.getElementsByTagName("body")[0];

--> body 태그의 0번째 인덱스의 값을 v에 대입
alert( v.getElementsByTagName("h1")[0].innerHTML );

--> h1태그의 0번째 인덱스(첫번째값)인 데이터를 가져오기

 

 

 

 

 

 

2) setter 

document.getElementById("demo").innerHTML = "수정";

--> demo라는 아이디를 가진 p태그안에 새로운 문자열이 나옴

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 
* Java Script : client 언어  (!= java (서버언어))
  - 목적 : Front end 제어하기 위한 스크립트(logic)
  - 보조 프로그래밍적 요소, 화면 제어를 하기 위한 요소 -> JQuery-> Vue / React
  - 컴파일을 하지 않는다 (가볍고 버전이 없음) -> 속도가 빠름
  - 예: 회원가입 -> 빈칸을 조사. ID 글자수를 조사, pw에 숫자포함 체크
  - CSS 에 대해서 구현
  - Timer 설정해서 특수효과 처리 가능함
  - 차트, 그래프로 표현이 가능하다
  - id(#,현 페이지에서 1개만 인식), class(. ,현페이지 다수인식, CSS), name(link를 연결해서 값을 넘겨줄 때 사용) 
  	: 접근하기 위한 속성 (attribute)

-->

 <p id = "demo"> p tag id demo</p>
 <!-- 자바스크립트 영역 -->
 <script type="text/javascript">
 
 // 이거슨 한 줄 주석문 
 
//window.alert("Java Script 실행");
// 그냥 alert(""); 로 해도 됨
// 메세지 띄우는 명령어

console.log("자바 스크립트 실행");
// 위의 명령어는 웹 브라우저의 개발자도구->console을 보면 확인할 수 있음(디버깅 할 때 사용)
// 아이콘이 없다는 오류는 브라우저가 문제인 경우 

// 1. p태그의 id를 통해서 값을 가져오기 (getter)
// getter

var v = document.getElementById("demo").innerHTML;
// 변수 선언은 var로 통합됨 (variable)
// document.getElementById("아이디명").innerHTML

// 확인하기
alert(v);


// 2. setter
document.getElementById("demo").innerHTML = "p태그 demo id";
v =  "p태그 demo id입니다."; //  <-- 이 코드는 동작안함


//??
v.innerHTML =  "p태그 demo id입니다."
alert(v.innerHTML); // <-- innerHTML 은 문자열만 가져옴




</script>
  
</body>
</html>

'Front-end > Java Script' 카테고리의 다른 글

JavaScript : Timer ( setInterval ) 타이머  (0) 2020.01.06
JavaScript : parseInt  (0) 2020.01.06
JavaScript : 자바스크립트 함수의 타입  (0) 2020.01.06
JavaScript : 변수와 배열 Variable & Array  (0) 2020.01.06
JavaScript : Function 의 선언 및 호출하기  (0) 2020.01.06
'Front-end/Java Script' Related Articles more