'JavaScript' 태그의 글 목록 (2 Page)

강해져서 돌아온 ChatGPT에게 코딩을 시켜보자 (번외편) Coding/Python

barcode

강해져서 돌아온 ChatGPT에게 코딩을 시켜보자 (번외편) Coding/Python 아니 나 급 생각난건데 얘가 코딩한걸 보니까 변수명이 my_list 막 이렇더라고... 그래서 궁금해졌음. 과연 변수명을 지정해서 코딩할 수 있는가? 또 서버오류가 반기는거 아니냐 일단 걍 리스트를 만들어보자. 전에는 my_list였는데? 아무튼 그럼 변수명을 내가 지정해주자. 변수명은 one_to_ten으로 할거다. 사실 여기에는 숨겨진 주문이 하나 더 있는데... 다들 알겠지만, 언어가 파이썬이 아니라 자바스크립트다. 리스트 이름을 지정한 변수명으로 하는 것도 무난하게 된다. 그런데... 자바스크립트 출력 방식이 console.log만 있는 게 아니란말이지... alert로 띄우게 할 건데, alert라고 직접적으로는 얘기를 안 할거다. 사실 이거 말고 HTML 요소의 내용을 바꾸는 방법도 있긴 함...

자바스크립트에도 정규식이 있다고??? Coding/JavaScript

barcode

자바스크립트에도 정규식이 있다고??? Coding/JavaScript https://koreanraichu.tistory.com/118 정규식(Regular Expression)-기호와 메타문자 문자 찾는 것 자체는 find()도 해주는데, 얘는 딱 정확하게 일치하는 문자열만 찾아준다. 그럼 정규식은? 그건 대충 와일드카드같은 거다. 그러니까 find()는 소라빵 찐빵 팥빵 붕 koreanraichu.tistory.com 여기서 정규식이 대충 와일드카드 같은거고(글은 분량상 두개로 나눴음) 파이썬에서는 re모듈을 쓴다고 했는데, 사실 파이썬 뿐 아니라 자바스크립트에서도 정규식을 쓸 수 있다. 정규표현식, 그러니까 정규식은 파이썬만의 전유물이 아니기때문에 다른 언어에서도 사용하는 방법이 다를 뿐이지 일단 쓸 수는 있다. 정규식에 대해 설명하면서 대충 '와일드카드 같은 것'이..

for, for in, for of, forEach Coding/JavaScript

barcode

for, for in, for of, forEach Coding/JavaScript Python에는 for와 while이라는 반복문이 있고, 이 둘은 범위냐 조건이냐의 차이만 빼면 반복문이라는 기본 골자는 같은데, 이런 게 자바스크립트에도 당연히 있다. 라디오버튼 뺑뺑이 돌면서 얘가 뭘 체크했나 보는 것도 반복문의 일이기 때문. 그런데 이 반복문... Python처럼 심플하지 않아요... for, for in, for of See the Pen for, for in, for of by koreanraichu (@koreanraichu) on CodePen. 얘네들은 Pyhlogenic tree로 치자면 그 트리가 막 갈라지는 와중에도 진화적으로 매우 유사한 homolog이기 때문에 또이또이 쌤쌤임을 인정받은 애들... 맞는 비유인지는 모르겠지만, 자매나 형제같은 느낌이다. 그래서 형식 ..

매우 간단한 스크롤 이벤트를 해보자 Coding/JavaScript

barcode

매우 간단한 스크롤 이벤트를 해보자 Coding/JavaScript addEventListener에 대해 설명하면서 스크롤 이벤트도 '있다'고 했는데, 이건 말 그대로 마우스를 스크롤했을 때 일어나는 이벤트이다. 그게 다다. Reference https://velog.io/@dunde/Javascript-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%B2%A4%ED%8A%B8 Javascript 스크롤 이벤트 web에서 발생하는 스크롤 이벤트를 이용해 다루는 방법을 써보았습니다. velog.io https://velog.io/@dunde/Javascript-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%B2%A4%ED%8A%B8 Javascript 스크롤 이벤트 web에서 발생하는 스크롤 이벤트를 이용해 다루는 방법을..

DOM 선택하는 방법 (부제: 너로 정했다?) Coding/JavaScript

barcode

DOM 선택하는 방법 (부제: 너로 정했다?) Coding/JavaScript DOM은 Document Object Model의 약어로, XML이나 HTML에 접근하기 위한 일종의 인터페이스이다. 자바스크립트는 프론트엔드에서 많이 사용하는 언어의 특성인지는 모르겠지만 아무튼 이 DOM들을 지지고 볶는 게 가능하다. 이벤트 추가는 기본이고 생성 삭제 CSS 클래스 부여까지 다 된다. 남자친구 못 만드는 것만 빼면 만능... 어차피 여욱이도 못 구함 질량이 0이라 document.querySelector() 얘는 같이 다니는(?) 친구가 하나 있는데 바로 querySelectorAll()이다. 그럼 같은 역할인가요? 기본적으로는 그렇다. 기본적으로는 그런데 친구인 쿼리셀렉터올은 해당하는 요소를 죄다 가져온다. 예를 들어서 어떤 문서에 p태그가 6개 있다 그러면 쿼리셀렉터는 맨 위에꺼 ..

