코딩애플 JS 기초
1.[코딩애플 JS 기초] function, onClick활용
이런 화면에서 열기 버튼을 누르면 이렇게 창이 나타나고닫기 버튼을 누르면다시 원래대로 돌아오는 것을 onClick을 사용해 만들기CSS위와 동일하게 화면이 잘 나타난다강의를 듣다가 문득 뭔가 이상함이 느껴져서 보니...닫기 버튼을 div 안에 만들었어야 하는 것을 깨달
2.[코딩애플 JS기초] addEventLister, event, 콜백함수
id="close" 요소에 "click"(파라미터1)을 하면 function(){ }(파라미터2)을 실행해라click, keydown, scroll, drag, mouseover(마우스 갖다대기) 등등위의 예시에서이 부분 중이 부분을 의미한다.
3.[코딩애플 JS기초] Bootstrap, class 탈부착 위한 toggle함수, querySelector
Bootstrap을 통해 html, css작성 시간을 줄일 수 있다. 사용방법은 부트스트랩 시작하기 여기에서
4.[코딩애플 JS 기초] JQuery
JQuery란? 너무 긴 자바스크립트의 코드를 줄이기 위해 또는 자바스크립트 사용이 어려운 사람들이 편하게 쓸 수 있도록 가져다쓸 수 있는 도구 코드의 모음이라고 할 수 있다. 다들 무겁다고는 하지만 많은 지식을 요구하지 않기 때문에 사용하기 좋다. 라이브러리를 사
5.[코딩애플 JS기초] JS 기초 강의지만 CSS 애니메이션을 배우는 시간!
한쪽으로 이동하거나 없다가 나타나는 비포 애프터 변화요소가 하나인 그런 UI시작 스타일 만들기최종 스타일 만들기원할 때 시작 => 최종으로 변화시키는 코드 만들기transition 추가
6.[코딩애플 JS기초] form 공백검사, input, change이벤트
한 글자 입력할 때마다 발생하는 이벤트글자 입력 후 focus가 다른 곳으로 이동했을 때(유저의 마우스 커서가 input을 벗어났을 때) 발생하는 이벤트input과 다르게 한번 입력하기 시작해서 글자를 몇개를 입력하든지 이벤트는 발생하지 않지만 커서를 다른쪽에 두는 순
7.[코딩애플 JS 기초] 변수
변수 변수 쓰는 이유 값이 너무 길어서 일일이 대입해서 쓰기 귀찮아서 특정 값을 기억하게 하고 싶을 때
8.[코딩애플 JS기초] 자바스크립트 문법, 브라우저 문법, setTimeout(), setInterval()
setTimeout() (설정한 초)초 후에 콜백함수 내용 실행해라 사용방법 setTimeout(function(){함수}, 몇초(ms단위)) setInterval() (설정한 초)초 마다 콜백함수 내용 실행해라 사용방법 setInterval(function(){함수
9.[코딩애플 JS 기초] 정규식 활용하여 이메일 형식 검사하기
정규식: 문자 있는지 확인하는 식 includes() test() 를 사용하면 범위 지정도 가능하다
10.[코딩애플 JS기초] 함수 return 문법, toFixed(), parseInt(), parseFloat()
함수 return 1. return 오른쪽의 값을 결과로 출력 2. 함수를 종료 return에서 함수가 종료되므로 함수 내에서 return 뒤에 적은 것은 실행되지 않는다 return 어디에 쓸까? 같은 수식을 반복할 때 함수를 만들어서 return을 쓰면 편리하다
11.[코딩애플 JS기초] 이벤트 버블링과 관련 함수
이벤트 버블링 어떤 html 태그에 이벤트가 발생하면 그 부모 요소까지 이벤트가 실행되는 현상 만약 여기서 인 곳에 이벤트가 발생한다면 그 부모요소인 까지 이벤트가 발생한다는 것! 이벤트 버블링 관련 함수 **Propagation: the action of wi
12.[코딩애플 JS 기초] Array, Object 자료형
\[]로 감싸져 있는 자료형, 자료끼리는 콤마로 구분한다.왼쪽에서부터 0번째, 1번째, 2번째...순이다.따라서순서에 직접 넣기 또는 .push(넣을 자료) 활용{}로 감싸져있는 자료형Array형과 다르게 자료에 이름을 붙일 수 있다.이 때 자료의 이름을 key, 자료
13.[코딩애플 JS 기초] 셀렉터 문법과 변수, for 반복문
셀렉터 문법은 작동시간이 길어서 로딩하는데 오래걸린다getElementBy\~~, querySelector등등...비슷한 코드가 여러번 반복될 때 프로그래밍에서는 인덱싱(순서매기는 것)할 때 첫번째는 0번째라고 세니까 i=0으로 두는 거라고 이해하면 좀 편한 것 같다.
14.[코딩애플 JS기초] dataset문법, 유저가 누른 버튼 찾기 e.target
ㅁㅈㄷㅅ
15.[코딩애플 JS 기초] 자바스크립트로 html 안에 태그 생성하기 및 태그 변경하기
document.createElement('생성할 태그');를 변수 선언한다.변수.innerHTML='들어갈 내용' 생성할 태그 안에 들어갈 내용 적기document.querySelector('들어갈 곳').appendchild(생성할 태그 선언한 변수);로 붙이기생성
16.[코딩애플 JS 기초] forEach, for in 반복문, arrow function
Array 뒤에 붙여 쓰는 반복문Array.forEach(function(){});형식으로 사용최대 3개까지 파라미터 가능for문처럼 index(보통 i로 많이쓰는 그거), i++, 조건식 없이 바로 콜백함수로 실행 가능object 자료 반복문에 쓴다for(변수 in
17.[코딩애플 JS 기초] 서버, GET/POST 요청, Ajax, jQuery로 Ajax요청하기, 자바스크립트로 Ajax요청하기
유저가 요청 시 데이터를 보내주는 프로그램서버와 데이터를 주고받을 때 데이터는 문자만 가능데이터 URL요청 방법(GET/POST)서버에 있는 데이터를 읽고 싶을 때서버로 데이터 보낼 때서버에 데이터 요청 시 새로고침 없이 데이터 주고받을 수 있게 하는 브라우저 기능ex
18.[코딩애플 JS 기초] 배열 정렬 함수 sort, map, filter 함수
Array 배열에서 사용 가능한 정렬 함수원래 배열 자체를 수정한다.가나다순 정렬, 내림차순, 오름차순 정렬 등 가능 Array배열.sort(function(a,b){return compareFunction})형식으로 사용function에서 파라미터 없이 쓸 경우 아스
19.[코딩애플 JS 기초] localStorage에 배열 데이터 저장, 수정, 추가, 삭제
브라우저에 데이터를 저장하는 방법으로 localStorage와 sessionStorage가 있다.문자 숫자를 저장할 수 있으며 최대 5MB 까지 저장 가능localStorage와 sessionStorage 차이점 정리참고: https://dev-syhy.tis