728x90 반응형 > 프로그래밍 언어/Javascript24 [코딩애플] 진짜 웹개발로 배우는 실용 자바스크립트 6강 Alert 박스 X 버튼1 버튼2 3x minified 버전 복붙 제이쿼리 설치 끝 안녕하세요 Alert 박스 X 버튼1 버튼2 자바스크립트- html 변경 제이쿼리 문법을 쓰면 html 변경을 더 쉽게 할 수 있음. 원래 이렇게 사용 제이쿼리로 HTML 변경하는 방법 = 저 부분을 $()로 줄여서 사용하면 된다. 사용할 때 CSS 셀렉터 처럼 적어야 함. 아이디니까 # 클래스명 또한 찾을 수 있음. 이것과 비슷한 문법이 자바스크립트에도 있음 = document.querySelector() 대신 하나밖에 못찾음 #test 가 여러개 나온다 하면 맨 위에거만 찾아줌. 여러 개 찾고 싶으면 querySelectorAll을 사용 뒤에 [0] 이런거 같이 붙여서 활용 요소 바꾸려면 저렇게 사용 X jQuery .. 2023. 9. 23. [코딩애플] 진짜 웹개발로 배우는 실용 자바스크립트 5강 셀럭터 - class 명 alert-box 여러개 다 찾았으면 찾은 거 중에 0번째거 순서 지정 document.getElementById("alert-box")[2].innerHTML = "어쩌구"; 버튼1의 openbox => 알림창1열기() 로 전환 버튼 2 만들기 이 상태에서 버튼 2 에다가 openbox 말고 알림창2열기를 넣어준다. 두 개의 화살표가 비슷함 파라미터 사용 구멍 뚫기 버튼 1 에 알림창열기() => 알림창열기('아이디입력해라') 함수 또 만들필요 없이 버튼 2 도 알림창1열기 함수를 통해 활용 가능 저 코드 또한 더러워보일 수 있음. id 만 부여함 id = "close" 닫기 버튼 일단 셀렉터로 찾기. addEventLister - 함수 소괄호 있는 건 다 함수 function.. 2023. 9. 23. [코딩애플] 진짜 웹개발로 배우는 실용 자바스크립트 4강 숙제 실습 소괄호 안에 원하는 걸 집어넣을 수 있음 ( 모든 자료 ) 123이라는 자료를 집어넣을 수도 있음. 알림창 열기라는 긴 코드 실행해달라는 뜻 근데 구멍자리에 123이라는 숫자 넣어서 진행해달라. ( 숫자 표현할 땐 따옴표 없이 써도 ㅇ) 123이 구멍 자리에 들어간후 2번째 줄로 들어가서 실행 알림창 열기를 실행해줌. 구멍자리에 block 넣어줘서 실행. 첫 번째 코드는 알림창을 열어줌 ('block') 두 번째 코드는 알림창을 닫아줌. ('none') 함수 한가지 갖고 2가지 기능 구현한 것 알림창열기() => 알림창열기('none') 파라미터 값 넣어준 걸로 바꿈 밑에 코드는 지워준다. 지워준 모 2+1을 해주는 plus 함수 생성 plus() - 플러스 함수를 실행할 때마다 2+1을 함 .. 2023. 9. 17. [코딩애플] 진짜 웹개발로 배우는 실용 자바스크립트 3강 긴코드를 축약한거 아무렇게나 작명() 을 쓸 때마다 긴코드 들이 실행 알림창열기(); 이렇게 쓸 때마다 (소괄호는 무조건 포함) 안에있는 긴 코드 실행된다. 진짜인지 확인하려면 아까 담겨져 있던 긴코드 자리에 알림창열기() 적어줌. innerHTML의 왼쪽에 있는게 null 이라는 뜻. innerHTML의 왼쪽 실수로 셀렉터 잘못 쓴 경우 아까와 똑같은 에러 발생 오타가 난 경우의 에러 함수가 아니라고 알려줌. 2023. 9. 17. [코딩애플] 진짜 웹개발로 배우는 실용 자바스크립트 1강 ~ 2강 안녕하세요 -> 안녕 Id 에 의해서 HTML 요소 갖고와 요소 갖고오고 안에있는 html 내용을 안녕으로 바꿔달라는 뜻 뒤에는 뭘 바꾸고 싶은지 적음 내용물 바꾸고 싶으면 innerHTML .style.color = html 요소의 색상 변경 오른쪽 걸 왼쪽에 집어넣기 display: none; = 숨기기 none 말고 block 으로 하면 다시 보이기 버튼생성 클릭했을 때 안에 있는 자바스크립트를 실행하라는 뜻 아까는 아이디 속성이 있었으나 이번엔 아이디 속성이 없음. 아이디 부여해준다. 2023. 9. 17. 훈훈한 Javascript (17) 2. 브라우저의 web storage 새로고침 버튼 누르면 타이머가 종료되어버림. 카운트 다운 유지되는 방법 만들기 웹스토리지 이용 key - value 형태(키와 값이 쌍이 돼서)로 저장 = 객체처럼 저장 어떠한 데이터에 이름(key)을 지정해줘서, 그 값으로 원하는 형태의 데이터를 저장. 데이터를 전달해주면 백엔드 엔지니어 분들이 해당 데이터를 데이터 베이스에 저장할 수 있도록 작성을 해줌 세션 스토리지, 로컬 스토리지 사용하게 되면 적은 양의 데이터를 로컬 환경에 저장할 수 있음. 세션과 로컬 스토리지 마찬가지. localhost - 도메인 도메인 에서 저장된 로컬스토리지 데이터는 뒤에 어떠한 url 이 오든 모두 공유가 될 수 있음. user ( 이 부.. 2023. 9. 16. 훈훈한 Javascript (16) 1. 함수의 인자와 매개변수 전달인자, 매개변수 웹 스토리지 우선 구현한 것에서 올바르지 않은 날짜를 입력해도 D-day를 입력해주세요 만 뜨는 상태이다. 이 부분때문에 제대로 된 메시지 받지 못하고 있는 것. 이 부분을 고쳐주기 위해서 함수 하나 더 만들어주기. restTimer 함수 생성 해당 드래그 부분을 restTimer 함수 내부로 이동. setClearInterval(); 이것도 내부에서 사용. innerHTML 조작하는 부분을 restTimer 함수로 빼 줌으로서 원하는 메시지 출력받을 수 있게 됨 - 이 부분 헷갈림. 어떤 원리인지 restTimer 로 변경 바로 박스에 날짜 수정해주면 생기는 오류 고쳐주기. 이 함수 자체가 반복실행 되고 있는 것. 1초마다 counterM.. 2023. 9. 16. 훈훈한 Javascript (15) 9. clearInterval setInterval() = 함수 대부분의 함수는 return 을 해준다. 함수를 실행만하고 return 을 안 해준 상태. (리턴 값 받지 않음) 리턴값을 받기 위해서 변수에 담아봄 intervalId 라는 변수 tagetDateInput 변수와 똑같은 형식인 것임. const targetDateInput = dateForMaker(); targetDateInput => 리턴 데이터를 여기에 담아준 것 그리고 targetDate = new Date( targetDateInput ) 이렇게 사용해줬었다. intervalId 라는 변수에 뭐가 담겨져 있을 지 console.log 를 통해 확인해보기. 값 넣어주고 버튼 눌러줌 => 숫자 1 나옴 => 버튼 한 .. 2023. 9. 14. 훈훈한 Javascript (14) 7. 반복문을 사용한 텍스트 갱신 일반적으로 카운트 다운이라고 하면 시간초가 줄어드는게 보여야 한다. for 문 써주고 counterMaker 함수가 100번 반복하도록 해줌. = 별 차이 안보임 = 100번을 빠르게 반복해서 실행해주고 있는 상태. = 너무 빨라서 보이지 않는 것 자바스크립트에 코드의 실행을 늦춰주는 기능 = setTimeout 화살표 함수 fn 사용 이것도 함수 (익명함수) () => { } 익명함수를 setTimeout 함수에 작성 counterMaker 함수를 안에 넣어준다. 그리고 콤마 + 5000 시간이 지연되면서 보여진다. 5000 = 5000 밀리 초 ( = 5초 ) 1000 * i 적용 i = 1 씩 증가 1초마다 실행되고 있음. 근데 100 (i < 10.. 2023. 9. 12. 이전 1 2 3 다음 728x90 반응형
