안녕하세요 찐망고입니다. addEventListener()는 JavaScript에서 이벤트 처리를 위해 사용되는 메서드인데요. 이 메서드를 사용하면 HTML 요소에 이벤트 리스너를 추가할 수 있습니다. // element.addEventListener(event, function, useCapture); window.addEventListener('scroll', function() {}) function toggleOnClass() { header.classList.add("on"); } const btn = document.querySelector("button") btn.addEventListener("mouseenter", toggleOnClass) 클릭이벤트 (click): 사용자가 마우스로 요..
안녕하세요 찐망고입니다. CSS 도 선택자가 중요하잖아요! 선택자 관련 CSS 만 해도 엄청 많죠~ `document.querySelector()`는 웹 개발에서 사용되는 JavaScript의 메서드 중 하나입니다. 문서 객체 모델(Document Object Model, DOM)에서 요소를 선택하는 데 사용하죠. 이 메서드는 CSS 선택자를 통해 문서 내에서 요소를 선택하고 반환하는데요, CSS선택자를 사용하여 원하는 요소를 찾을 수 있습니다. 일치하는 요소가 없는 경우엔 `null`을 반환합니다. const elementId = document.querySelector("#myElement"); // id선택자 요소 선택 const elementClass = document.querySelector(..
안녕하세요 찐망고입니다. 오늘은 자바스크립트 문자열 관련 속성과 메서드를 따로 포스팅 해보려 합니다. 1. 문자열의 길이 length는 함수는 아니고, 숫자가 저장되는 프로퍼티 문자열의 길이를 저장 (갯수) const txt = "Javascript"; console.log(txt.length); // 10 2. 특정 글자에 접근하기 문자열 내 특정 위치에 있는 글자에 접근하려면 [, ] 대괄호를 이용하거나 str.charAt() 메서드이용 위치는 0부터 시작. let str = "Javascript"; //첫 번째 글자 console.log( str[0] ); // J console.log( str.charAt(0) ); // J // 마지막 글자 console.log( str[str.length - ..
안녕하세요 찐망고입니다. 오늘은 자바스크립트에 데이터 형식을 좀 알아볼까요? 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다. 8가지 기본 자료형이 있고, 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있습니다. let memo = "hello"; memo = 0123456789; 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는데 이를 '동적 타입(dynamically typed)' 언어라고 부릅니다. 1. 문자열 문자는 영문자, 숫자, 마침표나 공백 등을 반드시 따옴표 안에 들어가야 하고, 큰따옴표나 작은따옴표든 상관없습니다. let mood = "happy"; //큰따옴표 mood = 'happy'; //작은따옴표 mood = `happy`; //역따옴표(백틱..
안녕하세요 찐망고 입니다. 오늘은 자바스크립트 함수에 대해서 가볍게 포스팅해볼게요 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다. 코드를 재사용하고 구조화하여 프로그램을 개발하는데 도움을 주는 사용자정의함수와 자바스크립트에서 내부적으로 제공하는 내장함수가 있어요 function funcName(parameter1, parameter2) { // 함수실행코드 // 결과반환(선택가능) } function addNumbers(a, b) { return a + b; } let result = addNumbers(3, 5); console.log(result); // 8 함수는 함수 선언식과, 함수 표현식이 존재하는데 함수를 선언하고 사용자가 직접 실행할 함수의 이름을 짓거나..
자바스크립트에서는 데이터 값을 하나의 목록으로 만드는 배열이 존재합니다. 원래 변수안에 값을 할당할때 하나씩만 가능하잖아요. 근데 여러개의 값을 하나의 변수안에 넣고 싶은거죠.. 좋아하는 과일을 하나만 고를 수 없는 그런 마음? const fruits = ["체리", "망고", "블루베리", "수박"]; 좋아하는 과일의 종류가 많으면 배열을 쓸수록 더 합리적이겠죠? 좋아하는 과일이 10개가 넘는데 변수를 10개를 굳이 만들 필요가 없으니까요 배열을 만들 때는 각괄호 []를 사용합니다. 배열안에 값을 넣으려면 각괄호 안에 값을 입력하고 쉼표로 나눠주면 됩니다. 배열에 들어간 개별 값을 원소(element)라고 불러요 // 배열 표기 const fruits = [ "cherry", "mango", "blue..
안녕하세요 찐망고입니다. 자바스크립트에서 가장 중요한 두가지는 조건문과 반복문이라고 생각하는데요 반복문(loop)은 "어떤 내용이 true인 동안은 계속 이걸 실행해" 라고 말하는 겁니다. while반복문 가장 간단한 반복문은 while반복문인데요. while반복문은 주어진 조건이 true로 있는 동안은 실행 코드를 반복해서 실행합니다. 그 조건이 false가 되면 하던 일을 중단해가 포함되고 있죠 while(조건식) { console.log("코드실행") // 실행문 i++; // 증가감식 } for문 for반복문을 사용하면 반복문에 사용할 변수를 만들고 조건이 false가 될 때까지 계속 반복합니다. for(초기값; 조건식; 증가감식;) { 실행문; } 반복문은 초기 값을 기준으로 조건식을 실행합니다..
안녕하세요 찐망고입니다. 자바스크립트에서 가장 중요한 두가지는 조건문과 반복문이라고 생각하는데요 if문 조건문은 "만약 어떤 내용이 참(true)이라면 이걸실행해주고, 참이 아니라면 저걸 실행해 혹은 실행하지마" 라고 말하는 것과 같습니다. 이것을 if문과 if...else문이라고 하는데요 if문은 어떤 내용이 true일 때 특정 코드를 실행할 때 사용하고, if...else문은 어떤 내용이 true일 때 특정 코드를 실행하고, 만약 false라면 다른 코드를 실행할 때 사용합니다. // if문 예시 const name = "제니퍼 애니스톤"; console.log(name.length) if(name.length > 5) { console.log("제니퍼 애니스톤입니다.") } 제니퍼 애니스톤은 공백을..
안녕하세요 찐망고입니다. 오늘은 스코프와 호이스팅에 대해서 포스팅 해보도록 할게요. 자바스크립트에서 스코프는 변수의 유효 범위를 말합니다. 즉, 변수가 어디에서 사용될 수 있는지를 결정하고, 변수가 선언된 위치와 관련이 있어요. 1. 전역 스코프(Global Scope): 전역스코프는 코드의 어디에서든 접근할 수 있는 가장 바깥쪽 스코프인데요 전역 스코프에서 선언된 변수는 어디에서든 참조할 수 있습니다. 2. 함수 스코프(Function Scope): 함수 스코프는 함수 내에서 선언된 변수의 유효 범위를 나타내는데, 함수 스코프에 선언된 변수는 함수 내부에서만 접근 할 수 있으며, 함수 외부에선 접근 할 수 없습니다. 3. 블록 스코프(Block Scope): 블록 스코프는 중괄호({})로 둘러싸인 블록..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Mb5ht/btrtnCX7WIg/KZIuHOnn1v5V79okQbYqJK/img.png)
안녕하세요 찐망고입니다. 오늘은 자바스크립트의 연산자에 대해서 포스팅하도록 하겠습니다. 산술 연산자 자바스크립트의 산술 연산자에는 표준 산술 연산자(덧셈, 뺄셈, 곱셈, 나눗셈)가 있습니다. 수학에서 배웠던 것처럼 숫자형 값을 계산할 수 있습니다. 20 + 10; // 30 20 - 10; // 10 20 * 10; // 200 20 / 10; // 2 let subject = 'javascript'; let score = 100; console.log(subject + '과목 성적은 ' + score + '점 입니다.'); // javascript 과목 성적은 100점 입니다. let cal = 3 - 5 * 6 / 2 + 3; console.log(cal) // -9 덧셈(+) 연산자인 경우에만 문자..
- Total
- Today
- Yesterday
- uiux
- 피그마플러그인
- JavaScript
- css
- slickAPI
- 반응형웹
- 포토샵합성
- Border
- 스마트폰해상도
- css그리드
- CSS3
- Slick
- UI디자인
- uxdesign
- 디자인팁
- 프로그래밍기초
- 코딩교육
- 웹디자인
- uidesign
- padding
- margin
- 자바스크립트숫자카운트
- 웹표준
- JavaScriptTips
- 웹접근성
- boxmodel
- css4
- 슬라이드플러그인
- 시멘틱마크업
- 크로스브라우징
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |