본문 바로가기

IT 공부/JavaScript

 (11)
[모던 JS] 객체의 기초 2. 생성자 자바, C++에는 class를 사용해서 객체를 생성할 수 있는데, 자바스크립트는 class라는 개념이 없다. 그대신 생성자를 사용하여 객체를 생성한다. 간단한 예 function Card(suit, rank){ this.suit = suit; this.rank = rank; } var card = new Card('하트','A') new라는 키워드를 사용해서 card라는 인스턴스를 만들고 있다. 이때, Card는 card의 생성자이며, Card가 가지고 있는 매개변수 suit, rank에 '하트', 'A'가 들어간다. this.프로퍼티이름에 값을 대입하면 그 이름을 가진 프로퍼티에 값이 할당된 객체가 생성된다. 이때 this는 생성자가 객체를 가리킨다. 생성자의 이름은 대문자로 시작하는 파스칼 표기법을 ..
[모던 JS] 객체의 기초 - 객체 리터럴 객체란? 파이썬의 딕셔너리 {키 : 값}과 같이 이름과 값을 한쌍으로 붂은 데이터를 여러개 묶은 것을 말한다. 객체를 생성하는 방법에는 2가지가 있는데 1. 객체 리터럴을 사용하는 방법 2. 생성자 함수를 사용하는 방법 이 있다. 그중 객체 리터럴을 사용하여 객체를 생성하는 방법을 배워보자 var card = {suit : '하트', rank : 'A'}; {...}이걸 객체 리터럴이라고 부르며 이를 통해서 객체를 생성할 수 있다. {...}안에 들어있는 것을 우리는 프로퍼티라고 부르며 {프로퍼티, 프로퍼티, 프로퍼티} 이렇게 ,로 프로퍼티를 구분할 수 있다. 프로퍼티에는 2가지의 값이 들어가는데 왼쪽에 있는 값은 프로퍼티의 이름(키)이며 오른쪽에 들어있는 값은 프로퍼티의 값(값)이다. 프로퍼티의 이름과..
[모던 JS] 템플릿 리터럴 템플릿이란 일부만 변경해서 반복하거나 재사용할 수 있는 틀을 말한다. 템플릿 리터럴은 1. 템플릿 리터럴을 사용하면 표현식의 값을 문자열에 추가하거나 2. 여러 줄의 문자열을 표현할 수 있다. 기본적인 사용법 템플릿 리터럴은 역따옴표(`)를 사용한다. `I'm going to learn JavaScript` 줄바꿈 var t = `Man errs as long as he strives.`; var t = "Man errs as long as\nhe strives." var t = `Man errs as long as\nhe strives.` ""을 사용하면 기존에 줄바꿈을 할 때에는 \n을 사용했는데, `를 사용하면 줄바꿈이 바로 반영된다. `을 쓰고 \이스케이프 문자를 사용해도 된다. //위의 줄과 아..
[모던 JS] 심벌(Symbol) ECMAScript6부터 새롭게 정의된 개념이다. 심벌(Symbol) 말 그대로 상징한다는 의미로, 자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값이다. (데이터 타입 - 원시 자료형 중 하나이다.) 언제 쓰일까? 바둑을 하는 프로그램을 작성한다고 가정해보자. var NONE = 0;//칸에 돌이 놓여 있지 않은 상태 var WHITE = 1;//칸에 흰색 돌이 놓여 있는 상태 var BLACK = 2; //칸에 검은 돌이 놓여 있는 상태 이 코드에서 칸 하나의 상태를 cell이라는 변수에 저장한다고 가정했을 때, cell의 상태를 확인하려면 cell == NONE(칸에 돌이 없다면) cell == WHITE(칸에 흰색돌이 있다면) cell == BLACK(칸에 검은돌이 있다면)이렇게 작성해야 코..
[Node.js] 파일 읽어 node로 실행하기 - Mac 데스크탑에 javascript 파일을 만든다. javascript 파일 안에 js_study 파일을 만든다. js_study 파일 안에 factorial.js 파일을 만든다. 해당 코드를 입력한다. function fact(n){ if(n
Node.js - Mac Node.js는 주로 서버 측 자바스크립트 실행 환경으로 사용된다. Node.js 위에서 동작하는 서버 애플리케이션을 작성하면 다양한 웹 서버를 구축할 수 있고 일반 PC에도 설치할 수 있다. Node.js 실행시키기 1. 터미널을 연다. 2. node를 입력한다. -> node를 입력하면 대화형 모드(REPL)가 켜진다. 그러면 명령을 기다린다는 의미로 프롬프트 >가 표시된다. 다양한 기능들을 사용 가능. ex) .editor - 편집기 모드(종료 control + D) .exit - 대화형 모드 종료
[JS] form을 이용하여 사용자에게 입력받기 - 공백 차단 로그인편(간단) 아이디와 비밀번호를 입력받을 모달창을 디자인한다. 전송 닫기 태그는 사용자에게 입력받을 수 있는 태그이다. 태그로 사용자에게 입력받은 데이터를 전송한다. success.html으로 에 type으로 submit을 지정하면 해당 버튼이 폼 데이터(form data)를 제출한다. email이라는 변수를 만들어서 으로 받은 내용을 넣고 password이라는 변수를 만들어서 으로 받은 내용을 넣고 submit이라는 아이디를 가지고 있는 버튼을 클릭하면 콜백함수를 실행하는데 만약에 email에 들어있는 값이 null(false)이 아니거나(true) password(false)에 들어있는 값이 null이 아니거나(true) 둘다 null(false)이 아니면 true로 바뀌니까 alert를 띄운다. e.preven..
[JS] 모달창에 애니메이션 주기 (전 모달창 만들기 글 참고) 최종 결과물 1. 처음에 시작할 디자인 2. 최종으로 만들어질 디자인 3. javascript로 처음->최종 가도록 조작하고 4. css에 자연스러운 효과 넣기 1. 처음에 시작할 디자인 .black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; visibility: hidden; opacity : 0; } .white-bg { background: white; border-radius: 5px; padding: 30px; } 저번 글에서 display를 none으로 넣었는데, 이러면 애니메이션이 잘 안먹을 수도 있어서 vis..

티스토리툴바