JavaScript
-
[DOM] JavaScript를 사용하여 CSS 선택자를 활용한 HTML 태그 조작JavaScript 2023. 10. 26. 10:05
querySelector 함수와 CSS 선택자 JavaScript의 'querySelector' 함수는 CSS 선택자를 사용하여 HTML 태그를 선택하는 데 사용됩니다. CSS 선택자는 HTML 요소를 선택하는데 도움이 되며, 여러 가지 선택자 중에서 기본 선택자, ID 선택자, 클래스 선택자 등이 있습니다. 예를 들어 '#output'는 ID가 'output'인 HTML 태그를 선택합니다. let output = document.querySelector("#output"); 위 코드는 ID가 "output"인 HTML 태그를 선택하여 'output' 변수에 저장합니다. HTML 내용 변경 및 스타일 조작 선택한 HTML 태그를 통해 내용을 변경하거나 스타일을 조작할 수 있습니다. 'innerHTML' ..
-
[DOM] DOM과 JavaScript를 사용하여 HTML 태그 스타일 변경하기JavaScript 2023. 10. 26. 09:48
DOM(Document Object Model) HTML문서의 구조를 표현,웹브라우저에서 HTML 태그를 조작하는 데 중요한 역할을 함. javaScript를 사용하여 DOM을 조작하면 웹페이지의 내용을 동적으로 변경하고 스타일을 조절할 수 있습니다. 이글에서는 JavaScript의 'querySelector' 함수와 'style' 속성을 사용하여 HTML 태그의 배경색을 변경하는 해보겠습니다. querySelector 함수 JavaScript에서 'querySelector' 함수는 HTML 태그를 선택하고 조작 하는데 사용됩니다. 이 함수는 css 선택자와 유사한 방식으로 태극를 선택합니다. 사용법은 다음과 같습니다. document.querySelector("태그").style.속성 = "값"; "태..
-
[JavaScript] 자바스크립트 화살표 함수JavaScript 2023. 10. 17. 11:07
화살표 함수 화살표 모양 함수, 간략한 함수 표기(함수 축약 버전) 일반함수 let func = function(arg1,arg2,arg3 ... argN){ return expression }; 화살표 함수 let func = (arg1,arg2,arg3, ... argN) => expression 화살표 우측을 평가하고 결과를 반환(return) 일반 함수 => 화살표 함수 let sum1 = function(a,b) { return a + b; }; // 위 함수를 화살표 함수로 변경 let sum2 = (a,b) => a + b; alert( sum1(1,2)); // 3 alert( sum2(1,2)); // 3 인수가 하나밖에 없으면 소괄호 생략 가능 let double = n => n *2 ..
-
[JavaScript] 자바스크립트 함수JavaScript 2023. 10. 17. 10:26
함수표현식 함수를 특별한 종류의 값으로 취급, 다른 언어에서는 동작으로 규정 함수 선언문 function sayHi(){ alert("Hello"); } 함수 표현식 함수는 값이므로 변수처럼 취급 let sayHi = function() { alert("Hello"); }; function sayHi(){// 함수 생성 alert("Hello"); } let func = sayHi;// 함수 복사 func();//hello sayHi();//hello 콜백 함수 함수를 매개변수로 전달해서 나중에 상황에 따라 호출되는 함수 function ask(question, yes, no){ if (confirm(question)) yes() else no(); } function showOk(){ alert("동의..
-
[JavaScript] 자바스크립트 Number 객체JavaScript 2023. 10. 16. 17:43
Number 객체 자바스크립트에서의 실수 표현 : 8byte 1 - 1. 진법표현 : 값 지정 -자바스크립트에서는 기본적으로 10진법을 사용하여 수를 표현 -하지만 0x 접두사를 사용하여 16진법으로 수를 표현할 수도 있다. var x = 0xAB; // 16진법으로 표현된 10진수 171 var y = 29; // 10진법으로 표현된 10진수 29 x + y; // 두 수 모두 10진법으로 자동으로 변환되어 계산됨 1 - 2. 진법표현 : toString() - 숫자에 toString() 메소드를 사용하여 해당 숫자를 여러 진법의 형태로 변환할 수 있다. var num = 256; num.toString(2); // 2진법으로 변환 : 100000000 num.toString(8); // 8진법으로 변..
-
[JavaScript] 자바스크립트 객체JavaScript 2023. 10. 13. 17:16
객체 실생활에서 우리가 인식할 수 있는 사물로 이해 주로 자바스크립트에서는 이름(name)과 값(속성,메소드)로 구성 ex) 객체의 예 객체 고양이 프로퍼티(property) cat.name = "나비" cat.family = "코리안 숏 헤어" cat.age = 0.1 cat.weight = 300 메소드(method) cat.mew() cat.eat() cat.sleep() cat.play() 객체의 프로퍼티 참조 실생활에서 우리가 인식할 수 있는 사물로 이해 주로 자바스크립트에서는 이름(name) 과 값(속성,메소드)로 구성 // 문법 객체이름.프로퍼티이름 또는 객체이름["프로퍼티이름"] 객체의 생성(메모리 로딩) 1. 리터럴 표기법을 통해 객체 생성 이름과 값을 콜론(:) 으로 연결, 쉼표로 다른..
-
[JavaScript] 자바스크립트 함수JavaScript 2023. 10. 12. 09:25
함수 : 메소드 특별한 목적을 수행하도록 정의된 독립적인 블록(중괄호로 묶인 부분) 필요할 때 마다 호출해서 반복 사용 가능 장점: 모듈 재사용, 코딩라인이 줄어듬 함수의 정의 함수의 이름 매개변수(인수) : 함수의 소괄호 안에 쉼표(,)로 구분, 중괄호 안에서 전달된 값을 변수로 사용 중괄호{} : 안에 실행문이 존재 function 함수이름(매개변수1, 매개변수2,...){ 함수가 호출되었을 때 실행하고자 하는 실행문; } 함수의 반환 함수에서 실행된 결과를 반환함, 보통 반환된 결과값을 변수에 저장함 값으로서의 함수 변수에 함수를 저장해서 사용 가능 function 함수명(매개변수) { 실행문; } var fun = 함수명; document.write(fun(매개변수)); // 변수 fun를 함수처..
-
[JavaScript] 자바스크립트 기타 제어문JavaScript 2023. 10. 11. 17:15
기타 제어문 : coninue; 보통 반복문 내에서 특정 조건에 대한 처리를 제외하고자 할 때 자주 사용 continue; continue 라벨이름; 기타 제어문 : break; 루프 내에서 표현식의 판단 결과에 상관없이 반복문을 완전히 빠져나가고 싶을때 사용 break; break 라벨이름; 기타 제어문 : label: continue 문과 break문의 동작이 프로그램의 흐름을 특정 영역으로 이동시킬 수 있음 label: 식별하고자 하는 영역