본문 바로가기

Programming/JavaScript

(6)

[JS] Object 변수 데이터 추가, 문자열(String)을 이용한 동적 접근 방법 🥸 JavaScript Object 객체 문자열을 이용해 동적으로 데이터 추가, 삭제하기 자바스크립트의 Object 객체는 key, value 형태도 데이터를 저장합니다. 🤔 프로퍼티 접근법으로 데이터 추가, 대체 하기 var object = {}; object.arr = [];// obect에 arr가 없다면 빈 배열([])을 추가, 존재한다면 대체 console.log(object); // { arr: [] } object.arr.push('first');// object 안의 arr에 문자열 'first' 추가 console.log(object.arr); // [ 'first' ] object.arr = [];// 기존에 있는 arr를 빈 배열로 대체 console.log(object.arr); /..

[JS] 자바스크립트의 상속과 prototype 이번에 회사에서 배치받은 팀은 모바일 서비스 팀이었다. 네이티브 앱 아래에 웹 뷰를 제공하는데 당분간은 프론트 부분을 다루게 될 것 같다. JS는 DOM 조작 외에는 다뤄볼 기회가 없었기에 이번에 prototype에 대한 개념도 처음 알게 되었다. JS는 prototype 기반 언어라고 불린다는데 기본도 몰랐던 거시였다... 한 동안 JS를 열심히 공부해야할 것 같다. prototype은 JS에서 객체의 상속을 다루는 간단하면서, 중요한 개념이었다. 사실 JS도 이런 기능을 제공한다는 것에 놀라기도 했다. 또 역시 JS답게 굉장히 심플했다. 🧐 자바스크립트 객체 생성 function MyObject(인자) { this.property1 = ... this.property2 = 인자 } class MyOb..

[JavaScript] String-boot 웹 소켓(WebSocket)을 이용한 실시간 채팅 구현 - Session Storage 활용하기 소개 왜 WebSocket을 사용하였나? Spring-boot WebSocket 사용법(설정법) 순수 자바스크립트로 작성해보기 발생한 문제와 해결 방법 ㄴ HTTP session 가져오기 -> interception 사용 ㄴ DB를 사용하지 않고 기존 메시지 저장하기 -> Session Storage 사용하기 최근 작성 중인 개인 프로젝트에서 웹에 접속한 클라이언트와 실시간 채팅을하는 기능을 구현해보려고 했다. 🤔 왜 WebSocket을 사용하였나? 여기서 말하는 웹 소켓은 Spring Framework의 STOMP가 아닌 순수 JavaScript를 활용한 예제 입니다. jquery도 사용하지 않습니다. WebSocket이 필요했던 이유 앞서말했듯 실시간 라이브 채팅 기능을 구현하고 싶었다. 하지만, 기..

[JavaScript] 바닐라 자바스크립트 disabled, display 속성 추가, 해제(변경) 간혹 자바스크립트에서 disabled 속성과 display 속성을 변경할 때 헷갈리는 경우가 있다. 필요할 때 찾아보기 위해서 글을 씁니다. JavaSctript로 disabled 속성 활성화 or 해제 하기 function disabledFalse() { document.querySelector('#name').disabled = false; document.querySelector('#email').disabled = false; document.querySelector('#phone').disabled = false; document.querySelector('#message').disabled = false; } 위 처럼 내가 원하는 선택자를 선택해준 후 .disabled 속성을 변경해주면 된다...

자바 스크립트 기초 / 글자수 계산기 글자수 계산기 만들기 with 자바스크립트 필요지식 1. getElementById를 이용해 ㄴ DOM(Document Object Model)의 id 가져오기 2. onkeydown 이벤트 HTML 코드 자기소개 // 제목 입력 입력하세요 (0/200) 자바스크립트 코드

자바 스크립트 독학 기초 / 코드 뜯어 보기 #1 / 랜던 번호 생성기 DOCTYPE html> 번호 생성기 웹 페이지 이름 랜덤 번호 추첨기 페이지 상단 제목 var lotto = []; lotto 라는 이름의 array(글자나 숫자를 담는 공간) 생성 while (lotto.length 0 이상 46미만의 실수를 생성 parseInt() -> () 안의 값을 '정수'로 변환 if (lotto.indexOf(num) == -1) { 조건문 if를 사용, '(조건)'을 만족하는 동안 '{내용}'을 진행 조건 lotto.indexOf(num) -> 변수 num이 lotto array 안에 존재 몇 번째 항목 나타냄 존재하지 않으면 -1 랜덤으로 생성된 숫자가 중복적으로 array에 들어가지 않게 해주기 위함 lotto.push(num); 조건을 만족한다면 lotto array..

이전 1 다음

728x90

티스토리툴바