[JavaScript] 제어문

1. 조건문1) if-else문자바스크립트에서 if-else문은 true일때 if의 블록을 실행하고, false일때 else의 블록을 실행하는 조건문입니다.그래서 조건은 true인지 false인지만 확인합니다.예제를 통해 자세히 알아보겠습니다. let result = true;//result = false;//실행문이 한줄밖에 없을 경우 실행블록({})을 생략가능if (result) console.log('참입니다.'); //출력else console.log("거짓입니다.") //출력안됨위 코드를 실행해보면 참입니다. 가 출력되는 것을 볼 수 있습니다. result 변수를 false로 변경하면 거짓입니다가 출력됩니다. 실행문이 두줄이상일 경우에는 아래처럼 실행블록을 반드시 넣어야합니다.let result..

• format_list_bulleted Javascript
• · 2024. 7. 21.
• textsms

[JavaScript] 함수

1. 함수의 의미와 사용방법자바스크립트애서 함수는 반복작업을 줄이기 위해 사용합니다.사용방법은 아래와 같습니다.function 함수명(인자1, 인자2,...){ return 반환값; // 반환값이 없으면 생략 가능} 아래 예제는 함수를 사용하지 않고 연산을 하는 방법입니다.let a =3;let b = 4;let c = (a +b)*(b+a)*a*b;console.log(c); //588let d = 5;let e = 6;let f = (d+e)*(e+d)*d*e;console.log(f); //3630 함수를 사용하지 않고 연산을 한다면 이렇게 매번 복잡한 연산을 해야합니다. 이번에는 함수를 사용하여 동일한 연산을 해보겠습니다.function cal(a,b){ return (a+b)*(b+a)*a*b;..

• format_list_bulleted Javascript
• · 2024. 7. 21.
• textsms

[JavaScript] 블록과 스코프

자바나 자바스크립트 등의 언어에서는 블록안에서 프로그램이 실행됩니다. 즉, 아래 형식으로 동작합니다.{ //실행문}이 블록안의 범위를 스코프라고 합니다. 즉, 영향을 미치는 범위라고 할 수 있습니다. 이해를 돕기 위해 예제를 살펴보겠습니다{ const x = 'Hello'; let y = 'world!'; console.log(x, y); //Hello world!}console.log(x); //에러 발생console.log(y); //에러 발생위 코드는 스코프 안에서 변수가 선언된 것입니다.위 코드를 실행해보면 {}안에서의 console.log는 실행되는 반면 {} 바깥의 console.log는 에러가 발생하는 것을 확인할 수 있습니다. 왜냐하면 {}안과 {}바깥은 스코프가 다르기 때문입니다. ..

• format_list_bulleted Javascript
• · 2024. 7. 18.
• textsms

[JavaScript] 자료형과 연산자

1. typeoftypeof 메소드는 타입을 반환해주는 메소드입니다. 리턴 값으로는 문자열로 타입을 반환합니다.자바스크립트는 동적타입을 지닌 언어이기 때문에 즉각적으로 자료형을 확인하는것이 불가능합니다. 따라서 이 메소드를 사용하여 자료형의 타입을 확인합니다. 사용방법은 아래와 같습니다.typeof 변수2. boolean1) 선언과 표현boolean은 참과 거짓. 두가지 값만 존재하는 자료형입니다. 즉 반환값으로는 true, false밖에 없습니다. 이러한 boolean 자료형은 주로 제어문에 사용합니다. const x = true;console.log(x, typeof x); //true 'boolean'const y= 1 > 2;console.log(y, typeof y); //false 'boole..

• format_list_bulleted Javascript
• · 2024. 7. 16.
• textsms

[JavaScript] 변수와 상수

자바스크립트는 동적 타입이기 때문에 변수나 상수를 선언할 때 타입을 사용하지 않습니다.주로 변수를 선언할때는 var나 let을 사용하고 상수를 선언할 때는 const를 사용합니다.그러나 모던 자바스크립트에서는 var를 사용하지않고 let을 사용합니다. 왜냐하면 let은 같은 변수명으로 중복선언이 불가능한 반면에 var는 중복선언이 가능하기 때문에 문제가 발생할 수 있기 때문입니다. 1. let선언하는 방식은 아래와 같습니다.//변수 선언let x;console.log(x); //undefined//초기화x = 1;console.log(x); //1//변수 선언과 동시에 초기화let y = 1;console.log(y); //12.constconst 키워드의 특징은 선언만 하는 것이 불가능하며 한번 초기화..

• format_list_bulleted Javascript
• · 2024. 7. 15.
• textsms

[JQuery] 웹 class속성 제어

1. addClass()요소에 class 속성을 추가하는 메소드입니다. 실행 분류형식추가 $("div").addClass("클래스명");콜백 함수 $("div").addClass(function(index, className){     // index는 각 div 요소의 index 0,1,2     // className은 각 div의 class 속성     return ​class 속성 // 각 div에 class 속성을 추가한다. }); ................ 내용1 내용2  내용3  [추가설명] [CSS] display 속성설명inline 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 이나 , 태그 등을 들 수 있습니다.block 전후 줄바..

• format_list_bulleted JQuery
• · 2024. 7. 15.
• textsms

[JQuery] 웹요소 제어

1. $text() 실행 분류형식취득 $("div").text();생성, 변경 $("div").text("텍스트 생성 및 변경");콜백 함수 $("div").text(function(index, t){     // index는 각 div 요소의 index 0,1,2     // t는 각 div 요소의 텍스트 "내용1","내용2","내용3"     return 텍스트 // 각 div 요소의 텍스트를 생성, 변경할 수 있다. }); ................ 내용1 내용2  내용3   ex) jQuery html css javascript결과2. $html() 실행 분류형식취득 $("div").html();생성, 변경 $("div").html("텍스트 생성 및 변경");콜백 함수 $("div").html..

• format_list_bulleted JQuery
• · 2024. 7. 15.
• textsms

[JQuery] 배열

1. 배열 $.each() - index, value결과 2. 배열 $.each() - key, value결과결과 3. 배열 $(selector).each()내용1내용2내용3결과4. 배열 $.map()$.map() 메서드는 $.each() 메서드와 동일한 기능을 가지고 있다.  차이점은 매개 변수의 순서가 서로 반대이며, $.map() 메서드의 경우 기존의 배열을 이용하여 새로운 배열( 예를 들어 조건문을 이용해서 출력문의 배열을 재정렬 )을 만들 수 있지만, $.each() 메서드는 만들 수 없다.  * 수정,추가 부분에서 .map() 메서드 대신 .each() 메서드를 사용하면 조건문을 무시 return 실행되어 배열을 그대로 출력된다.   결과 [수정,추가]결과

• format_list_bulleted JQuery
• · 2024. 7. 15.
• textsms

[JQuery] 선택자

1. 기본선택자선택자 종류설명 태그 선택자 $("p") p요소를 선택합니다. id 선택자 $("#pkt") id = "pkt" 요소를 선택합니다. class 선택자 $(".logo") class = "logo" 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") class = "gnb" > ul 태그 > li 요소를 선택합니다. 하위 선택자 $("#gnb ul") class = "gnb" 안에 존재하는 ul 요소를 선택합니다. 인접 선택자 $("#aa + #bb") #aa 다음에 오는 #bb 요소를 선택합니다. 형제 선택자 $("#aa ~ #cc") #aa 의 형제 요소 #cc 선택합니다. 종속 선택자 $("div.util") div 요소중 class가 util인 요소를 선택합니다. 그룹..

• format_list_bulleted JQuery
• · 2024. 7. 15.
• textsms

[JQuery] JQuery 연결방법

Query를 사용하기 위해서는 jQuery 라이브러리를 웹페이지에 연결해서 사용해야 합니다.​jQuery 라이브러리를 연결하는 방식으로는 직접 다운로드 방식과 CDN (Centent Delivery Network)방식이 있습니다.​현재 1.x, 2.x, 3.x 버전을 지원해 주고 있으며 각 버전별로 브라우저 지원이나 기존 메서들의 지원 여부 등의 차이가 있습니다.​jQuery 라이브러리 3.0 버전에서 지원하는 브라우저는 아래와 같습니다.Internet Explorer 9 이상Chrome, Edgh, Firefox, Safari 현재 버전Opera 현재버전Safari Mobile iOS 7 이상Android 4.0 이상​1. Download 방식https://jquery.com/download/ - 접속..

• format_list_bulleted JQuery
• · 2024. 7. 15.
• textsms