반응형

JavaScript / parseInt(), parseFloat() - 문자열을 정수, 소수로 파싱

 

parseInt()

문자열을 정수로 파싱해주는 함수입니다.

parseInt(string, 진법)

 

예제

parseInt('100', 2) // 100을 2진법으로 생각하기 때문에 4로 출력됩니다. 

parseInt('100.2') // 100이 출력됩니다.

parseInt('0x100') // 0x100은 16진로 생각하기 때문에 256이 출력됩니다.

parseInt('abc') // 숫자가 아닌 문구가 포함될 경우에는 NaN이 출력됩니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>JavaScript</title>
	</head>
	<body>
		<script>
			document.write( "<p>parseInt( '12.34' ) : " + parseInt( '12.34' ) + "</p>" );
			document.write( "<p>parseInt( '100', 10 ) : " + parseInt( '100', 10 ) + "</p>" );
			document.write( "<p>parseInt( '100', 2 ) : " + parseInt( '100', 2 ) + "</p>" );
			document.write( "<p>parseInt( '0x100' ) : " + parseInt( '0x100' ) + "</p>" );
			document.write( "<p>parseInt( 'abc' ) : " + parseInt( 'abc' ) + "</p>" );
		</script>
	</body>
</html>

 

 

parseFloat()

문자열을 소수로 파싱해주는 함수입니다.

parseFloat(string)

예제

parseFloat('12.34') // 12.34를 출력합니다.

parseFloat('12.34 5') // 처음 오는 소수 문자열만 인식되기 때문에 12.34를 출력합니다.

parseFloat('abc') // 숫자가 아닌 문구가 있는 경우에는 NaN을 출력합니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>JavaScript</title>
	</head>
	<body>
		<script>
			document.write( "<p>parseFloat( '12.34' ) : " + parseFloat( '12.34' ) + "</p>" );
			document.write( "<p>parseFloat( '12.34 5' ) : " + parseFloat( '12.34 5' ) + "</p>" );
			document.write( "<p>parseFloat( 'abc' ) : " + parseFloat( 'abc' ) + "</p>" );
		</script>
	</body>
</html>

반응형
저작자표시

'프로그래밍 > JavaScript' 카테고리의 다른 글

JavaScript / onkeypress, event.keyCode - 키보드 입력 값  (0) 2020.10.20
JavaScript / 페이지 이동 (location.href, replace, reload, history.go)  (0) 2020.10.18
JavaScript 개발 환경 설치 및 Hello world 출력 - (Visual Studio Code 설치)  (0) 2020.08.09
반응형

JavaScript / event.keyCode - 키보드 입력 값

 

JavaScript의 onkeypress로 사용자의 키입력을 감지할 수 있습니다.

키 값은 event.keyCode 변수로 받고,

이 변수값은 ASCII코드로 사용되고, event.keyCode 코드표는 아래 테이블을 참고하시면 됩니다. 

그리고 Key Event를 테스트하기 위해 아래 링크를 참조하시면 됩니다. 

key를 눌렀을 때, 그 값을 확인하기 위한 용도입니다. 

unixpapa.com/js/testkey.html

 

Javascript Key Event Tester

 

unixpapa.com

예제

아래 예제는 onkeypress가 눌릴 때마다 mv 함수를 실행하도록 하는 예제입니다. 

event.keyCode를 전달인자로 주고, 이 변수를 받아 각 key 값에 따라 처리를 합니다. 

반응형
저작자표시

'프로그래밍 > JavaScript' 카테고리의 다른 글

JavaScript / parseInt(), parseFloat() - 문자열을 정수, 소수로 파싱  (0) 2020.10.20
JavaScript / 페이지 이동 (location.href, replace, reload, history.go)  (0) 2020.10.18
JavaScript 개발 환경 설치 및 Hello world 출력 - (Visual Studio Code 설치)  (0) 2020.08.09
반응형

JavaScript / 페이지 이동 (location.href, replace,reload, history.go)

 

location.href

다른 페이지로 이동하는데도 사용됩니다.

이전 페이지의 히스토리가 남습니다.

 

