728x90

데이터 형변환

 

1.형변환

문자열과 숫자의 +연산

문자열과 숫자가 연산하면 str화된다

<button onclick="testPlus();">문자열과 숫자의 +연산</button>
<script>
  function testPlus(){
    var test1 = 7 + 7;          // 14
    var test2 = 7 + '7';        // 77
    var test3 = '7' + 7;        // 77
    var test4 = '7' + '7';      // 77
    var test5 = 7 + 7 + '7';    // 147
    var test6 = 7 + '7' + 7;    // 777
    var test7 = '7' + 7 + 7;    // 777

    console.log(test1);
    console.log(test2);
    console.log(test3);
    console.log(test4);
    console.log(test5);
    console.log(test6);
    console.log(test7);
    // 자바와 문자열+string의 로직 동일
		// 콘솔창 결과에서 글씨색이
    // 숫자나 불린값의 살짝 푸른빛
    // str은 검은색

		// 강제 형변환 : Number(), parseInt(), parseFloat()...
    console.log(test2 + 1);                 // 771
    console.log(Number(test2) + 1);        // 78 // 문자이기에 형변환 필요
    console.log(parseInt(test2) + 2);       // 79
    console.log(parseFloat(test2) + 3);     // 80
  }
</script>

2.강제 형변환

강제 형변환 : Number(), parseInt(), parseFloat()...

// 강제 형변환 : Number(), parseInt(), parseFloat()...
    console.log(test2 + 1);
    console.log(Number (test2) + 1);        // 78 // 문자기에 형변환 필요
    console.log(parseInt(test2) + 2);       // 79
    console.log(parseFloat(test2) + 3);     // 80

 

C.연산자

다른 연산자들은 자바와 비슷한게 많음

자바와는 다른 연산자

 

===와 !==

=== : 값과 자료형 둘 다 일치하는지 비교 !== : 값과 자료형 둘 다 일치하지 않는지 확인할 때 사용

<button onclick="opTest();">확인하기</button>
<script>
    function opTest(){
        var check1 = 1;
        var check2 = '1';

        console.log('check1 == 1 :' + (check1 == 1));       // check1 == 1 :true
        console.log('check1 == "1" :'  + (check1 == '1'));  // check1 == "1" :true
        console.log('check2 == 1 : ' + (check2 == 1));      // check2 == 1 :true
        console.log('check2 == "1" : ' + (check2 == '1'));  // check2 == "1" :true
        // 값을 비교할 때, 위처럼 숫자로 변환 가능한 문자를 숫자랑 비교하면 true로 인지해줌
        // 어느정도 허용적인거지 나중에 철저히 해야 에러발생x // 애매해서 안하는걸 추천
        // JS에서는 비교를 순수 값으로 함. 주소값으로 비교하지 않음
}        
</script>

==과 === 차이

== 연산자를 이용하여 서로 다른 유형의 두 변수의 [값] 비교

==='는 엄격한 비교를 하는 것으로 알려져 있다 ([값 & 자료형] -> true)

// == 비교
console.log('check1 == 1 :' + (check1 == 1));       // check1 == 1 :true
console.log('check1 == "1" :'  + (check1 == '1'));  // check1 == "1" :true
console.log('check2 == 1 : ' + (check2 == 1));      // check2 == 1 :true
console.log('check2 == "1" : ' + (check2 == '1'));  // check2 == "1" :true
// 값을 비교할 때, 위처럼 숫자로 변환 가능한 문자를 숫자랑 비교하면 true로 인지해줌
// 어느정도 허용적인거지 나중에 철저히 해야 에러발생x // 애매해서 안하는걸 추천
// JS에서는 비교를 순수 값으로 함. 주소값으로 비교하지 않음
// === 비교 
console.log('check1 === 1 :' + (check1 === 1));       // check1 == 1 :true
console.log('check1 === "1" :'  + (check1 === '1'));  // check1 == "1" :false
console.log('check2 === 1 : ' + (check2 === 1));      // check2 == 1 :false
console.log('check2 === "1" : ' + (check2 === '1'));  // check2 == "1" :true

추가자료

https://velog.io/@filoscoder/-와-의-차이-oak1091tes

 

 

728x90
반응형
728x90

 

변수와 자료형

 

1.변수 선언

1)지역변수 & 전역변수

지역변수 : 함수 내부에서 'var 변수명;'
전역변수 : 함수 내부에서 '변수명;'
전역변수 : 함수 밖에서 '변수명;' 혹은 'var 변수명;'
// 함수 외부
str1 = "전역변수";
var str2 = "var전역변수";

