js 썸네일형 리스트형 [javascript] 증감 연산자, 할당 연산자, 비교 연산자 javascript에서는 기본적으로 사칙 연산자를 사용할 수 있다. 분류 기호 이름 설명 사칙 연산자 + 덧하기 두 값을 더함 - 빼기 왼쪽 값에 오른쪽 값을 뺌 * 곱하기 두 값을 곱함 / 나누기 왼쪽 값을 오른쪽 값으로 나눔 나머지 연산자 % 나머지 왼쪽 값을 오른쪽 값으로 나눈 나머지를 반환 1. 증감 연산자 기호 이름 설명 ++ 증가 변수의 값을 1씩 증가 시킴 -- 감소 변수의 값을 1씩 감소 시킴 증감 연산자는 연산자의 위치에 따라 출력되는 값이 달라진다. 피연산자의 앞에 위치할 때 ++a, --a 전체 수식을 처리하기 전에 증감됨 피연산자의 뒤에 위치할 때 a++, a-- 전체 수식을 처리한 뒤에 증감됨 2. 할당 연산자 (대입 연산자) 할당이란 변수에 값을 집어 넣는 것을 말한다. 기호 이.. 더보기 [javascript] 데이터 타입(data type) javascript의 데이터에는 두 가지 타입이 존재한다. 1. 기본 타입(원시 타입 Primitive data type) 객체가 아니면서 method를 가지지 않음 데이터를 담고 있음 변경이 불가능한 데이터 타입(immutable data types) string, number, bigint, boolean, undefined, symbol 2. 참조 타입(객체 타입 Reference data type) 기본 타입이 아닌 모든 것은 객체(object) 기본 타입의 집합 동적으로 크기가 변하는 데이터를 보관하기 위해 변수가 아닌 다른 곳에 데이터를 저장하고 변수에는 그 주소만 할당됨 변경이 가능한 데이터 타입(mutable data types) 객체(object), 배열(array), 함수(fuction.. 더보기 [javascript] async와 defer 그리고 'use strict' 브라우저는 위에서 아래로 코드를 읽는다. (파싱) 그러므로 html을 읽다가 script태그를 만나면 브라우저는 script를 먼저 실행해야하므로 비교적 가벼운 html을 읽을 때보다 오랜 시간이 걸리게 된다. 이러한 브라우저의 동작 방식엔 두가지 문제점이 있다. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능해진다. 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버려, 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없게 된다. async와 defer는 위의 문제점을 해결하기 위한 속성이다. async async 속성을 사용하게 되면 브라우저는 .. 더보기 [javascript] 변수 선언(var, let, const), 지역 변수(local variable), 전역 변수(global variable), 호이스팅 변수란? 변수(variable)란 데이터(data)를 저장할 수 있는 메모리 공간을 의미하며, 자바스크립트에서의 모든 객체와 함수를 의미한다. 요즘은 var는 잘 사용하지 않고 주로 let과 const를 사용하여 선언한다. - var var문에서 변수에 초기 값을 지정하지 않는다면, 변수는 값이 할당될 때까지 undefined 값을 가짐 함수 스코프(함수 안에서만 사용 가능) var를 잘 사용하지 않는 이유 : 중복 선언이 가능. 가장 마지막에 할당된 값이 변수에 저장됨 호이스팅(어디에 변수를 선언했든 간에 가장 위로 끌어올려주는 것) 발생 - let, const 선언된 블록 안에서 유효 범위를 가짐 중복 선언이 불가능 블록 스코프(모든 코드 블록(중괄호{ }로 둘러싸인 코드 영역)을 지역 스코프로 인정.. 더보기 [j-query] FAQ, Q&A 아코디언 활용해서 만들기 (slideToggle, accordion) HTML Q1 A1 Q2 A2 Q3 A3 html 구성은 위처럼 li에 클래스를 줘도 되고 div를 써도 되고 자유롭게 가능하다. (어차피 제이쿼리에서 next()를 쓸 거라서) CSS .faq{ border-top: 1px solid #dbdbdb; } .faq .q{ display: flex; justify-content: space-between; border-bottom: 1px solid #dbdbdb; align-items: center; padding: 20px 30px; cursor: pointer; } .faq .q img{ width: 20px; height: 10px; } .faq .q img.rotate{ transform: rotate(180deg); } .faq .a{ borde.. 더보기 [j-query] a태그 이벤트 막는 방법 - a태그 이벤트 막는 방법 a태그를 클릭하는 이벤트 안에 e.preventDefault(); 를 넣어주면 링크로 이동하는 것을 막을 수 있다. 더보기 [j-query] j-query에서 요소를 선택하는 방법(next, children, find, eq) 형제 요소 선택 메소드 .next() 선택한 요소의 바로 다음에 위치한 형제 요소를 선택 .nextAll() 선택한 요소의 다음에 위치한 형제 요소를 모두 선택 .nextUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택 .prev() 선택한 요소의 바로 이전에 위치한 형제 요소를 선택 .prevAll() 선택한 요소의 이전에 위치한 형제 요소를 모두 선택 .prevUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택 .siblings() 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택 자식 요소 선택 메소드 .children() 선택한 요소의 자.. 더보기 이전 1 2 3 4 5 다음