본문 바로가기

분류 전체보기364

jQuery] 텍스트 변경하기 텍스트 변경 text 메소드를 사용한다. 1) hi로 된 텍스트를 bye로 바꾸기 2) 버튼 안 텍스트 변경 텍스트 포함 다른 태그 추가 변경 html 메소드를 사용한다. 2021. 9. 3.
jQuery] elements 선택, css 효과주기, 클라스 추가 삭제 element 선택하기 1 element 하나 선택할 때 2. element 2개 이상 선택할 때 이 것을 제이쿼리로 간편하게 이렇게 한다. 제이쿼리에서 css 스타일 주기 ✔️ css에 인풋 하나인 경우 해당 property의 value를 알려줌 ✔️ css에 인풋이 두개인 경우 첫 번째는 property, 두 번째는 value로 값이 세팅이 됨 $("h1").css("color", "green"); ✔️ 하지만 스타일 변경은 CSS에서 하기 자바스크립트(제이쿼리)에서 css 벨류를 넣어주는 것은 코드가 지저분해 보인다. css 관련 입력 사항은 css에 저장하고 클래스를 만들어서 자바스크립트(제이쿼리)에서는 클래스를 추가 했다 제거했다 하는 것이 좋다. ✔️ 클래스 2개 동시에 만들고 제거하기 ✔️ .. 2021. 9. 3.
파일 minifier 줄바꿈, 띄어쓰기 모두 없애고 텍스트만으로 줄인다. 그러면 저장했을 시 byte 용량이 줄어든다. 자바스크립트, css 파일 미니파이해서 유저의 브라우저에서 로드 될 때 로드 시간이 적게 걸린다. before after 2021. 9. 3.
JQuery 소개, 시작 JQuery (제이퀘어리) 수 천가지의 자바스크립트 가운데 가장 인기 많은 라이브러리이다. Jquery를 만든 John Resig은 너무 긴 자바스크립트 코드를 간단하게 바꾼 사람이다. document.querySelector("h1") = jQuery("h1") = $("h1") 내가 만드는 웹사이트에 jQuery 연결하는 법 1. 모든 jQuery 파일을 다운 받거나 2. 부트스트랩에서 했던 것처럼 jQuery CDN을 연결해준다. 가장 많이 사용되는 google CDN을 쓰도록 하자. 인기많은 구글 CDN을 사용하는 이유는 유저가 내 웹사이트 들어오기 전에 다른 웹사이트에서 구글 jQuery CDN를 연결해 놓았다면 유저의 브라우저에 이미 cashed 되고 저장되어 있다. 내 웹사이트에서 다시 제이.. 2021. 9. 2.
콘솔 단축키 코드 줄바꿔 쓰기 Shift+return / Shift + Enter 콘솔 화면 지우기 Command + K / Control + K 저장된 변수들 모두 지우기 Command + L / Control + L 2021. 9. 1.
자바스크립트 강의 끝. 첫 째 유치원 입학 첫 째 아이가 유치원에 들어갔다. 9월 1일 부터 주 2회 8:30~3시까지 수업을 받는다. 어제는 본격적으로 풀타임 수업 시작하기 전 한 반의 학생들을 나눠서 선생님과 반 친구 5명 정도와 먼저 안면 트는 시간을 가졌다. 집에서 한국어만 쓰기에 영어를 못하는데 씩씩하게 들어가는 아이가 대견했다. 우리만 이민자 가족인 것 같다 한 엄마가 먼저 상냥하게 인사해 주었다. 아이가 잘 적응할 수 있을까? 많은 걱정이 앞서기도 하다. 친구과 다름을 인지할 때 상처 받지 않을까? 영어로 말을 못하는데 친구들과 어울리지 못하면 어쩌지? 수업은 따라 갈 수 있을까? 알파벳과 숫자 20까지는 읽을 수 있는데.. 이 정도면 괜찮을까? 너무 걱정만 앞서는건가? 학교 통지문을 받았다. 학기의 시작이라 아이의 학교 모습을 볼 .. 2021. 9. 1.
JS] 애니메이션 효과 | setTimeout( ) | 버튼 클릭시 효과 버튼을 눌렀을 때 효과를 주려고 한다. CSS 일단 css에 클래스명 하나 정해서 효과를 설정해준다. JavaScript 버튼 클릭시 효과를 주기 위해 함수를 하나 만들었다. 파라미터를 currentKey로 이름 지을 것이고, 이 currentKey는 무슨 키를 눌렀는지를 나타내는 것이다. 무슨 키를 눌렀는지는 위에 있는 함수에서 내용을 받아올 것이다. 1번 buttonAnimation(buttonInnerHTML) 위에 있는 함수는 마우스 클릭시 실행되는 함수인데 이 함수가 실행될 때 buttonAnimation()함수도 같이 실행하게 하였다. 파라미터로 buttonInnerHTML를 받으면 buttonAnimation(currentKey)로 들어가서 실행된다. 2번 buttonAnimation(eve.. 2021. 8. 31.
JS] switch statement | switch, case, break, default switch statement variable의 value에 따라 다른 트랙으로 가는 것 각 버튼에 다른 소리가 나게 하려면 switch statement가 필요하다. if statement를 쓸 수도 있지만 그럼 if, else를 너무 많이 써야하니 switch를 쓴다. 참고) 7개의 드럼 html 코드 switch bare bones 7. 각 버튼의 innerHTML을 뽑아서 buttonInnerHTML에 담았다. 각 letter를 뽑아서 buttonInnerHTML에 담는 것이다. 8. switch (expression) switch on 할 variable을 넣는다. switch(buttonInnerHTML) : 각 letter를 담은 variable에 스위치 온할 것이다. 9,10,11 case.. 2021. 8. 29.
JS] 오브젝트란? / Constructor function 게임에서 호텔을 운영하게 되었다. 직원을 뽑아야 한다. 우선 벨보이를 뽑았다. 벨보이 한 명이 왔다 이름은 Jack이다. 나이는 23세이다. 워크퍼밋이 있다. 언어는 영어, 프랑스어를 한다. 이 벨보이에 관한 정보를 입력해야 한다면 다음과 같이 적을 수 있을 것이다. var bellBoy1Name = "Jack"; var bellBoyAge = 19; var bellBoy1Has WorkPermit = true; var bellBoy1Languages = "French","English"; 호텔이 잘되서 벨보이 2명을 더 뽑았다. 직원 정보를 하나 하나 적어주었다. var bellBoy1Name = "Alex"; var bellBoyAge = 22; var bellBoy1Has WorkPermit = t.. 2021. 8. 28.
자바스크립트 고급 과정 공부중 8/27일 금 Advanced Javascript와 DOM Manipulation을 듣고 있다. 진도는 잘 나가지 않고 있다. 화면 보고 있으면 딴 생각이 나고, 졸립기만 하다. 이럴 때는 보통 드라마 한 편 보고서 현실을 벗어난 후 새 느낌으로 다시 공부를 시작하기도 하지만 지금은 그렇게 놀아도 되나하는 생각에 딱히 공부도 안되고, 놀지도 못하는 상태가 되었다. 2021. 8. 28.
JS] this 여기 드럼 버튼들이 있다. 드럼 버튼 하나를 눌렀을 때 eventlistener가 불러지고 거기에 연결된 함수가 호출되어 소리가 난다. 아래의 경우 드럼 버튼은 여러 개지만, 한 가지 소리에만 연결되어 있는 코드이다. 그럼, 각 드럼 버튼에 각각 다른 소리가 나게 할 수 없을까? 이 때 필요한 것이 this 이다. 이 때 this는 각 버튼의 아이덴티티이다. this를 좀 더 살펴보자 this가 콘솔에 나오게 중간에 있던 코드를 console.log(this); 로 바꿔보았다. 그러면 내가 누른 버튼의 내용이 콘솔에 나온다. 각 버튼의 텍스트만 콘솔에 나오게 하기 this는 클릭한 버튼이라 target이 된다. this 다음에 원하는 내용을 덧붙여준다. 버튼 클릭하면 글자가 흰색으로 바뀌게 하기 그럼 다.. 2021. 8. 27.
JS] 오디오 함수 자주 쓰는 문형 태그 안에서 일어나는 일 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio What this line of code will do behind the scenes is it will actually construct an HTMLAudioElement. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement This HTMLMediaElement that we create has a whole bunch of properties and methods. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaEleme.. 2021. 8. 27.
JS] debugger; 알아보기 크롬 개발자 툴에서 좋은 기능을 가지고 있다. 함수 단계별로 어떤 일이 벌어지는지 알 수있다. 콘솔에서 debugger;를 쓰고 shift + enter를 눌러서 다음 줄로 내리고 함수를 불러본다. 그럼 source 창으로 넘어가서 아래와 같은 내용이 나온다. 새 창 열리면서 자세히 설명 f = function calculater함수 바디에 놓고 또 아래화살표 누른다. 새창이 열리면서 바디 안에는 무슨 일이 일어나는지 설명이 되고 있다. 2021. 8. 26.
JS] 계산기 / higher Order Functions and Passing Functions as Arguments 이 전에 .addEventListener( ) 에서 함수를 인풋으로 사용하는 것을 보았다. 여기서 .addEventListener( ) 같이 다른 함수를 인풋으로 받는 함수를 higher order function이라고 한다. 아래는 클릭이 됐을 때 뭘할 지를 나타내는 코드이다. 여기서 주의 할 점은 인풋으로 들어갔을 때의 함수는 괄호( )를 사용하지 않는다는 것이다. handleClick안에 파라미터가 없다면 괄호를 쓰지 않는다. document.querySelector(".drum").addEventListener("click", handleClick ); ⭕️ document.querySelector(".drum").addEventListener("click", handleClick( )); ❌ 여.. 2021. 8. 26.
JS] anonymous function 익명 함수 anonymous 어나'너머스 function 일반 함수 사용시 함수를 따로 만들고 이름을 불러 실행 시킨다 document.querySelector(".drum").addEventListener("click", handleClick); function handleClick() { alert("I got clicked!"); } 익명 함수 사용시 익명 함수는 함수인데 이름이 없다. 그냥 function() 자체를 써준다. 함수를 따로 떼서 안만들고 실행까지 한 큐에 해결한다. function(){alert("I got clicked!")} 위에 있는 일반 함수 코드를 더 간단하게 이렇게 만들 수 있다. 2021. 8. 25.
JS] .addEventListener( ) .addEventListener( ); .addEvenListener( ) 메소드 자세히 보려면 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener method: action 표현 input 1 : event type 마우스 클릭등 어떤 액션을 취할 때일지를 적어준다 https://developer.mozilla.org/en-US/docs/Web/Events input 2: 보통 js 함수 마우스 클릭 같은 이벤트가 벌어졌을 때 뭘 할지를 적어준다. 2-1 함수를 만들고 이름을 넣기 이벤트리슨너 메소드의 파라미터에서 자바 스크립트 함수를 넣을 때 주의 할 점은 ( ) 를 넣지 않는다는 것이다. document.quer.. 2021. 8. 25.
JS] 드럼 킷 만들기 클릭하거나 해당 키보드 치면 드럼 소리나오게 하기 이미지, 사운드, html, css 는 강의 자료에서 가져옴 html, css는 기본 세팅해주심. 맨아래에 있음. 자바스크립트 편집 각 드럼 클릭시 반응하기 1. 클래스 drum에 해당하는 아이템 중에 querySelector로 첫번째 것만 클릭시 alert가 뜨게 해본다. querySelector를 button 태그보다는 클래스, Id로 하는 것이 좋다. 나중에 다른 곳에 button 태그가 생성되어서 엉뚱한 곳에 선택될 수가 있다. 2. 함수를 따로 만들지 않고 anonymous function으로 코드를 간단하게 해준다. 3. 첫번째 것만이 아닌 7개 전부 클릭시 alert가 뜨게 해본다. loop을 이용하면 편하다. for loop으로 drum 클.. 2021. 8. 25.
JS] 주사위게임 player 1, player 2가 서로 주사위 던져서 숫자 많은 쪽이 이겼다고 멘트 적어주기 index.js 파일을 만들고, html body 맨 마지막에 script를 붙여준다. js에서 랜덤 넘버를 만들어 담는다. 코드가 잘 적었나 확인해보려면 콘솔에서 테스트 해볼 수 있다. 랜덤 숫자가 나왔을 때 이미지 파일명에서 선택되어야 한다. 그 때 그 때 변경해야하므로 html의 기본 틀을 건드리지 않고 js에서 코딩을 한다. 랜덤으로 숫자가 나오면 이미지 소스에 들어가서 랜덤 이미지가 선택된다 이제 image sourrce attributes를 변경해야 한다. 이미지태그 모두를 불러온 후 첫 번째 이미지 태그 소스 변경하기 attributes 셋팅하기 ("변경하고 싶은 attributes 이름", 뭘로 .. 2021. 8. 23.
JS] Manipulating HTML Element Attributes attributes란? 각 태그 이름(h1, input, a..) 안에 하늘색에 해당하는 부분이 attributes이다. 태그 안에 뭐 있나 보기 document.querySelector("a"); 태그 안에 있는 모든 attributes 검색하기 태그 안에 1개의 href가 있다 document.querySelector("a").attributes; href attribute에는 뭐 있나 보기 document.querySelector("a").getAttribute("href"); 구글 클릭했는데 네이버 나오게 하기 href attribute 내용 바꾸기 2021. 8. 22.
JS]자바스크립트로 텍스트 조종하기 innerHTML vs textContent Text Manipulation and the Text Content Property html안에 있는 text를 변경하는 것은 innerHTML과 textContent가 있다. 둘의 차이점 innerHTML: 그 안에 있는 태그까지 같이 나온다. h1에 내용 추가 할 때도 태그까지 입력할 수 있다. textContent: 딱 텍스트만 빼온다 2021. 8. 22.
JS] 클래스 추가, 삭제, 토글/Structure, Style, Behaviour Structure : HTML Style : CSS Behaviour : Javascript 클래스 추가 .add( ) 1. 버튼 element에 클래스 추가하기 button element에 클라스 리스트로 invisible이라는 클라스 추가한다. 2. 추가된 invisible 클래스에 효과넣기 클래스 삭제 .remove( ) 3. 클래스 삭제하기 클래스 토글 .toggle( ) 토글 계속 복붙하면 버튼 생겼다 없어졌다함 이 방법으로 하면 디버깅하기가 매우 쉬어진다. 기본으로 정해 놓은 스타일을 변경하고 싶으면 stylesheet로 가서 고치고 behaving을 변경하고 싶으면 자바스크립트로 가서 고치면 된다. 2021. 8. 22.

티스토리툴바