JavaScript
1.JavaScript - 자바스크립트의 근본
JS에 대해 아직 배운건 없지만 해석해보기document -> 문서마침표 -> ~의getElementById('어쩌구') -> 아이디가 '어쩌구' 인 html요소 (일명 element) 를 찾으쇼innerHTML -> 딱 봐도 내부 HTML 이라는 뜻= -> 등호는 프
2.JavaScript-동적 UI 만드는 스텝 (Alert 박스 만들기)
1\. HTML CSS로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨긴다2\. 버튼을 누르거나 할 경우 UI를 보여주는 자바스크립트 코드를 짠다X누르면 창이 사라지고 띄우기 버튼을 누르면 창이 나오게 하기HTMLCSS다시 보여주고싶으면 display: block 을
3.JavaScript - function문법 사용법
function (일명 함수) 라는 문법함수는 길고 더러운 코드를 한 단어로 축약하고 싶을 때 쓰는 문법특정 기능을 다음에도 쓰기 위해 모듈화 해놓은 문법이다function 키워드 작성 후 소괄호, 중괄호 붙이기소괄호 왼쪽에 작명하기긴 코드를 중괄호 안에 담기이제 자유
4.JavaScript - function의 파라미터 문법
여기 적혀있는 "구멍 = 파라미터" 라고 한다구멍 뚫는 이유\-> 함수를 업그레이드해서 사용 가능하기 때문!문법만 외우고 땡 하면 ❌❌전 시간에는 알림창열기() 알림창닫기() 두 개의 함수를 만들어 썼지만지금은 알림창열기(구멍) 하나면 다 해결 가능\-> 비슷한 함수
5.JavaScript - 이벤트리스너
어떤 html 요소를 찾고 변경할 때 id로 찾았지만class로도 찾기 가능class 명이 title1인걸 찾으세요~ 라고 명령하기첫번째 <p> 태그 내용이 안녕으로 바뀐다getElementsByClassName('클래스명')순서순서 넣는 이유는 ? ?getEle
6.JS - 서브메뉴 만들어보기, classList 다루기
이거 만들기https://velog.io/@x5foddl/HTMLCSS-중급-Bootstrap-설치와-사용법bootstrap을 설치했다면그 사이트에서 원하는 웹 UI를 검색하여 복붙하기!상단바 제작 끝!미리 html css로 디자인 해놓고 숨기든가 하기버튼누르
7.JS - jQuery 사용법과 모달창 만들기
구글에 jQuery cdn 검색하면 나오는 사이트에서jQuery 3.x버전 <script> 태그를 찾아서 html 파일에 넣어주기이제 jQuery 설치한 곳 하단에서 jQuery 문법 사용하기따라서 여기서는 <head>태그 안에 넣음코드 양이 절반으로 줄어든
8.JS - 폼 만들며 배우는 if else
<form> 과 기능을 만들면서 if else 문법 배워보기\-> 모달창 안에 폼 만들기예쁘게 보이기 위해 닫기 버튼도 폼 안으로 옮겨줍니다success.html 파일에는 전송완료 라는 내용으로 채우기지금 전송버튼을 누르면?폼 전송이 되며 success.html
9.JS - 공백검사 숙제와 else if 문법
나중에 배울것이지만이벤트리스너 콜백함수에 e라는 파라미터를 추가해주고 e.preventDefault() 라고 적으면 폼 전송이 안된다if문 뒤에 몇번이고 원하는만큼 붙일 수 있다조건식을 연달아 쓰고싶을 때 사용하기else if 뜻은 "그게 아니면 만약에" 라는 뜻조건식
10.JS - input, change 이벤트 / and, or 연산자
\-> <input> 에 입력된 값이 변경될 때 input 이벤트가 발생한다.<input> 에 뭘 입력하면 그때마다 콘솔창에 안녕이라고 출력\-> <input> 에 입력된 값이 변경된 후 커서를 다른 곳에 찍으면 change 이벤트가 발생한다.== 느슨
11.JS - if/else, function 실력향상 과제
어떤 숫자를 함수 안에 넣으면 박수를 쳐야할지 말아야할지 판단하는 함수 만들기실행결과 예시 :삼육구게임(6); 실행하면 3의 배수니까 콘솔창에 '박수'라는 글자가 떠야합니다.삼육구게임(12); 실행하면 3의 배수니까 콘솔창에 '박수'라는 글자가 떠야합니다.삼육구게임(1
12.JS - 변수문법과 Dark mod 버튼 만들기
요런거 만들어보자버튼 하나 만들고버튼을 1회 누르면 안의 글씨가 Light로2회 누르면 다시 Dark3회 누르면 다시 Light 4회 누르면 다시 Dark ...이런 기능 만들자자료를 잠깐 저장하고싶으면 변수문법을 사용하면 된다var 변수명 = 넣을 값;"변수는 왜 쓰
13.JS - 변수 심화학습
\-선언만 따로, 할당만 따로 가능\-이미 있는 변수를 재선언 가능\-이미 들어있는 값을 등호로 재할당 가능변수는 사용 가능한 범위가 있다함수 안에서 변수를 만들었을 경우, 함수 안에서만 사용 가능!!반대로 함수 바깥에서 만든 변수는 함수 안에서 사용 가능!!let 의
14.JS - 변수, 사칙연산 실력향상 과
내 나이와 출신지역 JS 변수에 저장하기나이는 맨날 변하니까 재할당 가능한 변수로,출신지역은 바뀌지 않으니 재할당불가능한 변수에 저장콘솔창에 무엇이 출력될까용\-> kim 0첫 예금액이 5만원 미만이면 이율이 연 15%첫 예금액이 5만원 이상이면 이율이 연 20%(1)
15.JS - setTimeout 타이머주는 법
x 초 후에 코드를 실행시간의 단위는 ms (1s = 1000분의 1초)\-> 1초 후 콘솔창에 '안녕' 이라고 뜸X초마다 코드를 실행하고싶으면 setTimeout()을 연달아 여러 개 쓰거나 setInterval쓰기\-> 1초마다 콘솔창에 '안녕' 이라고 뜸var l
16.JS - 정규식으로 이메일형식 검증해보기
아무 문자 뒤에 .includes() 붙이면문자에 찾을 단어가 있는지 검사해주고 있으면 ture 없으면 false 남겨줌하지만 한글 or 영어가 들어있는지, A로 끝나는지, A로 시작하는지, 마침표 다음에 영어가 있는지 등등 이런건 include()만으로 검사하기 힘들
17.JS - 캐러셀 (이미지 슬라이드) 만들기
애니메이션 시작 전 화면 만들기애니메이션 종료 후 화면 만들기언제 종료화면으로 변할지 JS 코드 짜기transition 추가하기html과 css로 만들어보기\-> 사진이 슬라이드되서 보이려면 사진을 가로로 길게 배치해야한다나중에 이미지 전체를 왼쪽으로 이동시키면 되기
18.JS - 캐러셀(이미지슬라이드) 만들기2
항상 한글로 먼저 설명하기1\. 다음 버튼 누르면 지금 보이는 사진이 1이면 2번 사진 보여주세요~2\. 다음 버튼 누르면 지금 보이는 사진이 1이면 3번 사진 보여주세요~지금 보이는 사진이 1인지 2인지 판단하는 방법은 ?? 포스트잇에 기록한다 생각하기이 때 포스트잇
19.JS - 함수의 return 문법 & 소수점 다루기
함수의 function 문법은?\-긴 코드 짧게 축약해서 쓰기 가능\-파라미터로 기능업그레이드 가능\-return 사용시 원하는 값을 그 자리에 퉤! 뱉기 가능함수 안에서 return 이라는 문법을 사용할 수 있는데return 오른쪽에 아무거나 적으면 함수가 실행되고
20.JS - 스크롤이벤트로 만드는 재밌는 기능들
문제1. 스크롤바 100px 내리면 로고 폰트 사이즈 작게 만들기 상단메뉴 고정 후 로고 폰트사이즈를 키운 채로 시작하기 스크롤바를 100px정도 내리면 폰트사이즈를 줄이기 -> 스크롤바를 얼마나 내렸는지 알아야한다 스크롤 이벤트리스너 -> window 에서 스크
21.JS - 스크롤이벤트 숙제 & 페이지 스크롤 응용
바닥에서 ~5px 위치에 스크롤 바가 있을 때 alert를 띄워준다scroll 이벤트리스너 안의 코드는 1초에 60번 이상 실행된다\-> 너무 많이 쓰면 안댐여러번 실행될 수 있어서 바닥체크를 여러번 중복으로 해줘야한다html태그의 길이를 구하면 된다html에 붙이는
22.JS - 탭기능 만들며 배우는 for 반복문
tab이란?요런거에용~버튼3개, div박스 3개 만들고 버튼 누르면 거기에 맞는 div박스 보여주기orange 클래스명을 추가하면 버튼을 누른듯한 효과show 클래스명을 추가하면 박스를 보여줄 수 있다버튼 3개를 어떻게 해결하지?ㅁ? 이렇게 생각하면 안되고가장 간단하고
23.JS - 탭기능 만들며 배우는 for 반복문2
좋은 관습 : 반복적인 셀렉터는 변수에 넣어서 쓰기 셀렉터 문법은 기본적으로 작동시간이 오래 걸리기 때문에 반복되면 변수에 집어넣기! 코드를 복붙하고싶으면 for 반복문 탭기능을 보면 비슷한 코드 덩어리 6줄이 3번 반복 비슷한 코드를 발견하면 for 반복문으로 쉽
24.JS - 이벤트버블링과 이벤트관련 함수들
모달창의 검은 배경을 누르면 모달창이 닫히는 기능을 추가해보아요모달창을 오픈할 때 show-modal 클래스 명을 넣어서 오픈했기 때문에이렇게 짜주면 검은 배경을 눌렀을 때 모달창이 잘 닫힌다근데! 검은배경 뿐만 아니라 흰 배경이나 input, 글자 등 어떤걸 눌러도
25.JS - Array 와 Object 자료형
여러가지 자료를 한 곳에 저장하고 싶을때 사용하는 자료형대괄호를 열고 자료를 콤마로 구분해서 집어넣기(엑셀처럼 저장 가능)\-> 50000 출력array 자료에서 데이터를 뽑을 때 대괄호를 뒤에 붙인 후 x 라고 쓴다\-> x번째 자료 출력해주세요 (참고: array
26.JS - 약간 복잡한 Array & Object 데이터바인딩
조금 바뀐 car2가 가능한 이유는 object 안에 array/object를 넣을 수 있기 때문이다!array 안에 array/object 넣어도 상관 없다Q. car2에 있는 50000 이라는 데이터를 뽑아서 html 가격표시 부분에 꽂아넣어보기\-> 처음엔 자료
27.JS - 데이터바인딩숙제 & 문자중간에 변수 넣기
JS에서는 덧셈기호를 사용하면 문자이어붙이기가 쉽게 가능하다!숫자 + 숫자 -> 숫자덧셈문자 + 숫자 -> 적어도 1개가 문자면 문자덧셈문자 덧셈이란 ? 문자 2개를 이어붙여줌기호 뿐만 아니라 물결기호 밑에있는 백틱기호로도 사용 가능문자 안에 변수를 넣어주는 간단한 문
28.JS - Select input 다루기
<select>은 사용자가 고를 수 있는 선택지를 드랍다운 메뉴로 제공하는 <input> 이다선택지는 <option>으로 넣으면 된다\-<select> 태그도 선택 시 input, change 이벤트가 발생한다input, change 이벤트 기록은
29.JS - Select2:자바스크립트로 html 생성하는법
지난번에 짠 코드는 확장성이 부족하다셔츠 사이즈를 95, 100 이라고 하드코딩해놓고 보여주기만 하기 때문!실제 쇼핑몰이라면 셔츠 사이즈가 매일매일 바뀔 것인데 이럴 경우 서버에서 보낸 데이터 갯수에 맞게 <option> 태그를 생성해주는 것이 좋다\-> div
30.JS - Select3 : forEach, for in 반복문
서버에서 바지 사이즈 데이터를 가져와 그 갯수만큼 ``생성배보기 맨 위에 pants 라는 변수를 만들고 서버에서 보낸 데이터라고 가정하기 **pants 데이터 갯수만큼 ``을 생성하고 싶을 땐? 반복문 사용하기!** -> pants.length만큼 반복해달라고 하면 되지만 더 쉬운 반복문이 있다 forEach 반복문 array 자료 뒤에 붙일 수 있...
31.JS - Ajax 1:개념정리
데이터 달라고 하면 데이터 보내주는 프로그램그냥 데이터를 달라고 하면 안준다!GET요청 : 서버에 있던 데이터를 읽고싶을 때 주로 사용POST : 서버로 데이터를 보내고 싶을 때 사용 (서버는 유저데이터를 DB에 저장해주는 역할도 한다)GET 요청을 날리는 가장 쉬운
32.JS - Ajax 2:상품 더보기 버튼 만들기
버튼 만들기console.log 로 데이터 잘 가져왔는지 먼저 확인해보기이전 강의에서 만든 카드레이아웃을 활용해보자!.done() 안에 카드 3개를 추가해달라고 요청하기카드 레이아웃을 만들고 이걸 append 하는 코드를 3번 반복했더니 카드 3개 등장!1\. 더보기버
33.JS - sort, map, filter 함수
상품 가격순 정렬버튼과 기능 만들어보기!1\. products라는 변수 안에 있던걸 가격순으로 정렬하고2\. 클릭 시 카드를 싹 지운 후 products 변수에 있던 순서대로 카드를 다시 생성하면 완성이 된다그렇다면 array 정렬하는 방법은??array자료는 순서개념
34.JS - DOM 이라는 용어개념정리 & load 이벤트
Document Object Mode 이라는 뜻자바스크립트는 HTML 조작에 특화된 언어이다.하지만 자바스크립트가 어떻게 HTML 을 조작할 수 있는지 원리를 생각해본다면?? 자바스크립트와 HTML 은 분명 다른 언어이다. 그래서 자바스크립트에선 <p></p
35.JS - 장바구니 기능과 LocalStorage
장바구니 기능을 만들어 보는 시간!유저가 구매버튼을 누르면 그 상품명을 어딘가 저장하면 끝인데실제 서비스였으면 서버로 보내서 DB에 저장하는게 좋지만 우리는 서버가 없기 때문에 브라우저 저장공간을 이용하면 된다크롬 개발자도구의 Application 탭 들어가보면Loca
36. JS - position : sticky 활용하기
참고 사이트 : apple.com/apple-tv-4k스크롤이 되었을 때 화면에 고정되는 요소를 만들고 싶을 때 사용할 수 있는 CSS속성이다.position : fixed 는 항상 화면에 고정되는 요소를 만들 때 사용한다고 배웟는데position : sticky 는
37.JS - 스크롤 위치에 따라 변하는 애니메이션 : Apple Music UI 만들기
참고 사이트 : apple.com/apple-music스크롤 바 일정부분을 내리면 카드가 더이상 올라가지 않고 정지하는 애니메이션입니다우선 깨끗한 HTML 파일에 jQuery와 CSS파일을 첨부 한 후이미지 3개를 배치한다긴 배경에 카드 3개를 배치하고 position
38.JS - 캐러셀에 스와이프 기능 만들기
마우스로 잡아 끌면 다음 사진이 나오게 하기기능1. 드래그한 거리만큼 사진도 왼쪽으로 움직여야한다기능2. 마우스를 떼었을 때 일정거리 이상 이동했으면 사진2를 보여주고 아니면 사진1을 보여준다기능1 먼저 만들기 위해서는 알아야 할 이벤트가 3가지 있다마우스로 어떤 ht
39.JS - 터치이벤트
사이트를 모바일 기기로 테스트 하고 싶으면 크롬 개발자도구 좌상단 toggle device toolbar 버튼 누르기모바일 기기로 테스트를 하면 스와이프가 안된다왜냐하면 마우스이벤트리스너를 달았기 때문에 모바일에서는 터치이벤트리스너를 달아줘야 터치에 반응을 한다touc