본문 바로가기

javascript

[javascript] 함수 정의 방법 ( 자바스크립트 함수 생성 ) 자바스크립트에서 제일 중요한 개념은 함수라고 생각합니다. 자바스크립트에서 함수를 잘 다루고 활용을 잘한다면 고급 개발자라고 생각합니다. 함수의 기초적인 부분을 이해하지 못한다면, 결코 자바스크립트를 잘 사용할 수 없습니다. 함수란? 자바스크립트에서 함수는 반복된 코드 실행을 줄여주는 역할을 하고, 재사용성이 좋습니다. 함수 정의 방법 1. 함수 리터럴 방식 function example(x, y){ return x+y; } function : 자바스크립트 함수 리터럴은 function으로 시작합니다. example : 함수명을 정의합니다. (x, y) : 매개변수 return x+y; : example 함수가 호출 됐을 때 실행되는 코드 부분입니다. 2. 함수 표현식 var example = functi.. 더보기
[javascript] 자바스크립트 프로토타입 자바스크립트 프로토타입 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있습니다. 부모 객체의 프로퍼티를 마치 자신의 것 처럼 쓸 수 있는 것 같은 특징이 있습니다. 자바스크립트에서 이러한 부모 객체를 프로토타입 객체라고 부릅니다. 객체 생성 및 프로토타입 객체 사용 var obj = { name: 'new', age: 22 }; console.log(obj.toString()); // "[Object Object]" (출력) 객체를 생성하였고, 객체의 부모 객체 즉, 프로토타입인 toString() 메서드를 이용해서 객체를 출력해봤습니다. obj 객체의 toString() 문자열로 변환해서 출력을 해보니 [Object Object] 문자열로 출력이 되는 것을 확인 할 수 있습니다. .. 더보기
[javascript] 참조 타입의 특성 - 객체 값 참조 자바스크립트 참조 타입의 특성 기본 타입과는 다르게 참조 타입은 값을 변수에 넣어주는 것이 아니라 값을 참조하는 것이다. 참조한다는 것이 처음에는 어떤 느낌인지 정확히 이해를 하지 못합니다. 예를 들어서 쉽게 표현 해보도록 해보겠습니다. var objA = { value: 40 }; var objB = objA; console.log(objA.value); // 40 (출력) console.log(objB.value); // 40 (출력) objB.value = 50; console.log(objA.value) // 50 (출력) console.log(objB.value) // 50 (출력) 위와 같이 objA 변수와 objB 변수가 동일한 객체를 가르키는 참조값을 가지게 되어서 같은 값을 출력하는 것을.. 더보기
[javascript] 자바스크립트 참조 타입 (객체 타입) 자바스크립트 참조 타입 자바스크립트에서 숫자, 문자열, 불린값, null, undefined 같은 기본 타입을 제외한 모든 값을 객체입니다.따라서 배열, 함수, 정규표현식 등 모두 객체로 표현됩니다. 참조타입인 객체는 하나의 값만 가지는 것이 아닌 여러 개의 프로퍼티들을 포함할 수 있습니다. 또한, 객체의 프로퍼티는 함수로 포함할 수 있으며, 자바스크립트에서는 프로터피를 메서드라고 부릅니다. 객체를 생성하는 방법 3가지는 예시로 보여드리겠습니다. 1. Object()를 이용한 객체 생성 var newObj = new Object(); newObj.color = 'red'; newObj.backgroundColor = 'blue'; console.log(newObj) // { color: 'red', ba.. 더보기
[javascript] 자바스크립트 기본 타입 ( 숫자, 문자열, 불린값, null, undefined) 자바스크립트의 첫 발걸음인 데이터 타입부터 알아봅시다. 데이터 타입을 먼저 알아야 하는 이유는 어떤 언어 든 간에 기본적으로 타입을 알아야 변수를 선언할 수 있습니다. 자바스크립트에는 기본 타입과 참조 타입으로 나뉘는데 일단 먼저 제일 기본적인 기본 타입을 알아봅시다. 자바스크립트 기본 타입 1. 숫자 var intNum = 10;// 정수형 숫자 선언 var floatNum = 0.1;// 실수형 숫자 선언 2. 문자열 var strText = 'strText';// singleQuote 문자열 선언 var doubleStrText = "doubleStrText";// doubleQuote 문자열 선언 3. 불린값 var isBool = true; // boolean 값 선언 4. null / unde.. 더보기
[javascript] substring(),indexOf() 문자열 추출과 문자열 찾기 오늘은 문자열 추출을 위해서 자주 쓰는 substring() 함수와 indexOf() 함수를 알아보겠습니다. 제가 실무에서 자바스크립트를 이용해서 웹 개발할 때 자주 사용하는 함수인데요. 진짜 진짜 유용하게 쓰입니다. 일단 예제를 통해서 어떻게 사용하는지 알아볼게요 1. substring() 함수로 문자열 추출하기 var stringText = 'abcdefg'; var subText = stringText.substring(0,3); console.log(subText); // 'adcd' 가 출력 되는 것을 알 수 있습니다. 여기서 stringText 변수에 'abcdefg' 문자열을 선언했습니다. 그리고 subText 변수에 substring() 함수를 사용하여 문자열 0번째부터 3번째까지 추출해낼.. 더보기
[javascript] 자바스크립트 for 문, for in 문, forEach 문 - 반복문 편 자바스크립트 반복문 가장 중요하고 유용하게 쓰이는 반복문에 대해서 알아 보려고 합니다. 일단 반복문은 어떤상황에서 쓰일까요? 순차적으로 값을 증가시키거나, 반복되는 코드를 쓰기 위해서 반복문을 사용합니다. 1. for 문 예시) length가 숫자인 경우에 사용 가능합니다 const length = 5; for(let i = 0; i < length; i++){ // i 값이 0 부터 순차적으로 값이 1씩 증가 후 length의 값 5보다 작은 4일 때 반복문은 멈추게 됩니다. console.log(i); 0 1 2 3 4 // 정상적으로 5번이 찍힌 콘솔 } 2.. for in 문 예시) 1. Array 값이 있는 경우 2. Object 값이 있는 경우 // Array 일 때 const array = .. 더보기
[javascript] document.getElementById('') document 직접 접근에 대해서 알아보도록 하겠습니다. Jquery라는 라이브러리를 사용하시면 더 편하게 그리고 더 짧은 코드로 같은 접근을 할 수 있습니다. 하지만 제가 보여드리는건 Jquery를 사용하지않고, 자바스크립트를 처음 접근 하시는분들에게 알려드리기 위함 입니다. html 부분 테스트 코드 원하는 아이디 타겟으로 잡기 (스크립트 부분) 타겟에 값 넣기 타겟 스타일 바꾸기 등... javascript에서 직접 DOM을 접근해서 기본적인 DOM을 변경하고 다루는 작업들을 알아보았습니다. 더보기

티스토리툴바