js13 [생활코딩] JavaScript 12. 웹사이트 만들기 (야간모드 추가) 1. 아이디어 헤드라인 밑에 버튼을 만듭니다. 누르면 night 모드랑 day 모드가 번갈아서 나옵니다. * 버튼 기능 night 모드 day 모드 하이퍼링크 색 파우더블루 블루 배경색 블랙 화이트 글씨색 화이트 블랙 제작 : 2023. 8. 1 (github 이전) 2. 구조 스타듀밸리 치트 (index.html) 1. 호감도 치트 (1.html) 2. 돈 치트 (2.html) 3. 능력 치트 (3.html) 디자인 담당 (style.css) - link 태그로 배포 버튼 기능 구현 (colors.js) - script 태그로 배포 (JQuery 기능도 사용) 3. 코드 살펴보기 1. html 파일 변경사항 - script 태그 : 첫 번째는 JQuery, 두 번째는 JS 파일 - input 태그 : .. 2023. 11. 10. [생활코딩] JavaScript 11. 라이브러리와 API * JavaScript 목차 1. 라이브러리 vs 프래임워크 1. 라이브러리 (Library) : 만들고 있는 프로그램에 사용할 부품을 가져오는 느낌 - 생산성 증가 - 많이 알수록 할 수 있는 일이 증가 2. 프레임워크 (Framework) : 만들고자 하는 것에 따라 언제나 필요한 공통적인 부분에 달라지는 부분은 살짝 바꿔서 사용 - 반제품 - 수정이 필요 3. JQuery : 오래되고 안정적인 라이브러리 * 바로 가기 jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handl.. 2023. 11. 10. [생활코딩] JavaScript 10. 파일로 쪼개기 * JavaScript 목차 1. 파일 그룹핑 방법 1. input 태그를 배포한다 (버튼 퍼뜨리기) 2. color.js 파일을 만들고, 작성한 script 태그 내부를 복사해서 붙여 넣는다. 3. 출처를 입력한다. 2. 효과 - 유지보수 편리 - 퍼뜨리기 쉬움 - 가독성 높아짐 - 웹서버랑 사용자 모두 이득 (캐시, 트래픽) - 시간과 돈 절약 2023. 11. 10. [생활코딩] JavaScript 9. 객체 * JavaScript 목차 1. 객체 (object) : 인덱스로 문자를 사용하고 싶다면 = 연관배열 (associative array), 맵(map), 딕셔너리(dictonary) object.function() {}; - 순서 없이 정보를 저장 - 이름이 있는 정리정돈 상자 - 관련 있는 함수와 변수를 그룹핑 - 폴더 느낌 2. 객체 vs 배열 배열 객체 순서 O X (이름 O) 정의할 때 대괄호 중괄호 값을 불러오는... 인덱스 coworkers[0] 키 coworkers.programmer 3. 실습 : 객체 생성 및 확인 1. 결과 - 의도 : coworkers 객체 생성하고 데이터 입력 1) programmer : egoing 2) designer : leezche 3) bookkeeper .. 2023. 11. 10. [생활코딩] JavaScript 8. 함수 * JavaScript 목차 1. 함수 (function, 메소드, method) 1. 정의 : 입력과 출력이 존재, 기능을 수행 - 입력값에 따라 함수가 다른 출력값을 내도록 - 하나의 로직을 재실행할 수 있도록 하는 것 - 코드의 재사용성을 높여줌 - 핵심은 입력과 출력! (+) - 일종의 수납상자 - head 태그에 함수를 만들어서 작성 - 효율성 높임 - 웹페이지 크기 줄이기 * 메소드 (method) : 객체에 속해 있는 함수 2. 입력값 1. 매개변수 (파라미터, parameter) - 값을 받아서 함수 안으로 매개하는 변수들 ex) left, right 2. 인자 (아규먼트, argument) - 괄호 안에 들어가는 값 - 함수로 유입되는 입력값 ex) 2, 3 3. 리턴 (return) -.. 2023. 11. 10. [생활코딩] JavaScript 7. 문장 (Statement) * JavaScript 목차 1. 문장 (Statement) : 어떤 작업을 수행하는 문장 - 조건문 : if, else - 리팩토링 - 반복문 : while, for - 배열 * 표현식 (Expression) : 어떤 값을 가지고 있는 것 - 함수의 매개변수나 반환값이 될 수 있음 2. 조건문 (if) - if, else if, else 1. 실습 : 버튼 하나로 주간/야간 모드 1. 결과 - 의도 : if문을 사용해서 버튼 하나로 주간/야간 모드 기능 구현 - 버튼의 id를 night_day로 설정 2. 코드 3. 리팩토링 (refactoring) - 코드를 효율적으로 개선하는 것 1. this - 자기 자신을 가리킴 2. target 변수를 통한 중복 제거 4. 반복문 (Loop) - while문,.. 2023. 11. 10. [생활코딩] JavaScript 6. 연산자 * JavaScript 목차 1. 연산자 (operator) - 검색어 : javascript operators 2. 산술 연산자 (Arithmetic Operators) : 사칙연산 3. 대입 연산자 (Assignment Operators) : 변수에 값을 대입 또는 연산 4. 비교 연산자 (Comparison Operators) : 값을 비교할 때 사용하는 연산자 * 값이 없다? - null : 값이 없음을 명시적으로 표시 - undefined : 값이 없는 상태 - NaN : 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터형. 숫자가 아니라는 뜻 1. 간단 실습 - 결과가 true, false로 나옴 2. == vs === : === 쓰기! - 왼쪽은 ==, 오른쪽은 === 5. 논리 연산자 .. 2023. 11. 10. [생활코딩] JavaScript 5. 자료형 * JavaScript 목차 1. 자료형 (데이터 타입, Data type) 1. 종류 - String : 문자열 - Number : 숫자 - Variable : 변수 - Boolean : 불리언 - Array : 배열 - Function : 함수 - Object : 객체 2. 숫자 (Number) 1. Math. - 승, 반올림, 올림, 내림, 제곱근, 랜덤 등 2. 실습 : Number - 그냥 적으면 됨 - 산술 연산자: + - * / 3. 문자열 (String) 1. 이스케이프 (escape) : 단순히 문자로 해석하도록 사용할 때 2. 실습 : 문자열 - ' '나 " " 안에 적기 - 큰 따옴표는 큰 따옴표로, 작은따옴표는 작은따옴표로 끝내기 * indexOf()의 결과 - -1 : 찾는 값이 .. 2023. 11. 10. [생활코딩] JavaScript 4. 이벤트 * JavaScript 목차 1. 이벤트 (event) : 웹브라우저 위에서 일어나는 사건 2. 웹브라우저에서 일어날 수 있는 이벤트? - 검색어: Javascript event * 링크 (https://www.w3schools.com/js/js_events.asp) JavaScript Events W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 3. 실습 : 경고창 1... 2023. 11. 10. [생활코딩] JavaScript 3. Script 태그 * JavaScript 목차 1. Script 태그 - 웹브라우저한테 HTML의 코드로 지금부터 JavaScript가 시작된다고 알려줌 2. 실습: hello world 1. 결과 - 의도: 화면에 hellow world 출력 2. 코드 - body 태그에 script 태그 추가 3. 실습: 차이 확인 1. 결과 - 의도: JavaScript 코드와 HTML 코드 비교 2. 코드 - document.wirte: JS코드, 화면에 출력 - JavaScript는 동적이라서 1+1을 계산해서 2를 출력 - HTML은 불가능 2023. 11. 10. [생활코딩] JavaScript 2. 콘솔 * JavaScript 목차 1. 콘솔 (console) - JavaScript를 실행하는 또 다른 방법 - 코드를 실행해야 하는 가벼운 상황에서 유용 2. 웹 페이지에서 실행하는 법 1. 오른쪽 클릭 - [검사] - [콘솔탭] * 콘솔 창은 개발자 도구에 있음 [CSS] 5. 개발자 도구 CSS 1. 등장 배경과 장단점 2. Style 태그와 속성 3. 선택자와 속성 4. HTML 태그 크기 5. 개발자 도구 6. 박스 모델 7. 그리드 8. Can I Use (웹 기술 통계) 9. 미디어 쿼리 10. 코드 재사용 11. 웹사이트 만들기 hobbymemo.tistory.com 2. 자바 스크립트 코드를 즉석에서 실행할 수 있음 - 코드 입력하고 엔터 누르면 됨 - 같은 코드 다시 입력하고 싶으면 위쪽 .. 2023. 11. 10. [생활코딩] JavaScript 1. 등장 배경 * JavaScript 목차 1. 웹 브라우저 - 한 번 화면이 출력되면 자기 자신을 바꿀 수 없음 ex) HTML (정적) 2. JavaScript - HTML을 제어하는 언어 (HTML 위에서 동작) - 사용자와 상호작용 하게 만들어줌 - 홈페이지 변경 가능 3. 홈페이지에 버튼 추가 - input 태그에 button 속성 넣기 - onclick 속성의 값으로 JavaScript 필요 (버튼을 클릭했을 때 해당 자바 스크립트 코드 실행) 4. 프로그래밍 언어 1. 컴퓨터 언어 1. HTML - 웹페이지를 묘사 - 시간의 순서에 따라 무엇을 할 필요가 없음 - 컴퓨터 프로그래밍 언어 X (순서 X) 2. JavaScript - 사용자와 상호작용하기 위해 고안된 언어 - 시간의 순서에 따라 웹브라우저의 .. 2023. 11. 10. [생활코딩] JavaScript 목차 * JavaScript 목차 1. 등장 배경 2. 콘솔 3. Script 태그 4. 이벤트 5. 자료형 6. 연산자 7. 문장 (Statement) 8. 함수 9. 객체 10. 파일로 쪼개기 11. 라이브러리와 API 12. 웹사이트 만들기 (버튼 추가) 생활코딩에서 배운 JavaScript 내용을 정리했습니다. JavaScript를 이용해서 웹 페이지가 사용자와 상호작용하게 만드는 방법을 배웁니다. 웹 프로그래밍을 하기 위한 필수 언어라고 합니다. 목표는 2가지입니다. 1. 기존에 만든 웹페이지에 주간/야간 모드 기능을 추가하기 2. 각종 JavaScript 문법 익히기 * 검색어 가이드 1. document - 웹 페이지에 있는 태그 삭제 - 자식 태그 추가 2. DOM (Document Object.. 2023. 11. 10. 이전 1 다음
