자바에서 람다식을 쓰는 이유는 인터페이스의 타입을 몰라도 되기 때문이다.

 

자바스크립트에서 람다식을 쓰는 이유는

자바스크립트의 람다식 ()=>{} 은 function(){} 과는 다르다.

 

 

 

외부의 함수는 정상적으로 버튼을 가리키지만

inner function을 만들면 이상하게 window를 가리키게 되는데 
진짜 그럴때 버튼을 가리키게 하려면 람다식을 쓴다 ()=>

 

 

 

-------------------------------

 

 

 

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 백틱  (0) 2020.06.04
자바스크립트 객체 프로퍼티(필드, 변수) 작성 따옴표  (0) 2020.06.02
자바스크립트 객체를 JSON으로 바꾸기  (0) 2020.06.02
jQuery 제이쿼리 시작  (0) 2020.06.02
AJAX 통신 개념  (0) 2020.06.02

 

 

-------------


반대로 JSON을 자바스크립트 객체로 바꾸려면 

JSON.parse를 쓰자

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 객체 프로퍼티(필드, 변수) 작성 따옴표  (0) 2020.06.02
자바스크립트 람다식 this  (0) 2020.06.02
jQuery 제이쿼리 시작  (0) 2020.06.02
AJAX 통신 개념  (0) 2020.06.02
자바스크립트 history 객체 활용 미완성  (0) 2020.03.13

유용한 함수와 기능들을 만들지 않아도 라이브러리에서 제공해준다

https://www.w3schools.com/jquery/jquery_hide_show.asp

 

jQuery Effects - Hide and Show

jQuery Effects - Hide and Show Hide, Show, Toggle, Slide, Fade, and Animate. WOW! Click to show/hide panel Because time is valuable, we deliver quick and easy learning. At W3Schools, you can study everything you need to learn, in an accessible and handy fo

www.w3schools.com

 

 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

	<div id="reply-1">첫번째 댓글 입니다.</div>

	<input type="text" id="tf-reply"/>
	<button onclick="start()">댓글쓰기</button>

	<script>
		function start() {
			var a = $('#tf-reply').val();
            $('#reply-1').prepend("<div id='reply-2'>" + a + "</div>");
			// alert(a);
		}
	</script>

</body>
</html>

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

	<div id="reply-1">첫번째 댓글 입니다.</div>

	<input type="text" id="tf-reply"/>
	<button onclick="start()">댓글쓰기</button>

	<script>
		function start() {
			var a = $('#tf-reply').val();
            $('#reply-1').before("<div id='reply-2'>" + a + "</div>");
			// alert(a);
		}
	</script>

</body>
</html>

 

 

 

맨위의 댓글 찾기

 

 

id 번호 늘리기

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div {
	border: 1px solid black;
	margin: 5px;
	padding: 5px;
}
</style>
</head>
<body>

	<div id="reply-box">
		<div id="reply-1" class="re">첫번째 댓글 입니다.</div>
	</div>

	<input type="text" id="tf-reply" />
	<button onclick="start()">댓글쓰기</button>

	<script>
		var num = 1; // 이 값은 원래 db에서 가져와야됨
		function start() {
			var a = $('#tf-reply').val();
			num++;
			$('#reply-box').prepend("<div id='reply-" + num + "'>" + a + "</div>");
		}
	</script>

</body>
</html>

 

 

 

 

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 람다식 this  (0) 2020.06.02
자바스크립트 객체를 JSON으로 바꾸기  (0) 2020.06.02
AJAX 통신 개념  (0) 2020.06.02
자바스크립트 history 객체 활용 미완성  (0) 2020.03.13
자바스크립트 window.location으로 select 웹사이트 이동  (0) 2020.03.13

자바스크립트의 기술

HTML 파일 화면의 일부분만 새로 받아와서 변경하고 싶은 경우 사용한다 (화면을 새로고침 하지 않는다)

request -> response 시 새로고침 하지 않음

백그라운드에서 데이터를 주고 받을 수 있음

 

제이쿼리 엑시오스 

 

w3school에서 연습

https://www.w3schools.com/js/js_ajax_intro.asp

 

AJAX Introduction

AJAX Introduction AJAX is a developer's dream, because you can: Read data from a web server - after the page has loaded Update a web page without reloading the page Send data to a web server - in the background AJAX Example Explained HTML Page

www.w3schools.com

 

.then

 

fetch + async + await

리턴값.text()

리턴값.json()

https://joshua1988.github.io/web-development/javascript/js-async-await/

 

자바스크립트 async와 await