location.href("이동할 주소");

<script> 
	location.href("www.naver.com"); // 이전페이지 히스토리가 남음
</script>

 

location.replace

다른 페이지로 이동하는데도 사용됩니다.

이전 페이지의 히스토리가 남지 않습니다.

 

location.replace("이동할 주소");

<script> 
	location.replace("www.naver.com");    // 이전페이지 히스토리가 남지 않음.
</script>

 

location.reload

현재 페이지를 새로고침 할 때 사용됩니다.

 

location.reload();

<script> 
	location.reload();      // 현재페이지 새로고침.
</script>

 

history.go

() 안의 값이 현재페이지에 대한 상대좌표로 사용되어 이동됩니다. 

history.go(-1)은 history.back()과 동일하게 동작하며, 이전 페이지로 이동됩니다. 

<script> 
	history.go(-1);   // 이전페이지 가기
    history.go(0);    // 현재 페이지 새로고침
    history.go(-2);   // 두 단계 전 페이지 가기
</script>

 

반응형
저작자표시

'프로그래밍 > JavaScript' 카테고리의 다른 글

JavaScript / parseInt(), parseFloat() - 문자열을 정수, 소수로 파싱  (0) 2020.10.20
JavaScript / onkeypress, event.keyCode - 키보드 입력 값  (0) 2020.10.20
JavaScript 개발 환경 설치 및 Hello world 출력 - (Visual Studio Code 설치)  (0) 2020.08.09
반응형

JavaScript 개발 환경 설치 - (Visual Studio Code 설치)

 

JavaScript 개발을 위해 Visual Studaio(VS) Code 프로그램을 설치합니다. 

아래 링크에서 무료로 다운로드 하여 설치할 수 있습니다. 

 

code.visualstudio.com/Download

 

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

 

파일을 다운로드하여 실행시키면 설치됩니다. 

어려운 점은 없으실 겁니다. 

 

 

설치가 되면 아래와 같이 실행됩니다. 

 

영어로 보기가 어렵다면 한국어를 설치해 보겠습니다. 

검색어에 korean을 쳐서 첫번째를 install하고, Restart Now를 누릅니다.

 

그러면 아래와 같이 한국어로 변경됩니다. 

 

이제 JavaScript를 이용해 Hello world를 출력해 보겠습니다. 

파일 > 새파일로 파일을 생성하고, 아래와 같이 코드를 만들어 봅니다. 

document.write("Hello World!");
document.write("<br>");

JavaScript로 저장합니다.

폴더를 지정하고, 생성된 파일을 보면, 아래와 같이 변경됩니다. 

 

이번에는 html 파일을 생성하여, javascript의 내용이 표시되도록 하겠습니다. 

html 파일도 JavaScript 파일과 동일하게 생성하면 아래와 같이 표시됩니다. 

이번에는 html 코드를 작성해 봅니다. 

만들었던 JavaScript 파일을 로드합니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
    <script type="text/javascript" src="Test1.js"></script>
</body>
</html>

아래 Test2.html을 실행합니다. 

그러면 아래와 같이 Hello World!가 출력되는 것을 볼 수 있습니다. 

실행 > 디버깅 시작을 누르고 환경 선택은 Chrome으로 해봅니다. 

그러면 아래와 같이 에러가 출력됩니다. 

그래서 Chrome을 위한 Debugger를 설치합니다. 

 

 

그럼 아래와 같이 launch.json 파일이 생성되고, url에 서버 경로를 지정합니다. 

서버가 없으시면 로컬 서버를 만드셔서, 확인해 볼 수 있습니다. 

 

 

반응형
저작자표시

'프로그래밍 > JavaScript' 카테고리의 다른 글

JavaScript / parseInt(), parseFloat() - 문자열을 정수, 소수로 파싱  (0) 2020.10.20
JavaScript / onkeypress, event.keyCode - 키보드 입력 값  (0) 2020.10.20
JavaScript / 페이지 이동 (location.href, replace, reload, history.go)  (0) 2020.10.18

+ Recent posts

티스토리툴바