반응형

 

var val = 10; // 전역 변수 num을 선언

function changeValue() {
    console.log(val); // 10
    val = 20; // 전역 변수 함수 내부에서 변경
}

changeValue();  
console.log(val); // 20
var val = 10; // 전역 변수 num을 선언

function changeValue() {
    console.log(val); // undefined
    var val = 20; // 지역 변수 값 초기화
}

changeValue();  
console.log(val); // 10
var의 호이스팅

let, const는 아니지만 var는 변수 선언 시 undefined로 정의함

 

*changeValue 함수 내에서 일어나는 일* == 호이스팅

var val; // undefined

console.log(log); // undefined

val = 20;

 

  1. 전역 스코프에서 var val = 10;가 선언되고 초기화됩니다. val 변수는 10의 값을 가집니다.
  2. changeValue(); 함수가 호출됩니다.
  3. changeValue 함수 내에서 console.log(val)이 실행될 때 val 변수가 호이스팅되고 함수 스코프 내에서 선언되었습니다. 그러나 아직 초기화되지 않았으므로 undefined가 출력됩니다.
  4. 마지막으로 함수 내에서 var val = 20;이 실행되고, val 변수는 20으로 초기화됩니다.

 

var val = 10; // 전역 변수 num을 선언

function changeValue() {
	var val = 20; // 지역변수 초기화
    console.log(val); // 20
    
}

changeValue();  
console.log(val); // 10
반응형

'Front-End > JavaScript' 카테고리의 다른 글

[JavaScript/jQuery] 상위 및 하위 요소 접근하기 closest/find()  (0) 2022.08.25
[카카오 지도 API] 좌표 값 2차원 배열에 추가하는 법  (0) 2021.07.06
[자바스크립트] 이벤트 처리 onclick/addEventListener()  (0) 2021.05.25
[자바스크립트] 선택자 별 DOM 요소 접근하기(Class, Id, Tag, QuerySelector)  (0) 2021.05.25
반응형

 

상황) 선택된 라디오 버튼의 강의명과 강의시간의 값이 필요하다.

> 상위(부모) 요소에 접근하여 얻고자 하는 요소의 값을 얻을 수가 있다.

 

1. 체크된 라디오 버튼 변수 선언

const radBtn = $(":input:radio[name=sltUser]:checked");

2. 체크된 라디오 버튼의 상위 li를 가져오기

const li = radBtn.closest('li')					// 체크된 라디오버튼의 상위 li

3. find 메소드를 활용하여 td 값 가져오기

li.find('td:eq(0)').text();	// 강의명
li.find('td:eq(1)').text();	// 강의시간

 

* 전달받은 퍼블리싱이 아래와 같이 되어 있어서 이와 같이 접근하였으며, 상위 및 하위 요소를 찾는 것은 자주 쓰이므로 예제1이라 생각하기

 

- index.html

<li>
    <section>
      <header>
        <div>
          <label>
            <input type="radio" name="radBtn">
            <span>선택</span>
          </label>
        </div>
      </header>

      <table>
        <caption>상세</caption>
        <colgroup>
          <col style="width: 100px;">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <th scope="row">강의명</th>
            <td>휘낭시에 만들기</td>
          </tr>
          <tr>
            <th scope="row">강의시간</th>
            <td>18:00 ~ 19:00</td>
          </tr>
        </tbody>
      </table>
    </section>
</li>

 

 

 

반응형

'Front-End > JavaScript' 카테고리의 다른 글

[Javascript] 전역변수와 지역변수  (0) 2022.09.19
[카카오 지도 API] 좌표 값 2차원 배열에 추가하는 법  (0) 2021.07.06
[자바스크립트] 이벤트 처리 onclick/addEventListener()  (0) 2021.05.25
[자바스크립트] 선택자 별 DOM 요소 접근하기(Class, Id, Tag, QuerySelector)  (0) 2021.05.25
반응형
// 선을 구성하는 좌표 배열입니다. 이 좌표들을 이어서 선을 표시합니다
var linePath = [];
var rideLatList = new Array();
var rideLonList = new Array();

// 위경도 배열 데이터 추가
<c:forEach items="${ride}" var="item">
rideLatList.push("${item.rideLat}");
rideLonList.push("${item.rideLon}");
</c:forEach>

// 확인
console.log(rideLatList);
console.log(rideLonList);

// 2차원 배열로 푸시
for (var i = 0; i < rideLatList.length; i++) {
	linePath.push(new kakao.maps.LatLng(rideLatList[i], rideLonList[i]))

}

<결과>

반응형

'Front-End > JavaScript' 카테고리의 다른 글

[Javascript] 전역변수와 지역변수  (0) 2022.09.19
[JavaScript/jQuery] 상위 및 하위 요소 접근하기 closest/find()  (0) 2022.08.25
[자바스크립트] 이벤트 처리 onclick/addEventListener()  (0) 2021.05.25
[자바스크립트] 선택자 별 DOM 요소 접근하기(Class, Id, Tag, QuerySelector)  (0) 2021.05.25
반응형