// 함수 내부
var str1 = "지역변수1"
var str3 = "지역변수2"

console.log('str1 : ' + str1);              /* 지역 변수 */
console.log('this.str1 : ' + this.str1);    /* 함수 안에 있는 전역변수 */
console.log('window.str1 : ' + window.str1);/* 전역변수 : 함수 내부에서는 전역변수를 this.나 window.을 찍어서 구분해줘야한다 */
// 자바 때, 매개변수도 지역변수. 구분을 위해서 this썼었음
// js도 위처럼 this나 window 써서 구분해줌

console.log('str2 : ' + str2);               // var전역변수
console.log('this.str2 : ' + this.str2);     // var전역변수
console.log('window.str2 : ' + window.str2); // var전역변수

console.log('str3 : ' + str3);               // 지역변수
console.log('this.str3 : ' + this.str3);     // undefined : 없다는 얘기 // 지역변수인데 전역변수 구분용 접두어를 붙여놨으니 undefined
console.log('window.str3 : ' + window.str3); // undefined  : js에서는 정의가 안된 데이터 '취급'함

 - 지역변수 : 함수 내부에서 'var 변수명;'으로 선언하면 지역변수가 됨

 - 전역변수 : 

함수 내부에서 '변수명; '으로 선언하거나 함수 밖에서 '변수명;' 혹은 'var 변수명;'으로 선언하면 전역변수가 됨

 

2)우선권 : 전역과 지역변수의 우선권

전역변수와 지역변수가 동일한 이름인 경우,

함수 내부에서 변수 명을 호출하면 지역변수가 우선권을 가짐

 

window. this. : 전역변수와 지역변수 구분하는 코드

전역 변수 사용 시 'window. 변수 명;' 혹은 'this.변수 명;'으로 표현하여 지역변수와 구분

전역변수는 해당 window내에서 어디든 사용할 수 있으며, 지역변수는 해당 함수 내에서만 사용 가능

window.onload = function()

페이지가 로드되면 자동으로 실행하는 함수

한 페이지에서 하나의 onload함수만 기술 가능 페이지가 로드가 되면 한번에 여러개 실행되고 싶으면 한번에 하나만 가능해서 단점으로 생각해서 제이쿼리에서 여러개 실행가능하게 만들어둠

