본문 바로가기

[IT/Programming]/HTML related

인터넷에서 예쁘게 코드 입력하기 (google code prettify) # 인터넷에서 예쁘게 코드 입력하기 (Syntax Highlighter - google code prettify) 뭐 여러가지 js가 있는거 같긴한데 개인적으론 이거 쓰면서 만족하고 있음. Google 직원이 만들었으니 잘 만들었겠지. 뭔가 에러처리 (잘 안생길거 같은 에러들도 이것저것 처리를 해놓은듯) 를 잘해놔서 코드가 복잡하긴한데, 잘 돌아감. 상당히 빠른거 같고. HTML에서 약속된 문법들은 escape해줘야 제대로 표현됨. 예를 들면 { : > }, { & : & } 같은 것들. 'less than', 'greater than', 'ampersand'의 약자일듯. JavaScript - String - replace(RegExp, txt) method 쓰면 편함. 하지만 .. 더보기
Learning AJAX # Learning AJAX AJAX 란 "Asynchronous JavaScript and XML" 의 약자로 비동기적으로 서버에 무언가 요청을 보낼때 쓰인다. 유저가 댓글을 쓴다던지, 새로 업데이트 된 댓글을 불러온다던지 할 때, 새 창을 띄우지 않고도 서버와 데이터를 주고받는 것을 가능하게 해주는 것이다. 자세한 설명은 에 잘 되어 있으니 여길 잘 참고하시길... In general, Ajax does not work across domains. For instance, a webpage loaded from example1.com is unable to make an Ajax request to example2.com as it would violate the same origin policy. .. 더보기
Referer 알아내기 in Server (Vert.x) and Client (HTML/javascript) # Referer 알아내기 in Server (Vert.x) and Client (HTML/javascript) Client (방문객) 이 어느 경로를 통해 들어왔는지, 어느 검색어를 통해 어느 검색엔진을 통해 들어왔는지 등을 알아내려면 어떻게 해야할까? Vert.x 랑 javascript 에서 쓰이는 referer/referrer 철자 (spelling) 가 다르네? ㅡㅂㅡ;;; ## PH 2023-11-04 : Update window.kipid to window.m. 2023-02-27 : First posting. ## TOC ## Referer in Vert.x server 참고 https://vertx.io/. ```[.linenums.lang-java] import io.vertx.core... 더보기
URL | URI parser (URL 의 href, origin, protocol, host, hostname, port, pathname, search, hash 뽑아내기) # URL | URI parser (URL 의 href, origin, protocol, host, hostname, port, pathname, search, hash 뽑아내기) URL | URI 에서 href, origin, protocol, host, hostname, port, pathname, search, hash 을 알아내고 싶을때가 있는데, javascript 단에서 제공하는 function 이 분명 존재할거라 생각해서 스스로 짜보다가 chatGPT 통해서 물어보고 알게 된 것 공유. ## PH 2023-11-04 : First posting. ## TOC ## URL 의 기본구조 ```[.linenums] // The entire URL [href]=[protocol]//[hostname.. 더보기
HTML id 에 한글이나 encodeURIComponent, %, \s, [, ], !, @, #, $, %, ^, &, *, (, ), -, _, +, =, \, /, ?, ~, :, ;, ", ', <, >, ,, . 등 특수문자 (special characters) 들어갈 수 있는지 테스트 해보기 # HTML id 에 한글이나 encodeURIComponent, %, \s, [, ], !, @, #, $, %, ^, &, *, (, ), -, _, +, =, \, /, ?, ~, :, ;, ", ', , ,, . 등 특수문자 (special characters) 들어갈 수 있는지 테스트 해보기 ## PH 2023-10-29 : First posting. (No double enter is allowed in codeprint>script.) ## TOC ## 한글 id test Id which starts with 한글. Id which starts with English+한글 Id which starts with English+한글 Id which starts with English+한글1 Id.. 더보기
Spread syntax ... operator in Javascript # Spread syntax ... operator in Javascript Spread syntax 에 대해 배워봅시다. Java 에서는 String... args 같이 쓰였던건데, Javascript 에도 비슷한 것이 도입 됨. ## PH 2023-10-30 : First posting. ## TOC ## 예제 참고: ```[.linenums.lang-html] ```/ ```[#pre-code-spread.linenums.lang-html] ```/ ## RRA 자바스크립트 최신 문법 (ES6, ES11) | 모르면 후회 하는 최신 문법과 사용법 정리 🐶, by 드림코딩 더보기
Formatting the lyrics to Recoeve.net style (genius.com) # Formatting the lyrics to Recoeve.net style (genius.com) 3줄 이상 띄어진 부분들이 다 2줄로 맞춰지고 You might also like 부분이 삭제되고, 앞쪽에 #lyrics 가 추가 됨. (All unicode whitespace 도 그냥 space 로 치환 됨.) 즉 genius.com 이나 bugs 같은 곳에서 가사를 copy and paste (복사 붙이기 | 복붙) 한 뒤 Formatting 버튼이나 Ctrl+Enter 누르면 됨. ## PH 2023-10-29 : First posting. ## TOC ## Formatting Formatting (Shift+Enter) ## RRA https://genius.com/ https://music... 더보기
Retrieving the title and singer from Spotify # Retrieving the title and singer from Spotify Anti-HeroTaylor Swift Get the title and singer 더보기
Implementing multicursor like sublime text Ctrl+D in HTML javascript textarea # Implementing multicursor like sublime text Ctrl+D in HTML javascript textarea 작성중인 글... 구현하기 쉽진 않은거 같네;;;;; 뭐 급한건 아니니 천천히 시도해 봐야지. 그런데 javascript 에서 multi selection 을 지원해 주긴 하나? 안해주면 짜기 엄청 복잡해질것도 같은데 ㅠㅜ; ## PH 2023-06-27 : First posting. ## TOC ## textarea with id="myTextarea" textarea 에서는 span tag 가 안먹혀서 이걸로는 구현 못할것도 같은데... ## div with contenteditable and id="myDiv" div with contenteditable 에.. 더보기
Javascript (자바스크립트): async 와 await # Javascript (자바스크립트): async 와 await 우선 단어 뜻부터. asynchronous: 동시에 일어나지 않는, 비동시적인, 비동기의. await: 기다리고 있다. 보통 javascript code 는 동시 다발적으로 (synchronous 하게) 실행되는데, 즉 코드가 적힌 순서대로 처리하는게 아니라 HTTP 요청을 보냈다가 숫자들 계산했다가 HTTP 답변이 왔으면 계산하다가 멈추고 HTTP 답변받은걸 처리했다가 문자열 띄우기도 했다가 alert 보냈다가 하는 식으로 말이다. 그렇기에 순서적으로 실행되어야 제대로 동작하는 코드가 있으면, 즉 HTTP 요청 ($.ajax, fetch 등) 후 데이터를 받아서 그 받은 데이터 가지고 화면에 표시해야 하는 작업이 있으면 그냥 javasc.. 더보기
Neighbors points plot plan (svg) # Neighbors points plot plan (svg) 이웃들의 점수들을 similarity weight 줘서 그려주는 법 svg 로 공부하는 중. ## PH 2023-09-09: First posting. ## RRA www.w3schools.com :: SVG Tutorial Google docu - spreadsheet :: Recos and Statistics ## TOC ## Plot Example 각종 numbers 출처: . 100/23=4.347826087 4.347826087*3=13.04347826 4.347826087*21=91.30434783 0 1 2 3 4 5 6 7 8 9 10 52.38 ```[.linenums.lang-html] 0 1 2 3 4 5 6 7 8 9 1.. 더보기
트위터 트윗 퍼오기 (Embedding Twitter Tweet) # 트위터 트윗 퍼오기 (Embedding Twitter Tweet) 트위터 글 (twitter tweet) 을 퍼오는 (embed) 하는 방법이다. 뭐 방법은 간단한데, javascript 가 먹히는 사이트에서만 쓸 수 있을듯. 트위터 웹페이지에 가면 "답글, 리트윗, 관심글 담기" (Reply, Retweeted, Favorite) 옆에 더 보기 (More) 가 있고 이것을 클릭하면 "트윗 담아가기" (Embed tweet) 가 보인다. 그러면 아래와 같은 javascript link 가 들어간 html code 를 준다. 이걸 원하는 곳에 붙여넣으면 "답글, 리트윗, 관심글"도 작동하는 트윗이 퍼가진다. 각종 옵션들도 설정할수 있는듯하니 reference 가서 더 공부해 보시길. ## TOC ## .. 더보기

티스토리툴바