본문 바로가기

JS & TS/Javascipt11

win-jenv 첫 오픈소스 프로젝트 win-jenv 첫 오픈소스 프로젝트 처음으로 node.js를 기반으로한 windows에서 사용 가능한 java jdk 환경변수설정 npm 오픈소스를 만들어 보았습니다. 왜 만들었나? 제 개인 개발환경은 macos입니다. 하지만 회사에서 사용하는 개발환경은 windows os이고 점심시간을 이용해 개인 springboot 프로젝트를 수정해야 할 떄 jdk8과 jdk11을 왔다갔다 해야할 때가 있었습니다. 안 그래도 짧은 점심시간… 환경변수 수정하는 것조차 불편해서 mac os의 jenv와 유사한 win-jenv를 만들었습니다. 어떻게? 최근 블로그 포스팅을 마크다운으로 하고싶어 찾아본 방법 중에 jojoldu님의 markdown-tistory를 사용하게 되었습니다. npm을 이용해 cli 오픈소스를 충분.. 2022. 4. 2.
[JS] 브라우저 객체 모델 BOM - 2 [JS] 브라우저 객체 모델 BOM - 2 2021/02/17 - [Javascript/Javascript정리] - [JS] 브라우저 객체 모델 BOM - 1 location 객체 location객체는 현재 브라우저에 표시된 HTML문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용한다. location객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL주소를 다양하게 해석하여 처리할 수 있다. href 페이지의 URL 전체 정보를 반환한다. URL을 지정하여 페이지 이동이 가능하다. location.href 의 형태로 작성한다. 1. document.write(location.href);와 같이 출력의 대상으로 작성한다면 해당 페이지의 정보를 반환한다. 2. location.href = ".. 2021. 2. 17.
[JS] 브라우저 객체 모델 BOM - 1 [JS] 브라우저 객체 모델 BOM 자바스크립트를 이용하여 브라우저 자체에 접근하는 방법을 알아본다. 목차 브라우저 객체 모델이란? window 객체 브라우저 객체 모델이란? 자바스크립트를 이용하면 HTML 태그에 대한 접근 뿐만이 아니라 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. 이 때 사용하는 객체 모델을 브라우저 객체 모델(BOM, Browser Object Model)이라고 한다. 브라우저의 종류는 익스플로러, 크롬, 파이어폭스 등 다양하다. 때문에 BOM은 DOM과 다르게 W3C의 표준 객체 모델이 아니다. 하지만 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다. 이러한 BOM객체들을 전역 객체로 사용할 수 있다. window 객체 .. 2021. 2. 17.
[JS] DOM 객체, 프로퍼티 [JS] DOM 객체 DOM이란 Document Object Model의 약자로 HTML 태그들을 하나씩 개체화한 것이다. HTML페이지의 내용과 모양을 Javascript로 제어하기 위해 사용되는 객체들이다. HTML 태그 당 DOM객체가 하나씩 생성된다. HTML 태그의 포함관계에 따라서 부모 자식 관계로 구성한다. 목차 HTML문서의 태그를 객체로 받아오기 받아온 태그 객체 이용하기 DOM객체의 프로퍼티 HTML문서의 태그를 객체로 받아오기 DOM객체를 사용하는 가장 기본은 document를 이용하는 것이다. 이전에 document.write를 이용할 때 사용한 적 있었다. [JS] 자바스크립트로 본문에 코드 추가하기 [JS] 자바스크립트로 본문에 코드 추가하기 웹 페이지에서 사용자가 어떠한 행동을.. 2021. 2. 14.
[JS] 객체, 프로토타입, property [JS] 객체, property 자바스크립트에서 객체를 알아본다. 객체의 고유한 속성은 프로퍼티(property)라고 부르며, 여러 프로퍼티와 값의 쌍으로 표현된다. 자바스크립트에서 객체는 타 언어(자바, 파이썬, C, 등)에 비해 자주 사용되지는 않는다. 추후에 배울 JSON타입의 데이터를 추출할 때 사용하거나, Ajax 통신으로 여러 개의 값을 서버에 전달할 때 {}로 묶어서 전달하는 방식으로 사용된다. 목차 자바스크립트 객체 생성방법 자바스크립트 객체 프로퍼티(property) 객체 접근방법 프로토타입 자바스크립트 객체의 유형 - 코어 객체 코어 객체 - Date타입 자바스크립트 객체 생성방법 자바스크립트에서 객체를 생성하는 방법은 변수를 선언할 때와 유사한 형태로 작성한다. var 객체명 = { .. 2021. 2. 13.
[JS] 함수 function [JS] 함수 function 자바스크립트의 함수 선언방법과 전역함수에 대해 알아본다. 목차 자바스크립트 함수 선언방법 자바스크립트의 전역함수 자바스크립트 함수 선언방법 자바스크립트에서 함수를 선언할 때에는 다음과 같이 작성한다. function 식별자(매개변수1, 매개변수2, ...){ 연산내용1; 연산내용2; 연산내용3; ... return 리턴값 [생략가능] } function키워드로 함수 선언을 알린다. 식별자를 작성한 후 매개변수를 작성한다. 소활호 () 내에서 매개변수를 작성하며, 콤마 , 로 매개변수를 구분한다. 생략 가능하다. 중괄호 {} 내에서 연산할 내용을 작성한다. return 키워드는 리턴값이 필요할 때 작성하지만, 리턴값이 필요하지 않을 때에는 생략 가능하다. See the Pen.. 2021. 2. 12.
[JS] 값 비교하기(==, ===) [JS] 값 비교하기(==, ===) 자바스크립트에서 값을 비교하는 방법은 ==와 === 두가지 방법이 존재한다. 각각이 다른 점이 무엇인지 알아본다. 변수에 대해 알고 있다면 이해가 쉽다. [JS] 데이터타입, 변수, 상수 [JS] 데이터타입, 변수, 상수 자바스크립트가 처음이시라면 해당 글을 먼저 보시는 것을 추천합니다. 2021/02/10 - [Javascript/Javascript정리] - [JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자.. heekng.tistory.com == ==는 값을 비교한다. 이 때의 값은 숫자로 간단하게 확인할 수 있다. See the Pen 값비교 == by Heekng (@heekng) on CodePen. 자바스크립트에서 변수는.. 2021. 2. 12.
[JS] 데이터타입, 변수, 상수 [JS] 데이터타입, 변수, 상수 자바스크립트가 처음이시라면 해당 글을 먼저 보시는 것을 추천합니다. 2021/02/10 - [Javascript/Javascript정리] - [JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자바스크립트 기본 개념 자바스크립트 언어란? 자바스크립트 언어는 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다. 또한 컴파이 과정이 없고, 브라우저 내부의 자바스크립 heekng.tistory.com JAVA, C, Python처럼 Javascript도 데이터타입과, 변수, 상수 개념이 존재한다. 자바스크립트에서 변수, 상수의 선언방법, 데이터타입 구분방법 등을 알아본다. 목차 자바스크립트 식별.. 2021. 2. 12.
[JS] 자바스크립트로 본문에 코드 추가하기 [JS] 자바스크립트로 본문에 코드 추가하기 웹 페이지에서 사용자가 어떠한 행동을 했을 때, 본문에 원하는 콘텐츠를 추가해야 하는 경우가 있다. 이 때에는 DOM코드 중 write()와 writeln()을 이용한다. document.write(), document.writeln() 사용하기 document.write()와 document.writeln()은 해당 html문서의 body에 html스크립트를 추가한다. document.write("html코드");의 형태로 작성한다. write()와 writeln()의 차이는 줄넘김이 존재하는지 여부이다. 실제 작성한 코드를 보면 write, writeln 코드 테스트 See the Pen write, writeln by Heekng (@heekng) on .. 2021. 2. 11.

티스토리툴바