onclick

 

1) HTML 태그 안에서 이벤트 처리기 연결 

<div id="container"> 
	<img id="pic" src="pizza.png" alt="" onclick="fn_changePic( )">. 
</div> 


<script> 
  // pizza 누르면 chciken 사진으로 변경
  var pic = document.querySelector('#pic');

  function fn_changePic( ) {
      pic.src = "chicken.png";
  } 
</script>



2) DOM 요소 안에서 이벤트 처리기 연결 

<div id="container"> 
	<img id="pic" src="pizza.png" alt="">. 
</div> 


<script> 
  // pizza 누르면 chciken 사진으로 변경
  var pic = document.querySelector('#pic');
  pic.onclick = fn_changePic;

  function fn_changePic( ) {
      pic.src = "chicken.png";
  } 
</script>

 

addEventListener() 

한 요소에 여러 이벤트가 발생했을 때 동시에 처리 가능, document 객체나 window 객체 가능

 

변수.addEventListener("이벤트 유형", 함수, 캡처 여부)

*캡처 여부 : false(버블링)가 기본 값. true는 캡처링

 // pizza 마우스 오버시 chciken 사진으로 변경
var pic = document.querySelector('#pic');
pic.addEventListener("mouseover", fn_changePic, flase);
pic.addEventListener("mouseout", fn_OriPic, flase);


  function fn_changePic( ) {
      pic.src = "chicken.png";
  } 

  function fn_OriPic( ) {
      pic.src = "pizza.png";
  }

 

  

반응형

'Front-End > JavaScript' 카테고리의 다른 글

[Javascript] 전역변수와 지역변수  (0) 2022.09.19
[JavaScript/jQuery] 상위 및 하위 요소 접근하기 closest/find()  (0) 2022.08.25
[카카오 지도 API] 좌표 값 2차원 배열에 추가하는 법  (0) 2021.07.06
[자바스크립트] 선택자 별 DOM 요소 접근하기(Class, Id, Tag, QuerySelector)  (0) 2021.05.25
반응형

1. id 선택자 : getElementById()

<body>
<div id="container">
	<h1 id="tittle>id로 선택하기</h1>    
</div>
    
 <script>
 // id로 받아서 클릭하면 폰트 사이즈 조절하는 함수
 document.getElementById("tittle").onclick = function () {
 	this.style.fontsize = "2em"
  }
 </script>
 </body>

 

2. Class 선택자 : getElementsByClassName()

 

*class는 id와 다르게 웹 문서 안에서 여러 번 사용 가능하기 때문에 Elements

<body>
  <div id="container">
      <span class="content">1</span>    
      <span class="content">2</span>  
  </div>
 </body>

HTMLCollection : 여러 개의 HTML 요소를 담고 있는 자료 형식으로 배열과 비슷함 

document.getElementsByClassName("content")

▶ HTMLCollection(2) [span.content, span.content]

 

*클래스 요소 중 1개의 요소에만 접근하고 싶을 때

//클래스로 접근하여 첫번째 클래스의 스타일 변경 (밑줄)
document.getElementsByClassName("content")[0].style.textDecoration = "underline"

3. TAG : getElementsByTagName()

 

// h2 태그의 배경 색상을 #eee로 바꾸기
document.getElementsByTagName("h2").style.backgroundcolor = "#eee"

 

*class와 동일하게 특정 요소에만 접근할 수 있음 

 document.getElementsByTagName("h2")[0].style.backgroundcolor = "#eee"

 

4. QuerySelector(), QuerySelectorAll()

: id, class, tag 모두 가능

// id
document.QuerySelector("#tittle")
// class (한 문서에 여러 번 사용 가능하여 QuerySelectorAll() 함수 사용
document.QuerySelectorAll(".content")

반환된 값은 NodeList로 표기 : 여러 개의 노드를 모아 놓은 것으로 배열과 비슷함

// NodeList의 인덱스 사용
document.QuerySelectorAll(".content")[1].style.backgroundColor = "yellow"

 

 

*getElementById() vs QuerySelector()

Element : 요소 노드까지만 접근 (웹 요소만 변경할 시 사용)

 

QuerySelector(), QuerySelectorAll()

: 요소노드, 텍스트 노드, 속성노드까지 접근 (웹 요소뿐 아니라 요소의 텍스트나 속성 변경, 새로운 노드 추가할 시 사용)

반응형

'Front-End > JavaScript' 카테고리의 다른 글

[Javascript] 전역변수와 지역변수  (0) 2022.09.19
[JavaScript/jQuery] 상위 및 하위 요소 접근하기 closest/find()  (0) 2022.08.25
[카카오 지도 API] 좌표 값 2차원 배열에 추가하는 법  (0) 2021.07.06
[자바스크립트] 이벤트 처리 onclick/addEventListener()  (0) 2021.05.25

티스토리툴바