지속가능티끌/JavaScript ( 25 ) JS . 브라우저 윈도우 사이즈 변경 이벤트 자바스트립트에서 윈도우 사이즈 변경 이벤트 핸들러 아래 방법1, 방법2 모두 가능. 실행결과 참고 브라우저에서 console.log 출력 보는 방법 : https://igotit.tistory.com/4967 JS . 자바스크립트 console.log 출력 웹 브라우저에서 보기 아래와 같은 자바스크립트 코드에서 console.log 출력 웹브라우저에서 보기. //파일 : test.js document.write("hello JS"); console.log("hello console"); 위 test.js 를 호출하는 html 파일. body1 by html body2 by html 크롬의 igotit.tistory.com 첫 등록 : 2023.10.30 최종 수정 : 단축 주소 : https://igot.. 2023. 10. 30. JS . uPlot . 자바 스크립트 고속 챠트 uPlot - 이름에 있는 u 는 마이크로. - 현재 (2023.10.30) 자바스크립트 챠트 중 가장 고속. - 무료. uPlot 다운로드 - uPlot 관련 .js 파일 웹서버에서 제공안되고 사용자가 직접 다운로드 받아서 본인 환경에 맞게 알아서 배치해두고 활용해야함. - 깃허브( https://github.com/leeoniya/uPlot )에서 보이는 폴더 dist 에 있는것만 다운로드 받으면 됨. uPlot 데모 보기 https://leeoniya.github.io/uPlot/demos/index.html μPlot Demos leeoniya.github.io uPlot 사용법 https://github.com/leeoniya/uPlot/tree/master/docs#installation 첫 .. 2023. 10. 30. JS . json JSON - json 형식 핸들링 가능한 JavaScript 기본 내장 클래스 . json 형식 문자열 예. const str_json = '{"topic":"publicTrade.BTCUSDT","type":"snapshot","ts":1698565896302,"data":[{"T":1698565896301,"s":"BTCUSDT","S":"Buy","v":"0.206","p":"34124.30","L":"PlusTick","i":"bb1546f8-99f1-52f3-a676-6bcae4e32efc","BT":false}]}' JSON.parse() json 형식의 문자열을 입력으로 주면 JavaScript object 로 반환됨. 앞의 json 형식 문자열을 JSON.parse 입력으로 주면 json .. 2023. 10. 29. JS . 웹브라우저에서 웹소켓 클라이언트 구현 웹브라우저에서 웹소켓 클라이언트 구현 - 웹브라우저 에서 WebSocket API 가 제공되고 있으며 자바스크립트로 이를 활용하여 웹소켓 클라이언트 구현가능. The WebSocket API (WebSockets) - Web APIs | MDN The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without havi deve.. 2023. 10. 29. JS . 자바스크립트 console.log 출력 웹 브라우저에서 보기 아래와 같은 자바스크립트 코드에서 console.log 출력 웹브라우저에서 보기. //파일 : test.js document.write("hello JS"); console.log("hello console"); 위 test.js 를 호출하는 html 파일. body1 by html body2 by html 크롬의 경우 상기 html 을 열어보면 아래처럼 보이는데 화면에서 마우스 우클릭하여 메뉴 "검사" 클릭한다. 아래처럼 브라우저 화면 오른쪽에 창이 추가되고, 붉은 박스 부분 Console 에 console.log 로 출력한 문자열 보임. 첫 등록 : 2023.10.29 최종 수정 : 단축 주소 : https://igotit.tistory.com/4967 2023. 10. 29. JS . html 에서 자바스크립트 파일 불러오기. 아래 예제 코드와 같은 자바스크립트 파일 test.js 가 있고 이를 html 에서 임포팅하여 실행하기 //파일 : test.js document.write("hello JS"); console.log("hello console"); html 파일 내에서 자바스크립트 실행시키고 싶은 위치 아무 곳에서나 아래 구문 기록한다. body1 by html body2 by html 상기 html 을 크롬에서 열어(이게 실행임) 실행된 화면 보면 아래와 같다. html 에서 문자열 body1 by html 표현이후 자바스크립트 실행되어 document.write 에 의한 Hello JS 문자 표현되고 이후 html 의 body2 by html 표현된다. 자바스트립트 console.log 출력 보는 방법 https:.. 2023. 10. 29. JS . dtree 트리 표현 dtree - 자바스크립트 트리 표현 - 트리 차일드 수 무제한 - frame 내에서도 사용가능 - 1개의 페이지내에서도 여러개의 트리 표현 가능. dtree 개요 페이지 : https://destroydrop.com/javascripts/tree/default.html 다운로드 dtree.js 와 예제 압축파일 : https://destroydrop.com/javascripts/tree/v1/tree.zip 함수 레퍼런스 : http://destroydrop.com/javascripts/tree/api/ 첫 등록 : 2023.10.22 최종 수정 : 단축 주소 : https://igotit.tistory.com/4943 2023. 10. 22. JS . replace() . 문자열 교체 replace var str = 'hi there'; //!!! str 의 there 를 where 로 변경한것을 "반환"하는것임. str 변수 자체의 문자열은 변화 없음. var str2 = str.replace('there','where'); - replace 함수는 교체된 문자열 을 반환하는 것이며, 원래 변수 상기 코드예에서 str 의 문자열은 변화 없음. - 앞의 예제 코드에서 검색 대상인 첫 인자는 대소문자 구분함. - 문자열 중에서 처음으로 발견된 문자열 만 교체 함. 첫 등록 : 2023.09.20 최종 수정 : 단축 주소 : https://igotit.tistory.com/4849 2023. 9. 20. JS . html body 문자열 받기 . document , innerHTML document.body , innerHTML - 아래 코드처럼 간단히 달성됨. - head 받고 싶으면 document.head 로 하면 됨. 첫 등록 : 2023.09.20 최종 수정 : 단축 주소 : https://igotit.tistory.com/4848 2023. 9. 20. html radio button 에 멀티 value 변수 정의 하는 것 . IE 에서만 가능 했던 것(똥). 사용금지. html radio button 에 멀티 value 변수 정의 I.E 에서만 가능 했던 방식. - 사용금지 html 에 radio 버튼에 설정가능한 value 외에 아래 코드 처럼 개발자가 임의로 추가 가능한 value_id 라는 것에 추가의 다른 값을 할당해두고 radio 버튼 클릭시 value, value_id 각각의 값을 모두 활용가능하여 편리했는데, 이런 방식의 코드는 인터넷 익스플로러에서만 정상 작동 가능하다. 크롬이나 에지에서는 value_id 라는 값을 못받아 undefined 로 처리된다. 표준 문법이 아닌 것을 인터넷 익스플로러에서는 사용 하게 했다는? 아 시발 ... 결국 MS 지들도 인터넷 익스플로러 못쓰게 하려고 쌩쑈를 하고 있지..하 그런다고 에지 사용할것 같음 ? 에지 사용하는 .. 2023. 9. 19. VS Code 에서 자바스크립트 개발환경 구축. Hello World 실행. 개요. - Visual Studio Code 기반 자바스크립트 개발 환경 구축위한 설치사항. - 아래 2개만 설치하면 기본은 완료됨. - Hello World 출력하기 설치1. Visual Studio Code 설치. - 아래 주소 설명대로 설치완료한다. Visual Studio Code. 개요. 설치. 코드편집전문, Git 연동. 개요 Visual Studio Code - 무료 코드 작성전문툴, 인텔리센스, 디버깅. - Git 연동. - 작성가능코드 : C, C++, C#, Python, Go, Objective-C, Lua, HTML, JavaScript, CSS, Java, Ruby, SQL, Perl, Jade, XML, Co.. igotit.tistory.com 설치2. Node.js 설치. -.. 2020. 3. 10. Node.js 개요 . 설치. Node.js 개요 - 자바스크립트 런타임 환경. 웹브라우저 아닌 환경에서도 자바스크립트 실행환경. - 서버 어플리케이션 개발에 많이 사용되나 클라이언트도 개발 가능. - node.js 설치시 npm 도 기본 같이 설치됨. - npm : node package manager, node.js 에서 사용가능한 모듈들, 패키지 설치위한 CLI (Command Line Interfade). Node.js 런타임 설치. https://nodejs.org/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - 2개의 설치가능한 버전이 보이는데 LTS 버전 설치하면됨. - 정상설치 확인 : node -v.. 2020. 3. 10. JavaScript. 시간함수 Date.now 함수(JavaScript) 구문복사 Date.now() 반환 값1970년 1월 1일 자정과 현재 날짜 및 시간 사이의 밀리초 값입니다.설명getTime 메서드는 1970년 1월 1일과 지정된 날짜 사이의 밀리초 값을 반환합니다. 경과된 시간을 계산하고 날짜를 비교하는 방법에 대한 자세한 내용은 날짜 및 시간 계산(JavaScript)을 참조하십시오.예제다음 예제에서는 now 메서드를 사용하는 방법을 보여 줍니다. JavaScript복사 var start = Date.now(); var response = prompt("What is your name?", ""); var end = Date.now(); var elapsed = (end - start) / 1000; document.wri.. 2016. 12. 8. JavaScript. object 만들기. 개체 만들기(JavaScript) JavaScript로 사용자 고유의 개체를 만들 수 있는 다양한 방법이 있습니다. Object 개체(JavaScript)를 직접 인스턴스화한 다음 사용자 고유의 속성 및 메서드를 추가할 수 있습니다.또는 개체 리터럴 표기법을 사용하여 개체를 정의할 수 있습니다.생성자 함수를 사용하여 개체를 정의할 수도 있습니다.생성자 함수를 사용하는 방법에 대한 자세한 내용은 생성자를 사용하여 형식 정의를 참조하세요.예제다음 코드에서는 개체를 인스턴스화하고 일부 속성을 추가하는 방법을 보여 줍니다.이 경우 pasta 개체에만 grain, width 및 shape 속성이 있습니다.JavaScript복사 var pasta = new Object(); pasta.grain = "wheat";.. 2016. 12. 7. JavaScript. 상수. const myconst = 10; // 상수로 설정되었으므로 코드내에서 값대입 불가. 기타: IE11 이상에서 정상작동. IE8,9,10에서는 안됨. ///1131. 2016. 12. 7. JavaScript. 배열 생성,shift, pop, unshift, push 배열생성 1. 일반 배열 생성 방법. 아래 1,2,3,4,5 는 배열 인덱스 값이 0,1,2,.. 식으로 지정되는 일반적인 방식으로 동일한 결과임. 1. var myarray = new Array(3); // 3개 요소를 갖는 배열 변수 선언. myarray[0] = 1; myarray[1] = 2; myarray[2] = 3; // 초기화. 2.var myarray = new Array(1,2,3); // 생성과 동시에 초기화. 3.var myarray = [1,2,3]; // 1,2,3 으로 초기화 하면서 생성. 4. var myarray = new Array(); // 배열사이즈 0으로 초기 생성됨.myarray[0] = 1; myarray[1] = 2; myarray[2] = 3; // 초기화. .. 2016. 12. 7. JavaScript. 로컬이미지 미리 보이기. from : http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded ///906. 2016. 8. 24. JavaScript. Object. Array Object 및 Array(JavaScript) JavaScript objects are collections of properties and methods. A method is a function that is a member of an object. A property is a value or set of values (in the form of an array or object) that is a member of an object. JavaScript supports four kinds of objects: Intrinsic objects, such as Array and String. Objects you create. Host objects, such as window and document.. 2016. 7. 28. 이전 1 2 다음
