본문 바로가기

강의 실습159

연산자 1. 대입연산자 변수에 값을 넣는 역할을 한다. let a = 1; 2. 산술연산자 사칙연산을 할 수 있도록 한다. let a = 1; let b = 2; console.log(a + b); // 3 console.log(a - b); // -1 console.log(a * b); // 2 console.log(a / b); // 0.5 console.log(a % b); // 1 3. 연결연산자 2개 이상의 문자열을 이어붙이는 연산. 문자형과 숫자형을 더하면 묵시적 형변환이 일어나, 숫자형이 문자형으로 변환된다. let a = "1"; let b = "2"; console.log(a + b); // 12 let a = "1"; let b = 2; console.log(a + b); // 12 4. 복합.. 2023. 12. 2.
자료형과 형 변환 1. 자료형 자료형 : 값을 성질에 따라 분류한 것. * Data Types → Primitive Data Type - Number, String, Boolean, Undefined, Null → Non-Primitive Data Type - Object, Array, Function 1) 자바스크립트의 자료형 Primitive Type(원시타입) : 한 번에 하나의 값만 가질 수 있음. 하나의 고정된 저장 공간 이용. ex) let number = 12; Non-Primitive Type(비원시 타입) : 한 번에 여러 개의 값을 가질 수 있음. 여러 개의 고정되지 않은 동적 공간 사용. ex) let array = [1, 2, 3, 4]; 원시타입 자료형을 살펴본다. #1 숫자형 let age = 2.. 2023. 11. 30.
변수와 상수 변하는 것 & 절대 변하지 않는 것 1. 변수 변수 : 프로그램이 실행되는 도중에 계속해서 바뀌는 값을 저장하기 위한 것. 값에 이름 붙여 부르고 싶을 때 사용. // let 키워드 let age = 25; // 변수 선언 console.log(age); // 25 출력 age = 30; // 값 바뀜 console.log(age); // 30 1) 변수 명명 규칙 - 기호를 사용할 수 없다. '_', '$'는 변수명에 사용 가능. let ^age = 25; // X - 변수명은 반드시 숫자가 아닌 문자로 시작해야 한다. let 6age = 25; // X - 예약어를 피하자. (if 등) let if = 25; // X 2) var 키워드 중복 선언이 가능하다. // var 키워드 var age = 2.. 2023. 11. 29.
Hello World 자바스크립트 안녕! 1. 자바스크립트 언어 소개 1) 자바스크립트는 무엇일까? 프로그래머들이 가장 많이 사용하는 언어 1위! 2021년도, 영어권 최대 프로그래밍 Q&A 사이트 Stackoverflow의 조사 결과 - 자바스크립트 64.96% 웹사이트는 HTML, CSS, Javascript 3가지 언어로 만들어짐 HTML5 : 요소들의 배치와 내용을 기술하는 언어, 색이나 크기 등의 디자인 수행X CSS : 색, 크기, 애니메이션 등을 정의하는 스타일링을 위한 언어 Javascript : 웹사이트의 활력을 부여하는 언어 (웹을 움직이는 근육) 2) 자바스크립트가 실행되는 곳 자바스크립트 엔진이 실행. 웹 브라우저에 포함되어 있음. (Safari - Apple, Firefox - Mozilla, Chro.. 2023. 11. 28.
React 소개 1. 도대체 React는 무엇일까 React는 자바스크립트의 UI 라이브러리 지금은 Meta가 된 Facebook이 개발한 오픈소스 2. React를 얼마나 많이 사용할까? 2020 JS FLAVOR 에 따르면, 2016 1위, 2017 1위, 2018 2위, 2019 1위, 2020 2위 사용 기업 : 인스타그램, 페이스북, 넷플릭스, 디스코드, 트위치, 트위터, 티스토리, 라프텔, 에어비앤비 등 3. React를 배우면 뭘 만들 수 있나? React의 파생 기술은 React Native를 이용하여 데스크탑, Android, IOS에서 동작하는 어플리케이션을 개발할 수 있음 4. React를 어떻게 배워야 하나? Javascript → Node.js(리액트 동작 환경) → React.js 참고강의 : .. 2023. 11. 27.
프로젝트 적용하기 6. 크롬익스텐션 적용하기 지금까지 개발한 웹 페이지를 크롬 익스텐션으로 적용해서 시작화면으로 사용해본다. 우선 웹 페이지에 배경색을 입혀주기 위해 css에서 원하는 이미지의 주소를 body에 background-image로 넣어준다. - main.css ... body { margin: 0 auto; width: 100%; font-family: 'Noto Sans KR', sans-serif; /* background-image: url("https://source.unsplash.com/user/hbin12212/likes"); */ /* background-image: url("https://images.unsplash.com/photo-1563283805-d8bf898cd83d?crop=entr.. 2023. 11. 14.
북마크 아이템 추가하기 5. 북마크 아이템 추가하기 북마크 바에 여러 아이템을 추가해보고 추가한 아이템 리스트들을 표시하고 또 삭제하는 기능을 구현해본다. - index.html 북마크 닫기 북마크 열기 + 북마크 추가 이름 주소 취소 추가 index.html에서 class이름이 bookmark-bar인 요소 안에 class이름과 id값이 bookmark-item-add-btn인 div를 작성하고, 그 아래에는 새로운 북마크를 추가할 수 있는 입력폼과 추가버튼을 만들어준다. class 이름과 id 값이 bookmark-item-input-form인 div 안에 class 이름이 bookmark-input인 div를 만들고, 그 안에는 새로운 북마크의 이름과 주소를 넣을 수 있는 input 폼들을 class 이름이 new-boo.. 2023. 11. 13.
북마크바 만들기 4. 북마크 바 만들기 북마크 탭은 열고 닫을 수 있고, 북마크를 추가하는 버튼과 추가한 북마크들을 볼 수 있는 탭이다. index.html에서 class 이름이 main-container인 div 아래에 class이름과 id가 bookmark-open인 div와 class이름과 id가 bookmark-close인 div를 만들고, 각각의 div 안에는 id가 bookmark-open-btn인 div와 bookmark-close-btn인 div를 넣어주고, 텍스트로는 북마크 닫기, 북마크 열기를 작성한다. 그리고 그 아래에는 bookmark-bar라는 class 와 id 를 갖는 div를 만들어주고 주석으로 "북마크 바" 라고 작성한다. 그 다음 bookmark-toggle.js 파일을 만들고 html .. 2023. 11. 11.
API를 사용해 명언 설정하기 3. 명언 설정하기 명언 api를 사용해 명언을 나타내본다. index.html에서 class와 id가 quote인 div 요소를 main-wrapper div의 아래에 추가한다. 주석으로 이라고 표시를 해주고, js 폴더 안에 quote.js 파일을 만들고 index.html의 body 태그 제일 아래에 스크립트를 추가한다. - index.html quote.js 에서는 api를 통해 받아온 명언을 웹 페이지에 나타내주는 기능을 개발한다. - quote.js const API_URL = "https://random-quote.hyobb.com/"; // https://port-0-random-quote-4uvg2mleme84ru.sel3.cloudtype.app/ const quoteElement = .. 2023. 11. 10.

티스토리툴바