javascript 썸네일형 리스트형 [JS / javascript] javascript CRUD란 무엇인가? 혼자서 아주작은 프로젝트를 만들어 보고 있는 나에게 CRUD라는 중요한 것이 다가왔다 CRUD가 무엇이냐면 C = create(생성) R = read(읽기) U = update(수정, 갱신) D = delete(삭제) 이 약자들을 합쳐 놓은 소프트웨어 용어라고 보면 됨 프로젝트를 하게 되면 JS로 처음에 이 규칙을 따라 만들어보고 한 싸이클을 돌려보는게 좋다 예를 들어 가장 처음, 그리고 많이 만들어 보게 되는 TO DO LIST도 이 CRUD형태를 가지고 만드는것 더보기 [JS / javascript] javascript로 animate 애니메이션 주는법 ! 잘 사용하는 방법은 아니지만 알아두면 간단하게 애니메이션을 줄 수 있기에 봐봄 animate 명령어를 사용하면 됨 hello JS!! 간단하기에 설명할 게 없지만 1. 제이쿼리 이벤트리스너 #헬로에 발생 2. animate 사용 marginTop 100px 뒤에 1000은 1s 1초라는 얘기 주의 JS는 -(대쉬)로 표현할 수 없기에 camelCase 사용 권장 결과 더보기 [JS / javascript] javascript array(어레이) 배열 Array 문법을 아주아주 간단하게 어떻게 사용할 수 있는지 보죠 javascript에서 array는 여러가지를 담을 수 있는 상자라고 생각하면 됨 상자에서 내가 원하는 물건을 꺼내와서 쓸 수 가 있음 array(배열)을 사용하려면 변수안에 집어넣어야 함 script 어레이상자 라는 변수를 만들었고 그 안에 꼬북 칩, 포카칩을 넣었음 참고로 array를 만들때는 [ ] 괄호를 사용하면 됨 console.log(어레이상자); 콘솔. 로그(어레이 상자); 를 찍어보면 0은 꼬북칩 1은 포카칩 문자열로 잘 들어와 있는 걸 확인할 수 있음 여기까지는 다들 문법 강의에서 알려줌 그리고 다음 오브젝트 같은 걸로 넘어감 이걸 어떻게 사용하는지 알려주지 않음 아주아주 대충 이걸 어떻게 사용하냐면 과자는 역시 맛동산 이.. 더보기 [JS / javascript] togle menu 토글 메뉴의 종류 / navbar의 활용 흔히 navbar(메뉴바)를 만들 때 코드 몇 줄만으로 애니메이션 효과를 줄 수가 있숨 연습용 html togle 연습이다잇! 메뉴 An item A second item A third item A fourth item And a fifth one 이렇게 html을 만들어 놈 참고로 list 부분은 Bootstrap이라는 라이브러리를 사용했다 css를 간편하게 해 주고 간단한 기능까지 넣어주는 최고 킹왕짱! https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mob.. 더보기 [JS/javascript] addEventListener 애드이벤트리스너 ! 자바스크립트의 onclick방식 알고 있습니까? 예를 들어 alert이다잇! 이렇게 onclick 버튼()을 function 버튼으로 만들어 alert창을 띄웠죠 onclick은 버튼을 누르면~~ 이런 뜻이 됩니다 onclick 말고도 있지만 요즘 이런방식에서 addEventListener방식을 많이 사용한다고 하죠 사용방법부터 알아보죠 문법 이렇게 생겼숨다 대충 아시겠죠 addEventListener() 괄호 안에 click클릭을 function란 기능을 넣어서 { 어디에 실행할 건지 코드를 적어주면 되는것입죠 } 해볼까요? 간편합니다 굳이 onclick을 html태그에 붙이고 그걸 다시 자바스크립트로 짤 필요 없이 자바스크립트 안에 다 해결이 가능한것입죠 당연히 jQuery 문법으로 변경도 가능하겠죠.. 더보기 [JS / javascript] function함수 parameter(파라미터) 인자 이전 글 function 함수와 jquery를 이용해 hello!!! 예쁜 버튼 만들어 보았죠 function 이름() 여기에 있는 function 이름(parameter) 여기로 파라미터 또는 인자라고 해요 파라미터 안에 원하는 이름을 정해 줍니다 function 이름(str) { $('#test').text(str); } 저는 str 이라고 파라미터를 정해 주었어요 그러면 이름() 여기 안에 아무거나 들어갈 수 있어요 예를 들어 이러면 이름 하고 문자열을 넣으면 str이 text(str)에 들어가면서 이렇게 나오죠 이걸 button과 같이 사용해 보죠 hello!!! 예쁜 버튼 이렇게 이름() 안에 문자열 '여기는 아무거나 다들어가!'를 넣어봤어요 그리고 버튼을 클릭하게 되면 잘 받아 입력 되네요 대.. 더보기 [JS / javascript] jquery(제이쿼리) !! 전편 javascript에서 document.getElementById('test').innerHTML = '한번만 바꿔라 쪽팔리게잇!' 이렇게 자바스크립트를 구성하면 된다고 했다 document는 문서 getElementById는 아이디를 가지고 있는 놈을 찾아줘~ . innerHTML은 HTML을 변경해줘~ 라고 했는데 너무 길다 이걸 짧게 줄일 수 있는 게 jQuery다 jQuery를 잘 쓰면 긴 코드를 축약할 수 있습니다 사용하기 전 jQuery는 html에 import 시켜야 사용할 수 있죠 이걸 복사해서 HTML의 head든 body든 붙여넣으면 된다 CDN이라고 하는데 사용 법이니 자세한 건 묻지 마요 https://releases.jquery.com/ jQuery CDN The integr.. 더보기 [JS] javascript의 시작! 그동안 CSS로 어렵사리 만들어본 작동기능들 이제는 js로 쉽게 해보자 HTML hello JS! 이것을 자바스크립트 문법을 통해 바꿔보겠다 먼저 자바스크립의 기능을 구현하려면 h3에 id를 줘야한다 hello JS! 한글도 가능! 그리고 document 문서 getElementById('아무거나이름') 찾은 아이디 innerHTML 이기능으로 '헬로제이에스' 바꿔줘 hello JS! h3에 id가 '아무거나이름' 이니까 h3를 바꿔줘 여기서 innerHTML은 안에있는HTML을 바꿔 뭐로 '헬로제이에스!'로 참고 - 코딩애플 MDN - javascript MDN에서는 개발자가 되기위한 자바스크립트 코스같은것도 마련해 놓은거 같은데 유료강의나 다른걸 사기전 맛보기로 봐도 좋을거 같아요 이어서 >>> 더보기 이전 1 2 다음
