JavaScript ForEach의 4가지 주요 문제점

JavaScript forEach 루프는 배열의 각 요소에 대해 함수를 실행하는 일반적인 방법입니다.그러나 forEach 루프를 사용하기 전에 forEach 루프와 관련된 4가지 주요 문제를 해결해야 합니다.이 글에서는 창의적인 예시의 맥락에서 각 문제를 살펴보겠습니다.그럼 더 이상 고민하지 말고… 바로 들어가 보겠습니다!1. 중단하거나 계속할 수 없음시작하기 전에 다음 JavaScript 프로그램을 살펴보겠습니다.const soliders: string[] = ["John", "Daniel", "Cole", "Adam"]soliders.forEach((soldier, index) => { soliders[index] = "Captain " + soldier})// [ "Captain John", "C..

• format_list_bulleted JavaScript
• · 2024. 6. 10.
• textsms

ES15(2024)의 5가지 놀라운 새로운 JavaScript 기능

올바른 형식의 유니코드 문자열이 기능은 JavaScript가 유니코드 문자열을 처리하는 방식을 개선하는 것을 목표로 합니다. 유니코드 문자열은 다양한 언어와 기호의 문자를 효과적으로 표현하는 데 필수적입니다. 이 업데이트는 다양한 JavaScript 환경에서 이러한 문자열을 일관되고 정확하게 처리할 수 있도록 보장할 것입니다.const sampleStrings = [ // 혼자 있는 대리자를 사용한 예시 "igor\uD800", // 선행 대리자 "igor\uD800komolov", // 선행 대리자 뒤에 텍스트 "\uDC00yourfuse", // 후행 대리자 "your\uDC00fuse", // 후행 대리자 뒤에 텍스트 // 잘 형성된 예시 "yourFuse", // 대리자 없이 일반적..

• format_list_bulleted JavaScript
• · 2024. 6. 10.
• textsms

당신이 알아야 할 Javascript의 강력한 7가지 팁

1. 문자열을 숫자로 변환하기자바스트립트에서 단항 연산자 +를 사용하면 쉽게 문자열을 숫자로 변환할 수 있다. 이것은 간단한 트릭에 불과하지만 몇몇 사람들은 이것을 알지 못한다.아래의 예시 코드를 보자:the_string = "123";console.log(+the_string);// 123the_string = "hello";console.log(+the_string);// NaN다만, 이것은 당신이 위에서 본 예시처럼 숫자로 이루어진 문자열에만 적용가능하다는 점을 명심해라.2. 숫자를 문자열로 변환하기자바스크립트에서 숫자를 문자열로 변환하는 것 또한 가능하다. 문자열 연결(string concatenation) 개념은 이 작업을 훨씬 쉽게 만들어준다.아래의 예시 코드를 보자:var converted_..

• format_list_bulleted JavaScript
• · 2024. 6. 10.
• textsms

jQuery가 지원하는 CSS 셀렉터들

jQuery가 지원하는 CSS 셀렉터들​*모든 요소와 일치​E1E1(태그명)인 모든 요소와 일치​E1.classE1(태그명) 요소의 클래스가 class와 동일한 요소와 일치​E1.#idE1(태그명) 요소의 id 어트리뷰트 값이 id와 동일한 요소와 일치​E1 E2E1 요소의 자식인 모든 E2(태그명) 요소와 일치​E1 > E2E1 요소 바로 아래 자식인 E2 요소와 일치​E1 + E2E1 요소의 바로 다음에 나오는 형제요소 E2와 일치​E1 ~ E2E1 요소의 다음에 나오는 모든 형제 E2와 일치​E1[attr]attr 어트리뷰트를 갖는 E1 요소와 일치​E1[attr=val]attr 어트리뷰트의 값이 val을 갖는 E1 요소와 일치​E1[attr^=val]attr 어트리뷰트의 값이 val 값으로 시작하..

• format_list_bulleted JavaScript
• · 2024. 6. 7.
• textsms

JavaScript 연산자

JavaScript 연산자연산자란 프로그래밍에서 쓰이는 기호들이다.1. 기초 산술 연산자2. 할당 연산자3. 비교 연산자4. 논리 연산자기초 산술 연산자 ( Arithmetic Operators )( 1 ) 사칙 연산자＋ : 두 값을 더한다.－ : 앞의 값에서 뒤의 값을 뺀다.× : 두 값을 곱한다./ : 앞의 값을 뒤의 값으로 나눈다.var a = 1;var b = 2;console.log(a+b); // 3변수의 값을 초기화 하여 a + b, a - b 로도 사용가능하고 a + 3, 5 + b 하나만 변수를 넣어서도 사용 가능하고 숫자만 넣어서도 사용이 가능하다.( Number 타입과 String 타입을 더 할수도 있는데 이럴경우에 값이 "String" 타입으로 나온다. )( 2 ) 나머지 연산자% ..

• format_list_bulleted JavaScript
• · 2024. 5. 13.
• textsms

JavaScript의 객체 구성, 객체 추가 / 수정 / 삭제 방법

JavaScript의 객체 구성1. JavaScript 내장 객체JavaScript 엔진이 구동되는 시점에서 바로 제공되고 JavaScript코드 어디에서든 사용이 가능하다.objectstringnumberdatearraymathboolean2. 브라우저 내장 객체브라우저 내장 객체도 JavaScript 엔진이 구동되는 시점에서 바로 제공 된다.브라우저 객체 모델 ( BOM )문서 객체 모델 ( DOM )3. 사용자 정의 객체사용자가 생성한 객체 객체 추가 / 수정 / 삭제 방법1. 객체 key 추가 / 수정/* 추가 */let obj = { name : '홍길동'};obj.age = 23; 또는 obj['age] = 23;/* 수정 */let obj = { name : '홍길동', age : 22..

• format_list_bulleted JavaScript
• · 2024. 5. 13.
• textsms

JavaScript 객체 타입 - 객체 ( object )

객체 ( object )객체는 데이터와 그 데이터에 관련한 동작 ( 절차, 방법, 기능 ) 을 모두 포함할 수 있는 개념적 존재이다. 이름 ( key ) 과 값 ( value ) 을 가지는 데이터를 의미하는 프로퍼티와 동작을 의미하는 메소드 ( method )를 포함할 수 있는 독립적 주체이다.객체의 선언JavaScript의 객체 선언은 2가지 방법이 있다.중괄호({})를 사용하여 만드는 방법 - 객체 리터럴 방식Object() 생성자 함수로 객체를 만드는 방법보통 첫 번째 방법이 일반적이다let obj = { name : '홍길동', age : 21}; // 선언과 동시에 할당obj.name = '홍길동';obj['name'] = '홍길동';obj.age = 21;let obj = new Objec..

• format_list_bulleted JavaScript
• · 2024. 5. 13.
• textsms

JavaScript 객체 타입 - 배열 ( array )

배열 ( array )배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용할 수 있다. 예를 들어 100개의 데이터를 처리해야 한다면 배열을 사용하지 않으면 100개의 변수가 필요하다. 그러면 코딩하기도 힘들고 코드량도 길어지기 때문에 배열을 이용하면 효율적으로 짤 수 있다. 자바스크립트 배열은 배열 내부의 데이터 타입이 서로 달라도 쓸 수 있고 배열의 크기가 동적으로 변할 수 있다. 배열안에 number, string, boolean, object, array 등 들어갈 수 있다.배열의 선언JavaScript의 배열 선언은 2가지 방법이 있다.대괄호([])를 사용하여 만드는 방법Array() 생성자 함수로 배열을 만드는 방법보통 첫 번째 방법이 일반적이다.var arr = [ '1', 2 'H..

• format_list_bulleted JavaScript
• · 2024. 5. 13.
• textsms

JavaScript 변수의 데이터 타입

변수의 데이터 타입데이터 타입 ( Data Type )는 프로그래밍 언어에서 사용할 수 있는데이터 ( 숫자, 문자열, 불리언 등 )의 종류를 말한다. 코드에서 사용되는 모든 데이터는 메모리에 저장하고 참조할 수 있어야 한다. 데이터 타입은 데이터를 메모리에 저장할 때 확보해야 하는 메모리 공간의 크기와 할당할 수 있는 유효한 값에 대한 정보, 그리고 메모리에 저장되어 있는 2진수 데이터를 어떻게 해석할 지에 대한 정보를 컴퓨터와 개발자에게 제공한다.기본 타입 ( primitive data type )booleannullundefinednumberstringsymbol ( ES6에서 추가 )객체 타입 ( object )objectarrayfunction기본 타입numberC나 Java의 경우 정수와 실수를..

• format_list_bulleted JavaScript
• · 2024. 5. 13.
• textsms

JavaScript 변수 ( Variable ) 란?

변수 ( Variable ) 란?변수는 ( 문자나 숫자 같은 ) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용한다. 여기에 담겨진 값은 다른 값으로 바꿀 수 있다. 변수는 컴퓨터의 메모리에 존재하는 공간이다. 값을 찾기 쉽게 할려고 이름을 붙여서 사용한다.변수 ( Variable ) 의 선언JavaScript 변수를 선언하는 방법에는 3가지가 있다.1. var2. let3. constES6 이전에는 변수를 선언하는 키워드가 var밖에 없었지만 ES6에서 let, const가 생겼다.var, let, const의 차이점첫 번째로 var는 함수 스코프이고 let, const는 블록 스코프이다.스코프 ( Scope ) 란?스코프 ( Scope )는 변수를 사용할 수 있는 유효 범위이다. JavaScr..

• format_list_bulleted JavaScript
• · 2024. 5. 13.
• textsms

JavaScript 주석

JavaScript 주석JavaScript 주석은 JavaScript 코드를 설명하고 더 읽기 쉽게 만드는 데 사용한다. 또 대체 코드를 테스트 할 때 실행을 방지하는 데 사용할 수 도 있다. 주석은 오류 검색을 위한 디버깅에 아주 좋다.// 한줄 주석/* 여러줄 주석*/

• format_list_bulleted JavaScript
• · 2024. 5. 13.
• textsms

JavaScript 출력문 ( output )

출력문 ( output )자바스크립트는 여러 방법을 통해 결과물을 웹 브라우저에 출력가능하다. 자바스크립트에서 사용할 수 있는 출력 방법은 여러가지가 있다.window.alert() 메소드document.write() 메소드console.log() 메소드HTML DOM 요소를 이용한 innerHTML 프로퍼티window.alert() 메서드브라우저 api 메서드 경고 대화 상자는 사용자의 확인을 제외한 다른 입력을 요구하지 않는 메세지를 전달할 때 사용별도의 대화 상자를 띄워 사용자에게 데이터를 전달. 그냥 다른거 다 필요없이 alert(내용); 써주면 끝이다. 내용안에 문자열 / 변수명 / 숫자형 뭐 여러가지를 넣을수 있다.document.write() 메서드웹 페이지가 로딩될 때 실행되면, 웹 페이지..

• format_list_bulleted JavaScript
• · 2024. 5. 13.
• textsms

JavaScript에서 선택자

1. 태그 선택자document.getElementsByTagName(태그명)[순서];태그는 같은 이름으로 여러개를 생성 할 수 있다.그래서 getElement가 아닌 getElements로 복수로 써준다.태그명을 넣을때는 ('div') 이런식으로 넣어주면 된다.여기서 마지막[순서]는 index 0번부터 시작이다 만약에 형제가 3개가 있을경우 3번째를 선택해줄때는 2를 넣으면 된다.2. 클래스 선택자document.getElementsByClassName(클래스명)[순서];클래스도 태그와 마찬가지로 같은 이름으로 여러개를 생성 할 수 있다.그러므로 위 코드에서 복수인 getelements를 사용한다.클래스명을 넣을때는 ('logo') 이런식으로 넣어주면 된다.그리고 여러개 이기때문에 맨 뒤에 [순서] 즉..

• format_list_bulleted JavaScript
• · 2024. 5. 13.
• textsms

JavaScript 사용 방법 - 내부,외부 스크립트

HTML과 CSS로 만들어진 웹 페이지에 생동감을 불어넣기 위해 만들어진 객체기반의 스크립트 프로그래밍 언어 따로 C, C++처럼 컴파일 없이 한줄 한줄 해석하며 바로 명령어를 실행하는 인터프리터 언어 HTML의 특정 요소를 선택하여 다양한 이벤트 ( 마우스 클릭, 키보드 입력 등 )에 따라 어떤 동작을 하도록 기능을 넣을 수 있다.JavaScript 사용 방법1. 내부 스크립트자바스크립트 코드는 ＜script＞태그를 HTML문서안에 넣어서 사용 가능하다. HTML문서의 어느위치에서나 사용 가능한데 보통 HTML문서가 전부 로드 되고 나서인 ＜body＞ 아래에 사용한다. ( 주로 간단한 스크립트나 테스트용으로 사용한다. )2. 외부 스크립트자바스크립트 파일을 HTML과 별개인 .js 확장자의 파일로 저장..

• format_list_bulleted JavaScript
• · 2024. 5. 13.
• textsms