(중급) 자바스크립트 개발자를 위한 async, await 사용법 설명. 쉽게 알아보는 자바스크립트 async await 개념, 사용법, 예제 코드, 예외 처리 방법

joshua1988.github.io

 

 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div {
	border: 1px solid black;
	margin: 5px;
	padding: 5px;
}
</style>
</head>
<body>

	<div id="reply-box">
		<div id="reply-1" class="re">첫번째 댓글 입니다.</div>
	</div>

	<input type="text" id="tf-reply" />
	<button onclick="start()">댓글쓰기</button>

	<script>
		var num = 1; // 이 값은 원래 db에서 가져와야됨
		function start() {
			num++;
			var a = $('#tf-reply').val();

			// 통신이 성공하면 아래 로직 실행

			$.ajax(
			// ajax 비동기 백그라운드로 다른페이지에 request를 하고 response를 받으면 result에 데이터를 저장한다. 
			// 보낼타입은 json 상대방에게 받을 타입도 json이다. 아래에서 확인

			{ // 오브젝트
				type : 'post',
				url : 'AjaxResponseTest.jsp',
				data : '{"username":"ssar", "password":"1234"}',
				contentType : 'application/json; charset=utf-8',
				dataType : 'json' // 받을데이터를 어떻게 파싱할까 text / json
			}

			).done(
					function(result) { // 통신이 성공
						console.log(result);
						$('#reply-box').prepend(
								"<div id='reply-" + num + "'>" + a + "</div>");
					}).fail(function(error) { // 통신이 실패
				console.log(error);
			});

		}
	</script>

</body>
</html>

 

<%@page import="com.google.gson.Gson"%>
<%@page import="com.cos.blog.dto.ResponseDto"%>
<%@page import="java.io.BufferedReader"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 

	BufferedReader br = request.getReader();
	
	String input = null;
	StringBuilder sb = new StringBuilder();
	while((input = br.readLine()) != null ){
		sb.append(input);
	}
	
	System.out.println("받은데이터 시작---");
	System.out.println(sb.toString());
	System.out.println("받은데이터 끝---");
	
	ResponseDto<String> dto = new ResponseDto<>();
	dto.setStatus(200);
	dto.setData("성공");
	
	Gson gson = new Gson();
	String returnStr = gson.toJson(dto);
	System.out.println(returnStr);
	
	out.println(returnStr); // JSON을 리턴
	
%>

 

 

 

 

 

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 객체를 JSON으로 바꾸기  (0) 2020.06.02
jQuery 제이쿼리 시작  (0) 2020.06.02
자바스크립트 history 객체 활용 미완성  (0) 2020.03.13
자바스크립트 window.location으로 select 웹사이트 이동  (0) 2020.03.13
자바스크립트 웹 페이지 프린트  (0) 2020.03.13

See the Pen zYGWNxJ by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

jQuery 제이쿼리 시작  (0) 2020.06.02
AJAX 통신 개념  (0) 2020.06.02
자바스크립트 window.location으로 select 웹사이트 이동  (0) 2020.03.13
자바스크립트 웹 페이지 프린트  (0) 2020.03.13
자바스크립트 자동 스크롤 페이지  (0) 2020.03.13

See the Pen poJLRvd by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

AJAX 통신 개념  (0) 2020.06.02
자바스크립트 history 객체 활용 미완성  (0) 2020.03.13
자바스크립트 웹 페이지 프린트  (0) 2020.03.13
자바스크립트 자동 스크롤 페이지  (0) 2020.03.13
자바스크립트 마우스를 이미지에 5초동안 올려두면 사이트로 이동  (0) 2020.03.13

See the Pen BaNrpyL by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 history 객체 활용 미완성  (0) 2020.03.13
자바스크립트 window.location으로 select 웹사이트 이동  (0) 2020.03.13
자바스크립트 자동 스크롤 페이지  (0) 2020.03.13
자바스크립트 마우스를 이미지에 5초동안 올려두면 사이트로 이동  (0) 2020.03.13
자바스크립트 window.open()으로 새창 열기  (0) 2020.03.13

See the Pen dyompPO by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 window.location으로 select 웹사이트 이동  (0) 2020.03.13
자바스크립트 웹 페이지 프린트  (0) 2020.03.13
자바스크립트 마우스를 이미지에 5초동안 올려두면 사이트로 이동  (0) 2020.03.13
자바스크립트 window.open()으로 새창 열기  (0) 2020.03.13
자바스크립트 물품을 선택하면 자동으로 계산  (0) 2020.03.13

+ Recent posts

티스토리툴바