• JSON
    - JavaScript Object Notation
    - 데이터 저장 및 전송을 위한 형식으로 서버에서 웹 페이지로 데이터를 보낼 때 사용한다.
    - JSON 데이터는 이름(속성)-값 쌍으로 이루어져 있다.

 

//기본형식
var person = {"name":"james", "age":"30", "city":"seoul"};

//배열
var people = {"students":[
	{"name":"james", "age":"30", "city":"seoul"},
	{"name":"kim", "age":"30", "city":"newyork"},
	{"name":"sarah", "age":"30", "city":"london"}
	]};

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>JSON 데이터 출력</h3><br>
	
	<p id="demo"></p><br>
	<p id="demo2"></p><br>
	<p id="demo3"></p><br>
	<p id="demo4"></p><br>
	<p id="demo5"></p>
	
	<script>
	var person = {"name":"james", "age":"30", "city":"seoul"};

	var people = {"students":
		[{"name":"james", "age":"30", "city":"seoul"},
		{"name":"kim", "age":"30", "city":"newyork"},
		{"name":"sarah", "age":"30", "city":"london"}
		]};
	
	document.getElementById("demo").innerHTML = "person.name --> " + person.name;
	document.getElementById("demo2").innerHTML = "people.students --> " + people.students;
	document.getElementById("demo3").innerHTML = "people.students[1] --> " + people.students[1];
	document.getElementById("demo4").innerHTML = "people.students[1].name --> " + people.students[1].name ;
	
	var text="";
	
	for(var i=0; i<people.students.length; i++) {
		text += "이름: " + people.students[i].name;
		text += ", 나이: " + people.students[i].age;
		text += ", 도시: " + people.students[i].city + "<br>";
	}
	document.getElementById("demo5").innerHTML = text;
	</script>
</body>
</html>

 

 

 

 

 

 

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

[JavaScript] Validation Check  (0) 2021.05.21
[JavaScript] JSON parse  (0) 2021.05.21
[JavaScript] window.onload  (0) 2021.05.20
[JavaScript] 배열  (0) 2021.05.20
[JavaScript] 자바스크립트 기초 정리  (0) 2021.05.18

자바 스크립트는 맨 윗 줄부터 차례로 실행되기 때문에

<head>에 작성한 <script> 태그에서 <body> 태그 안의 요소를 불러오려 할 경우 에러가 발생한다. 

 

이를 해결하기 위해 window.onload 함수를 사용할 수 있다.

window.onload 함수 안의 요소는 페이지의 모든 요소가 실행된 뒤 가장 마지막에 실행되기 때문에

<head>에 작성한 <script> 태그에서 <body> 태그 안의 요소를 사용할 수 있게 된다.

 

 

< 에러 발생 코드 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	var list1 = ["apple", "banana", "kiwi"];
	document.getElementById("demo").innerHTML = list1[2];
    
   	var list2 = new Array("red", "yellow", "green");
	document.getElementById("demo2").innerHTML = list2[0];
</script>
</head>
<body>
	<p id="demo"></p>
	<p id="demo2"></p>
</body>
</html>

 

 

< 정상 실행 코드 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function() {
		var list1 = [ "apple", "banana", "kiwi" ];
		document.getElementById("demo").innerHTML = list1[2];

		var list2 = new Array("red", "yellow", "green");
		document.getElementById("demo2").innerHTML = list2[0];
	}
</script>
</head>
<body>
	<p id="demo"></p>
	<p id="demo2"></p>
</body>
</html>

 

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

[JavaScript] Validation Check  (0) 2021.05.21
[JavaScript] JSON parse  (0) 2021.05.21
[JavaScript] JSON  (0) 2021.05.21
[JavaScript] 배열  (0) 2021.05.20
[JavaScript] 자바스크립트 기초 정리  (0) 2021.05.18
 

JavaScript Arrays

JavaScript Arrays JavaScript arrays are used to store multiple values in a single variable. What is an Array? An array is a special variable, which can hold more than one value at a time. If you have a list of items (a list of car names, for example), stor

www.w3schools.com

배열은 데이터를 연속된 공간에 저장하는 것이다.

자바의 배열에는 같은 타입의 데이터만 저장할 수 있으나 자바 스크립트의 배열에는 여러가지 타입의 데이터를 저장할 수 있다.

그러나 같은 데이터 타입으로 배열을 만드는 것이 일반적이며 자바의 배열과 마찬가지로 인덱스를 통해 배열의 해당 위치에 들어있는 값을 불러올 수 있다.

 

 

 

배열의 n번째 요소 출력하기

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];  //결과: Saab​
- 자바 스크립트 배열의 인덱스는 0번부터 시작하므로
  배열의 n번째에 있는 요소를 출력하기 위해서는 인덱스 값으로 n-1을 입력해야 한다.

 

<스크립트> 태그가 <헤드> 안에 있을 경우, 

window.onload = function(){
    var list3 = ["apple", "30", "500"];
    document.getElementById("demo").innerHTML = list[1]; //apple 출력
}​

- 맨 윗 줄부터 차례대로 코드가 실행되므로 script가 head 안에 있으면 body의 요소가 로딩되기 전에 먼저 실행되므로 에러가 발생한다.
- window.onload를 사용하여 body가 모두 로딩된 후 스크립트 안의 함수를 실행하도록 해줘야한다.

 

 

 

for문을 이용하여 배열 안에 있는 내용을 리스트로 꺼내기

 

var flist = ["망고","청포도","파인애플","키위"];

//사진1
text = "<ul>";
for (i = 0; i < flist.length; i++) {
text += "<li>" + flist[i] + "</li>";
}
text += "</ul>";
document.getElementById("fruits").innerHTML = text;
  
//사진2
flist.push("사과");  //배열 마지막에 사과 추가
document.getElementById("push").innerHTML = flist.join(" & ");

flist.pop();  //배열의 마지막 요소 삭제 --> 사과
flist.pop();  //배열의 마지막 요소 삭제 --> 키위
document.getElementById("pop").innerHTML = flist.join(" & ");

- 배열의 마지막에 데이터 추가하기 : push();

- 배열의 마지막 데이터 삭제하기 : pop();

 

 

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

[JavaScript] Validation Check  (0) 2021.05.21
[JavaScript] JSON parse  (0) 2021.05.21
[JavaScript] JSON  (0) 2021.05.21
[JavaScript] window.onload  (0) 2021.05.20
[JavaScript] 자바스크립트 기초 정리  (0) 2021.05.18

📌 자바스크립트의 특징

  • 객체 기반의 스크립트 언어
  • 브라우저에서 실행되는 언어
  • 대소문자를 구분함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Alert 예시</title>
<script>
    window.alert("안녕하세요 반갑습니다 ~");
    // window 생략 가능: alert("안녕하세요 반갑습니다~");
</script>
</head>
<body>
</body>
</html>

 

 

📌 getElementById 

  • 특정 id를 가진 HTML 요소에 값을 입력할 때 사용
  • 같은 id를 가진 요소에 값을 입력하면 마지막 값만 적용됨

 

🚫 잘못된 예시 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script>
        document.getElementById("demo").innerHTML = 10 * 10;
    </script>
</head>
<body>
    <p id="demo"></p>
</body>
</html>
  • 에러 발생: <body>가 로드되기 전에 <script>가 실행되어 demo 요소를 찾을 수 없음

 

 

✅ 올바른 예시 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML = 10 * 10;
    </script>
</body>
</html>
  • id를 사용하는 <p> 태그가 먼저 로드된 후 <script>가 실행되어 정상 작동

 

 

📌 자바스크립트 변수 및 데이터 타입

  • 변수: 데이터 타입을 따로 선언할 필요 없음 (var, let, const 사용)
  • 데이터 타입: 숫자, 문자, 오브젝트 타입

 

📌 변수와 오브젝트의 차이

항목 저장 가능한 값 사용 예시
변수 하나의 값 let age = 25;
오브젝트 여러가지 값 let person = {name: "John", age: 25};

 

📌 이벤트(Event)

이벤트 설명
onchange HTML 요소에 변경이 일어났을 때
onclick HTML 요소를 클릭했을 때
onmouseover HTML 요소에 마우스를 올렸을 때
onmouseout HTML 요소에서 마우스를 멀리 이동했을 때
onkeydown 키보드를 눌렀을 때
onload 브라우저의 페이지 로드가 완료되었을 때

 

 

 

🔗 추가 참고 자료

 

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

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

[JavaScript] Validation Check  (0) 2021.05.21
[JavaScript] JSON parse  (0) 2021.05.21
[JavaScript] JSON  (0) 2021.05.21
[JavaScript] window.onload  (0) 2021.05.20
[JavaScript] 배열  (0) 2021.05.20

Eclipse에서 .html 파일을 .jsp 파일로 확장자만 변경할 경우, 한글이 깨지는 오류 발생 가능

 

 

해결 방법

  1. 한글 깨짐 발생 시 대처
    • 확장자를 다시 .html로 변경하면 한글이 복원됨
  2. 한글 깨짐 없이 변환하는 방법
    • .jsp 파일의 지시자를 복사하여 .html 파일 맨 위에 추가 후 확장자를 .jsp로 변경

 

JSP 파일 지시자 예시 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 

'프론트엔드 > HTML & CSS' 카테고리의 다른 글

[CSS] invalid property value  (0) 2021.07.05
[CSS] Border 종류별 정리  (0) 2021.05.13

+ Recent posts

티스토리툴바