addEventListener()로 고급진 이벤트 추가하기 Coding/JavaScript

barcode

addEventListener()로 고급진 이벤트 추가하기 Coding/JavaScript 근데 생각해보니까 이거 전에 픽하는게 먼저 와야 하지 않나... 뭐 아무튼. 뭔가 기깔나는 것을 구현하기 위해 이 블로그 혹은 다른 블로그를 보다 보면 그런 게 있다. 어? HTML에서 온클릭도 안 줬는데 작동하네? 어? 이거 더블클릭 하니까 작동하네? 어? 스크롤 내리니까 작동하네? 를 알아보자. 굳이 버튼에 온클릭을 안 줘도 작동하는 비결이 바로 addEventListener()이다. getElementByID나 querySelector같은 걸로 DOM(쉽게 말하자면 문서의 어떤 요소)을 가져와서 addEventListener()로 이벤트를 추가할 수 있다. 이 추가라는 게 단순히 알림이나 콘솔 이런걸 떠나서 뭐 모달 소환 곱하기 이런 함수까지 된다. See the Pen Eventlistner by..

다크모드 간단하게 토글로 구현해보기 Coding/JavaScript

barcode

다크모드 간단하게 토글로 구현해보기 Coding/JavaScript 근데 말이 간단이지 헐 나 이것도 못해 개발자 하면 안되나봐 ㅠㅠ 이럴 정도는 아닙니다… Reference https://blogpack.tistory.com/1117 다크모드 토글 기능 구현과 다크모드 토글 디자인 구현 웹페이지, 또는 사이트에 적용하는 다크 모드는 구현하는 방법이 여러 가지 있습니다. CSS 속성을 기준으로 구분하면 사용된 배경색과 전경(글자) 색들을 바꾸기만 하는 간단한 구현이기 때문에 blogpack.tistory.com https://www.w3schools.com/howto/howto_css_switch.asp How To Create a Toggle Switch W3Schools offers free online tutorials, references and exercises..

나홀로메모장 파생형 만들기-Call of AJAX Coding/JavaScript

barcode

나홀로메모장 파생형 만들기-Call of AJAX Coding/JavaScript 원래 페이지네이션이랑 수정/삭제도 구현하려고 했는데 못함... 페이지네이션은 전에 했던 게 오브젝트를 동적으로 생성하는건데 여기서는 DB에 있는 걸 받아와서 진행해야 하는거라 버튼 렌더링/로직에서 막혔고 수정/삭제는 이따 보시면 아시겠지만 저기서 뭐가 뭔지를 구분할 수단이 없습니다. 아, 사람은 구별할 수 있지. 컴퓨터가 못해요. 인간적으로 달력 위에 시계 마렵잖아요 Reference https://stickode.tistory.com/124 [JavaScript] 디지털 시계 만들기 자바스크립트을 활용하여 디지털 시계를 만들어보겠습니다. 먼저, 스틱코드에 올라온 '디지털 시계 만들기' 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코 stickode.tistor..

삼항연산자 Coding/JavaScript

barcode

삼항연산자 Coding/JavaScript 내 최근에 달력 코드를 올렸는데 거기서 보면 dates.forEach((date, i) => { const condition = i >= firstDate && i < lastDate + 1 ? 'this' : 'other'; dates[i] = `${date}`; }) 이놈이 있다. 어디서 나오냐면 이전달/다음달 날짜 구별할 때 나온다. 근데 이게 뭔 람다식인가 했더니 그건 아니고 삼항연산자래요... 그럼 이게 뭔지 한번 알아보자. 얘는 연산자는 연산자인데 항이 세 개이다. 엥? 그게 왜요? 항이 세개일수도 있잖음! 자 생각해봅시다. 우리 더하기 하나에 숫자 몇개 들어감? 두개 들어가죠? 곱하기는? 곱하기도 두개지? 제곱은? 제곱도 두개다. 나누기는? 피제수 제수 두개다. 루트는? 두개다. 예? 루트가..

나홀로 메모장 파생형 만들기-구성 및 사이드바 달력 Coding/JavaScript

barcode

나홀로 메모장 파생형 만들기-구성 및 사이드바 달력 Coding/JavaScript Reference https://bigtop.tistory.com/63 [JavaScript] 일반적인 달력 만들기 - HTML 뼈대 잡기 만학도 첫 번째 프로젝트였던 간단한 달력 만들기에 이어서 두 번째는, 하루만 나타내는 달력이 아니라 우리가 일반적으로 생각하는 Full Calendar를 만들어 볼까 합니다. 이번에도 지금까지 정리 bigtop.tistory.com https://opentutorials.org/course/1375/6761 addEventListener() - 생활코딩 addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다. var t = document.getElementById('target'); t..

마우스를 따라다니는 무언가 만들기 Coding/JavaScript

