본문 바로가기

javascript

jQuery.ripples - 이미지에 물결 그래픽 효과 주기 # jQuery.ripples - 이미지에 물결 그래픽 효과 주기최근에 구글링을 하다가 블로그를 엄청 예쁘게 꾸미시고 글 퀄리티도 매우 뛰어난데를 발견했는데, 거기서 신기한게 있어서 나도 배우기 및 적용해볼겸 작성하는 글.## PH2023-11-29 : First posting.## TOC## jQuery.ripples.jsjQuery 라이브러리니 당연히 jQuery 가 선행되어야 하고, 실행 메소드 하나만 해주면 바로 적용이 된단다.유의 할점은 이미지는 태그가 아닌 css의 background-url 속성으로 적용되어야 한다고 한다. (객체 속성으로도 명시할 수 있음.) 아마도 그냥 img 로 load 되면 속성을 변화시키면서 img 를 바꾸는게 막혀서 그런듯 하다. (.gif 로 하면 더 멋질거 .. 더보기
Time zone table | setting # Time zone table | settingRecoeve.net timezone 설정을 위해 공부/연구하는 중. 어떻게 선택하게 해야 쉽게 설정 가능할까나?## PH2023-10-26 : Update. Vatican img. 근데 왜 sublime text 에서 HTML syntax 로 안보여주고 하얗게 일반 text 처럼 나올까나? 이상하네 ㅡ,.ㅡ;;;2023-07-05 : First posting.## TOC## Time in javascript```[.linenums.lang-js]new Date();Wed Jul 05 2023 08:21:44 GMT+0900 (한국 표준시)// Local time 으로 표시해줌. UTC+09:00new Date().toUTCString();'Tue, 04 .. 더보기
React 를 배워보자. (Learning React) with TypeScript and esbuild bundling # React 를 배워보자. (Learning React) with TypeScript and esbuild bundling## PH2024-08-28 : First posting.## TOC## Initiate React AppBundler 로는 Tree shaking 과 multi threading 을 지원해서 가장 빠르고 좋다는 esbuild 를 사용합시다. ```mkdir hello_reactcd hello_reactnpm init react-app .npm run startnpm install --save-exact --save-dev esbuildnpm audit fix --force// audit 뜻 : 1.감사 2.단속 3.청강 4.세무조사npm install --save-dev @babe.. 더보기
JavaScript 중급 서술형 평가 (자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명, 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명, 브라우저가 어떻게 동작하는지 설명, 이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술, 프로미스(Promise)의 3가지 상태에 대해 설명) # JavaScript 중급 서술형 평가 (자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명, 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명, 브라우저가 어떻게 동작하는지 설명, 이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술, 프로미스(Promise)의 3가지 상태에 대해 설명)## PH2024-08-31 : First posting.## TOC## 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명자바스크립트에서 this 키워드는 실행 컨텍스트에 따라 그 값이 결정되며, 현재 실행중인 함수 또는 메소드의 "소유자"를 가리킵니다.전역 실행 컨텍스트에서 this 는 전역 객체 (브라우저에서는 window, Node.js 에서는 global.. 더보기
마지막이 ```/ 로 끝나면 error 나는거 해결합시다. # 마지막이 ```/ 로 끝나면 error 나는거 해결합시다.어랏 에러가 안나네. 뭐가 바뀐거지? =ㅂ=;;;## PH2024-08-30 : First posting.## TOC## Codes printed```[.scrollable.lang-js]window.m = window.k = {}; // window.m can be asigned another JSON or number/string and so on. But window.k must be kept.(function (m, $, undefined) {m.version0 = "2.12";m.getUTF8Length = function (s) { let len = 0; for (let i = 0; i = 0xd800 && code arr[sort.. 더보기
Regular Expression (정규 표현식), and match/replace method in JavaScript, JAVA, and Python # Regular Expression (정규 표현식), and match/replace method in JavaScript, JAVA, and Python정규 표현식 테스트. replace, match, split 등에 쓰임. 꽤나 유용. 새로운 프로그래밍 언어(?)를 만들때에도 필수적으로 쓰일듯한. JavaScript 말고도 대부분의 언어 (Java, C, C++, LabVIEW, PHP, Perl 등등등) 에서 이런게 다들 비슷하게 구현되어 있음.그런데 비슷하긴한데, 다들 조금씩은 달라서 헷갈리는게 많긴 한듯. 특히 JAVA, Python 이... JavaScript 가 제일 깔끔한듯한 느낌적인 느낌.## PH2024-02-24 : Python 추가.2024-01-07 : Small edit. (?.. 더보기
Super Easy Edit (SEE) of docuK: 사용 설명서 (Manual | Documentation | Tutorial). --> --># Super Easy Edit (SEE) of docuK (MarkDown): 사용 설명서 (Manual | Documentation | Tutorial). 쉽게 문서를 작성합시다. Download the below file, and learn how to write SEE (Super Easy Edit) of docuK from the file texts. Replacing only ... part, write well-formatted extended-MarkDown documents easily. Abstract | Description of docuK and SEE This is an HTML document format named docuK which is rendered.. 더보기
말풍선, inRef 만들기, 만드는 법 in HTML by JavaScript (아랫쪽, 윗쪽, 왼쪽, 오른쪽 말풍선) - 안내서 만들기 # 말풍선, inRef 만들기, 만드는 법 in HTML by JavaScript (아랫쪽, 윗쪽, 왼쪽, 오른쪽 말풍선) - 안내서 만들기다음과 같은 , 아랫쪽 말풍선 만드는 법을 구현해서 SEE (Super Easy Edit) of docuK 를 구현했었는데, 이런 말풍선을 어떻게 만들 수 있는지 정리하고 공유하기 위해 포스팅.## PH2024-08-26 : First posting.## TOC## 말풍선 만들기## RRApure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).Super Easy Edit (SEE) of docuK (MarkDown): 사용 설명서 (Manual | Docume.. 더보기