본문 바로가기

Javascript8

DOM API DOM API (Document Object Model, Application Programming Interface) ㄴ> document : div, span, input .... //HTML 요소(Element) 1개 검색/찾기 const boxEl = document.querySelector('.box'); //HTML 요소에 적용할 수 있는 메소드! boxEl.addEventListener(); //인수(Arguments)를 추가 가능! boxEl.addEvenetListener(1,2); //1 - 이벤트 (Event, 상황) boxEl.addEventListener('click', 2); //2 - 핸들러 (Handler, 실행할 함수) boxEl.addEventListener('click'.. 2023. 8. 16.

Javascript 자바스크립트 함수, 조건문 함수 function 특정 동작(기능)을 수행하는 일부 코드의 집합(부분) //함수 선언 function helloFunc() { //실행코드 console.log(1234); } //함수호출 helloFunc(); //1234 function returnFunc() { return 123; //123을 밖으로 반환, 이걸 누가 받아? {}밖으로 내보낼 수 있음 } let a = returnFunc(); //여기서 returnFunc이 호출(실행)되면 a라는 함수에 담는다 console.log(a); //123 //함수 선언! function sum(a, b) { //a와 b는 매개변수(parameters) return a + b; } //재사용 let a = sum(1, 2); //1과 2는 인수(Ar.. 2023. 8. 16.

Javascript 자바스크립트 변수, 예약어 변수 (var, let, const) 데이터를 저장하고 참조(사용)하는 데이터의 이름 //재사용 가능 //변수 선언! let a = 2; let b = 5; console.log(a + b); //7 console.log(a - b); // -3 console.log(a * b); // 10 console.log(a / b); // 0.4//값(데이터)의 재할당 가능! let a = 12; console.log(a); //12 a = 999; console.log(a); //999 //값(데이터)의 재할당 불가! const a = 12; console.log(a); //12 a = 999; console.log(a); //TypeError : Assignment to constant variable. /.. 2023. 8. 13.

Javascript js 자바스크립스 데이터 종류(자료형), String, Number, Boolean, Undefined, Null, Object, Array 데이터 종류 (자료형) 1. String 2. Number 3. Boolean 4.Undefined 5. Null 6. Object 7. Array 1. String ( 문자 데이터 ) "" , '' 따옴표를 사용 //문자데이터 let myName = "lucy"; let email = 'lucy@gmail.com'; let hello = `Hello ${myName}?!` //빽틱 {} 추가적인 데이터를 보관해서 채워 넣겠다. console.log(myName); //lucy console.log(email); //lucy@gmail.com console.log(hello); //Hello lucy?! 2. Number (숫자 데이터) 정수 및 부동소수점 숫자를 나타낸다. //숫자데이터 let numb.. 2023. 8. 12.

Javascript 자바스크립트 표기법, 주석 표기법 - dash-case(kebab-case) : HTML, CSS the-quick-brown-fox-jumps-over-the-lazy-dog (하나의 단어로 인식, -를 통해 띄어쓰기) - snack_case : HTML, CSS the_quick_brown_fox_jumps_over_the_lazy_dog - camelCase : JS theQuickBrownFoxJumpsOverTheLazyDog - PascalCase : JS (생성자 함수에서 많이 사용,,!) TheQuickBrownFoxJumpsOverTheLazyDog - Zero-based Numbering : 0기반 번호 매기기! 특수한 경우를 제외하고 0부터 시작한다 let fruits = ['Apple', 'Banana', '.. 2023. 8. 12.

[Javascript_day3] ESLint, eslint란? with Prettier ESLint란? JavaScript 코드에서 문제점을 찾고 일관된 코드 스타일을 적용하기 위한 정적 코드 분석 도구로 일관된 코드 스타일을 유지하고 코드 품질을 향상시키기 위해 사용한다. Prettier란? 코드 포맷터(code formatter)로서, 코드의 일관된 스타일을 자동으로 정리해주는 도구 참고 https://canoe726.tistory.com/16 https://velog.io/@jiwon/ESlint https://dev-yakuza.posstree.com/ko/react/eslint/ https://comingsoon1004.tistory.com/105 2023. 7. 27.

[Javascript_day2] BABEL, Babel, 바벨이란? WEBPACK, Webpack 웹팩이란? 사용하는 이유는? Babel이란? Javascript 컴파일러로 최신 버전의 JavaScript 코드를 구형 브라우저나 환경에서 동작하는 하위 버전의 JavaScript 코드로 변환하거나 JSX 같은 문법을 JS 코드로 변경해주는 역할을 한다. Webpack이란? 정적 리소스(JavaScript, CSS, 이미지 등)를 번들링하는 모듈 번들러로 목적은 종속성을 기반으로 최적화된 하나의 번들 파일을 생성하는 것 https://lihano.tistory.com/20 https://velog.io/@suyeon9456/Babel https://nyagm.tistory.com/52 https://epiphany0421.tistory.com/186 https://codermun-log.tistory.com/605 https://s.. 2023. 7. 26.

[Javascript_day1] 브라우저란? 브라우저 렌더링 과정, 브라우저는 어떻게 화면을 렌더링 하는가? 렌더링 최적화 브라우저란? 우리가 평소 인터넷에 접속할 때 사용하는 크롬, 사파리, 파이어폭스, 인터넷 익스플로러 등을 말한다. 웹에서 페이지를 찾아서 보여주고 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램으로 무언가를 찾아서 보여주는 것이 브라우저라고 할 수 있다. 즉, 브라우저는 유저가 선택한 자원을 서버로 부터 받아와 유저에게 보여주는 것이 바로 '렌더링'이라고 한다. 이 자원은 페이지 말고도 이미지, 비디오 등의 컨텐츠들도 포함되며 받아온 자원들을 렌더링 과정을 통해서 유저에게 보여주게 된다. 브라우저의 기본 구조 User Interface (사용자 인터페이스) 주소 표시줄, 새로고침 버튼, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분으로 .. 2023. 7. 25.

이전 1 다음

티스토리툴바