window.onload = function(){

추가자료

https://itworldyo.tistory.com/101

 

2.자료형

JS에서는 자료형 별로 변수 타입이 지정되지 않고,

리터럴에 의해서 자료형 결정

 

JS 데이터 타입

string

number

boolean

Array(object)

Object(object)

function

 

<h3>자료형</h3>
<p>자바스크립트에서는 자료형 별로 변수 타입이 지정되지 않고 리터럴에 의해서 자료형 결정</p>
<button onclick="typeTest();">자료형 테스트</button>
<script>
  function typeTest(){
    var name = "강건강";                     // 문자열
    var age = 20;                           // 숫자
    var check = true;                       // 논리값        
    var hobby = ['축구', '야구', '농구'];    // 배열
    var user = {                             // 객체   
        name: '강건강',
        age: 20,
        id: 'user01'              
    };
    var testFunction = function(num1, num2){
        var sum = num1 + num2;
        alert(sum);
    };
    
    // 콘솔창에서 '값' 확인
    console.log(name);
    console.log(age);
    console.log(check);
	  console.log(hobby);     // (3) ['축구', '야구', '농구']
    console.log(user);      // {name: '강건강', age: 20, id: 'user01'}
    console.log(testFunction); // ƒ (num1, num2){
                               //                var sum = num1 + num2;     
                               //                 alert(sum);
                               //               }
    // 콘솔창에서 '타입' 확인
		console.log(typeof(name));  // string
    console.log(typeof(age));   // number
    console.log(typeof(check)); // boolean
    console.log(typeof(hobby)); // object   // array
    console.log(typeof(user));  // object
    console.log(typeof(testFunction));  // function
    // typeof연산자 : 값의 자료형을 확인하는 연산자
  }
</script>

 

728x90
반응형
728x90

 

 

HTML 태그에 접근하기

 

 

getElementById()

아이디로 접근하기

getElementById() : 반환타입 Element

해당 아이디의 요소를 선택함. id는 단일만이라 element이고 s로 안씀

<button onclick="accessId();">아이디로 접근</button>
	<script>
		function accessId(){
			// 아이디로 접근 누르면 웹상 파란 네모에 값이 들어가게끔 만들 것임
			// 파란 네모(엘레먼트)에 접근해야하는데 id,class 등등 사용하여 접근 가능
			var area = document.**getElementById**('area1'); /* 코드 의미 : 다큐먼트에서 엘리먼트를 id로 읽어오겠다 */
			area.style.backgroundColor = 'pink';
			area.innerHTML = '아이디 접근 성공';
			area.innerHTML **+=** '아이디 접근 성공'; /* 누를 때마다 출력하게 하고 싶을 경우 : += */
		}
	</script>

 

getElementsByTagName()

태그명으로 접근하기

getElementsByTagName('태그명') : 반환타입 [] HTMLCollection

지정된 태그 이름을 가진 모든 자식 요소 컬렉션을 반환

 

추출할 태그명을 매개변수 넣으면 된다 li를 추출하고 싶으면 'li',ul 추출하고 싶으면 'ul'

<button onclick="accessTagName();">태그 명으로 접근</button>
	<script>
		function accessTagName(){
			// var : 변수 선언 예약어
			// .getelementsByTagName() : 지정된 태그 이름을 가진 모든 자식 요소 컬렉션을 반환
			var list = document.getElementsByTagName('li'); /* 문서내부 전체 <li>태그를 카운트한다는 의미. 해당 태그를 전부 카운트*/
			console.log(list);
		// 태그명이 하나라는 보장 x  -> 여러개 가지고 올 수 있다
		// 즉, 엘리먼트가 아닌 element's' 엘리먼츠. getElementsByTagName()
		// 변수 선언 var : 데이터타입 제한x
		// 지금까지 str, boolean, array 등 받음
			var changeColor = 50
			for (var i = 0; i<list.length; i++){
				list[i].style.backgroundColor = "rgb(130,220," + changeColor +")";
				changeColor += 50; /* rgb(0,0,0) 색상 컬러의 매개변수를 변수처리해서 색상을 변화시킴*/
				// <li>
			}

		}
	</script>

 

getElementsByName()

name으로 접근하기

getElementsByName() : 반환타입 [] list

해당 name 속성값을 가지는 요소를 모두 선택함.

같은 name이 여러개일 수 있으니 엘레멘'츠' 사용

 

<form>
    <fieldset>
        <legend>취미</1egend>
        <table>
            <tr>
                <td><input type="checkbox" name="hobby" value="game" id="game"><label>게임</label></td>
                <td><input type="checkbox" name="hobby" value="music" id="music"><label>음악</label></td>
                <td><input type="checkbox" name="hobby" value="movie" id="movie"><label>영화</label></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="hobby" value="book" id="book"><label>독서</label></td>
                <td><input type="checkbox" name="hobby" value="travel" id="travel"><label>여행</label></td>
                <td><input type="checkbox" name="hobby" value="exercise" id="exercise"><label>운동</label></td>
            </tr>
        </table>
    </fieldset>
</form>
<br>
<div id="area2" class="area"></div><br>
<button onclick="accessName();">name으로 접근</button>	<!-- 버튼 클릭하면 accessName() 실행 -->
<script>
    function accessName(){
    // .getelementsByName() : 지정된 태그 이름을 가진 모든 요소의 컬렉션을 반환
    var hobby = document.getElementsByName ('hobby');
    console.log(hobby);


    var checkItem = ''; /* checkItem은 str */
    // length 속성은 컬렉션의 요소 수를 반환
    for (var i = 0; i < hobby.length; i++){
        if(hobby[i].checked == true) {	// console창에서 check항목 체크하는 조건문
            checkItem += hobby[i].value + "선택함<br>";  
            // .value를 사용할 때는 input태그의 밸류값을 가지고 올 때만 쓰고 다른 경우에는 innerHTML사용 
            // input 태그 외에는 value가 없음.
        }
    }

 

getElementsByClassName()

class로 접근하기

getElementsByClassName() : 반환타입 [] HTMLCollection

해당 클래스에 속한 요소 모두를 선택

button onclick="accessClass();">classe 2</button>
	<script>
		function accessClass(){
			var area = document.getElementsByClassName('area');	// 컬렉션타입 2가 변수로 들어감
			console.log(area);
			for(var i = 0; i < area.length; i++){
				area[i].style.borderstyle = 'dashed';
			}
			// background-color ==> backgroundColor, border-style ==> borderStyle
			// CSS에서의 코드들이 js에서 이런식으로 바뀜
		}
	</script>

 

 

 

 

 

 

728x90
반응형

+ Recent posts