barcode

마우스를 따라다니는 무언가 만들기 Coding/JavaScript 참고로 이 블로그에도 적용해뒀다. 여러분의 마우스 커서를 따라다니는 Thinking Face가 그것. 워드프레스는 HTML이나 JS는 건드릴 수 없어서 적용 못했고 네이버나 미디움은 HTML쪽 편집이 안돼서 적용 못했음. Reference https://stickode.tistory.com/318 [JavaScript] 마우스를 따라다니는 원 만들기 이번시간에는 [JavaScript] 를 사용해 마우스를 따라다니는 원을 만들어보겠습니다. 스틱코드를 즐겨찾기해주세요. https://stickode.com/detail.html?no=2671 스틱코드 stickode.com Html안에 javascript와 css.. stickode.tistory.com https://codepen.io/falldowngob..

페이지네이션 Coding/JavaScript

barcode

페이지네이션 Coding/JavaScript 매우 고급져보이는 이 단어의 뜻은 정말 생각지도 못하게 심플하고, 여러분은 이미 이걸 몇 번 봤다. 이런거 다들 한번씩 봤잖음. 블로그건 검색이건... 이게 페이지네이션이다. 저게 코딩관련 글을 11페이지로 옮겼는데(다 옮겼음) 분량이 어마무시하다 그죠...? 아무튼, 페이지네이션은 이런 식으로 한 페이지에 정해진 양의 콘텐츠를 보여준다. 반대되는 개념인 무한 스크롤은 끝이 보일때까지 아래로 아래로 내리는 것. 무한 스크롤은 보통 모바일 앱에서 많이 사용하는 방식인데, 인별이나 미디움도 무한 스크롤이다. 아래로 스크롤하면서 콘텐츠를 계속 볼 수 있어서 굳이 페이지 이동하고 로딩하는 걸 기다리지 않아도 된다. 하지만 콘텐츠가 많아지면 로딩하는 데 시간이 걸리기도 하고(...), 읽다 보면 스크롤바는 줄어드..

RE with FLASK-시퀀스 정보 Coding/Python

barcode

RE with FLASK-시퀀스 정보 Coding/Python FASTA, Genbank파일을 처리할때와 달리 ipynb일때부터 직접 입력하는 시퀀스 정보는 수기로 같이 받았다. 추가가 늦었을 뿐이지... 입력란 만들면서 제일 고생했던 건 CSS였음... 망할 그리드... ㅡㅡ 아무튼. 추가한 순서는 1. HTML 2. CSS(여기서 좀 고생함) 3. JS 4. app.py JS나 Python파일은 크게 수정할 건 없고 Ajax로 주고받는 것만 추가하면 된다. checked_finder.forEach(function (i) { if (checked_finder[0].checked == true) { textarea[2].disabled = false; sequence_name.disabled = false; sequence_desc.disabled = false s..

RE with FLASK-Cutter/Finder Coding/Python

barcode

RE with FLASK-Cutter/Finder Coding/Python 파일 관련 기능이 다 빠졌습니다. 아니 쓰는게 노가다여 아주. 둘 다 이식 하긴 했는데 다른데서 개고생함… ㅋㅋㅋㅋㅋ 그래요 개고생이 끼어야 코딩이지… 한번에 되면 그게 이상한거지… Cutter 그... 왜 Searcher에서 라디오버튼 선택하면 값 전송하는 건 다들 아실거고... 이걸 Cutter에도 적용해야 한다. 물론 Finder에도 적용할거다. 이게 왜 필요하냐면 입력 수단이 라디오버튼이기 때문. 그리고 라디오버튼에 각각 딸려오는 요소가 있어서, 연결된 라디오버튼이 선택되지 않았을 때 비활성화도 시켜줘야 한다. 이거 근데 Finder 가면서 소스 갈아엎음. ㅇㅇ function activate() { const checked_input = document.querySelectorAll('#typi..

RE with FLASK-Searcher 이식하기 Coding/Python

barcode

RE with FLASK-Searcher 이식하기 Coding/Python 들어가기 전에 중요한 게 하나 있다. Cutter와 Finder도 내일 이식하긴 할건데, 내일 이식하는 부분에서 FASTA/Genbank 파일 올리는거랑 결과 저장 기능은 빠진다. 그래서 원본 코드에 있던 with 어쩌고를 일단 작성 없이 서버로 보내서 텍스트 에리어에서 출력하는 걸 일차적으로 진행하고 저장-업로드 순으로 할 예정. FASTA/Genbank는 JS로 파일 받아서 파이썬으로 넘겨서 열 생각인데 그거 관련해서 로직 처리가 좀 필요하고(뼈대를 보면 라디오 버튼이다) 반대로 텍스트 파일은 파이썬에서 만들어서 JS로 넘길 생각이다. 텍스트 파일은 만들어준 거 받아서 버튼 누르면 다운로드 되게 하면 끝임. 대공사 전에... 일단 공사 전인 Searcher의 뼈대를 보자. 원래 코드에서 입력으로 받던..

티스토리툴바