EMDI는 지금도 개발중

JavaScript : 데이터형식, 이벤트, 템플릿 이용 방법 본문

프론트/JavaScript

JavaScript : 데이터형식, 이벤트, 템플릿 이용 방법

EMDI 2022. 2. 17. 22:40

▶ JavaScript Data Type

JavaScript의 데이터 유형에 대해서 말하자면, Number, String, Object, Array 등이 있다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string:</p>

<p id="demo"></p>
<script>
let length = 16;                               // Number
let lastName = "Johnson";                      // String
let x = {firstName:"John", lastName:"Doe"};    // Object
const cars = ["Saab","Volvo","BMW"];	   	// Array
	
document.getElementById("demo").innerHTML =
length + "<br>" + 
lastName + "<br>" + 
x + "<br>" + // 그대로 x라고 넣어버리면 [object Object]로 보여준다.
x.firstName + "<br>" + //값을 보기 위해서는 x.firstName
cars[0] + "<br>";  // 배열은 index 위치를 설정해줘야한다.

/* 결과값
16
Johnson
[object Object]
John
Saab
* /
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Adding elements with high indexes can create undefined "holes" in an array.</p>

<p id="demo"></p>

<script>
const a = 0;
const fruits = ["Banana", "Orange", "Apple"];
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = 
fruits[0] + "<br>" + 
fruits[a] + "<br>" + 		// a가 숫자이기에 사용이 가능하다.
fruits["Banana"] + "<br>" + 	// Object처럼 사용하면 undefined
person + "<br>" + 		// 그대로 쓰면 [object Object]로 보여준다.
person.firstName + "<br>" + 
person["firstName"];  		// John이 출력된다.
</script>

</body>
</html>

Array와 Object쓰는 방식에 대해 헷갈리시면 안됩니다. Array는 cars[0] 괄호 안에 index(숫자)만 사용이 가능하며 0부터 시작합니다. 

 

▶ JavaScript와 jQuery의 이벤트

Event Description jQuery 비교
onchange HTML 요소가 변경되었을 때  
onclick 사용자가 HTML요소를 클릭했을 때 $("p").click(function(){
  // action goes here!!
});
$("p").dblclick(function(){
  $(this).hide();
});
onmouseover 사용자가 HTML요소 위로 마우스를 이동 했을 때  
onmouseout 사용자가 HTML요소에서 마우스를 멀리 이동했을 때  
onkeydown 사용자가 키보드 키를 누를 때  
onload 브라우저가 페이지 로드를 완료했을 때   
// jQuery의 on()메서드는 선택한 요소에 대해 하나 이상의 이벤트 핸들러를 연결합니다.
$(document).ready(function(){
  $("p").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    },  
    mouseleave: function(){
      $(this).css("background-color", "lightblue");
    }, 
    click: function(){
      $(this).css("background-color", "yellow");
    }  
  });
});

 

▶ JavaScript 문자열 

// slice(strat, end)
// 문자열의 일부를 추출하고 추출된 부분을 새 문자열로 반환
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(7,13); //Banana
document.getElementById("demo").innerHTML = str.slice(7); //Banana, Kiwi

// substring(start, end)
// slice()와 비슷한 substring(). 차이점으로 음수 인덱스를 허용할 수 없다는 차이점이 있다.
document.getElementById("demo").innerHTML = str.substring(7,13); // Banana

// substr(start, length)
// 두 번째 매개변수 가 추출된 부분 의 길이를 지정한다.
document.getElementById("demo").innerHTML = str.substr(7,6);

// replace(old, new)
// 지정된 값을 문자열의 다른 값으로 바꾼다.
let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

// trim()
// 문자열의 양쪽에서 공백을 제거
let text1 = "      Hello World!      ";
let text2 = text1.trim();

// split()
// 문자열을 배열로 변환
let text = "a,b,c,d,e,f";
const myArray = text.split(",");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
//일반적으로 쓰는 방식
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
document.getElementById("demo").innerHTML = text;

//배열에 있는 값을 뽑아서 쓰는 방식
let tags = ["template literals", "javascript", "es6"];
let text = `Welcome ${tags[0]}`;
document.getElementById("demo").innerHTML = text;

</script>

</body>
</html>

 

▶ JavaScript 숫자

let x = 3.14;    // A number with decimals
let y = 3;       // A number without decimals

let x = 100;         // x is a number
let y = "100";       // y is a string

// toString()
// 문자열로 반환
let x = 123;
x.toString();
(123).toString();

// toExponential()
// toExponential()반올림되고 지수 표기법을 사용하여 작성된 숫자가 있는 문자열을 반환
let x = 9.656;
document.getElementById("demo").innerHTML =
  x.toExponential() + "<br>" + 		// 9.656e+0
  x.toExponential(2) + "<br>" + 	// 9.66e+0
  x.toExponential(4) + "<br>" + 	// 9.6560e+0
  x.toExponential(6);			// 9.656000e+0
  
// toFixed()
// 지정된 소수 자릿수로 작성된 숫자와 함께 문자열을 반환
let x = 9.656;
document.getElementById("demo").innerHTML =
  x.toFixed(0) + "<br>" +		// 10
  x.toFixed(2) + "<br>" +		// 9.66
  x.toFixed(4) + "<br>" +		// 9.6560
  x.toFixed(6);					// 9.656000

// Number(), parseFloat(), parseInt()
document.getElementById("demo").innerHTML = 
  Number(true) + "<br>" +			// 1
  Number(false) + "<br>" +			// 0
  parseInt("  10") + "<br>" +		// 10
  Number("10.33") + "<br>" + 		// 10.33
  parseInt("10.33") + "<br>" + 		// 10
  parseFloat("11.1") + "<br>" + 	// 11.1
  Number("John");					// NaN

 

▶ JavaScript 배열

// toString();
// 배열을 (쉼표로 구분된) 배열 값의 문자열로 변환
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

// join()
// 모든 배열 요소를 문자열로 결합
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); // Banana * Orange * Apple * Mango

// pop()
// 배열에서 마지막 요소를 제거
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // Banana,Orange,Apple

// push()
// 배열에 새 요소를 추가합니다(끝에)
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // Banana,Orange,Apple,Mango,Kiwi

// shift()
// 첫 번째 배열 요소를 제거하고 다른 모든 요소를 ​​더 낮은 인덱스로 "이동"합니다
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // Orange,Apple,Mango

// unshift()
// 배열에 새 요소를 추가하고(처음에) 이전 요소를 "이동 해제"
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon"); // Lemon,Banana,Orange,Apple,Mango

// delete
// 배열 삭제()
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

// concat()
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);	// Cecilie,Lone,Emil,Tobias,Linus

'프론트 > JavaScript' 카테고리의 다른 글

JavaScript : 자바스크립트 Errors (Try, Catch, Finally, Throw)  (0) 2022.03.16
JavaScript : 자바스크립트 Set(), Map()  (0) 2022.03.15
JavaScript : 자바스크립트 조건문, 반복문  (0) 2022.03.03
JavaScript : 날짜함수(Date Get Methods), 공식(Math)  (0) 2022.03.01
JavaScript : 자바스크립트 기초 배우기 with jQuery  (0) 2022.02.16
'프론트/JavaScript' Related Articles more
Comments