효니 TIL

웹 콘솔에서 "Hello world' 출력하기웹 콘솔은 현재 로드된 웹 페이지에 대한 정보를 표시하고,현재 페이지에서 Javascript표현식을 실행하고 테스트할 수 있습니다. 웹 콘솔을 열기 위해서는윈도우와 리눅스의 경우 Ctrl+Shift+I 맥에서는 Cmd-Option-K, Firefox에서는 기타 도구 메뉴를 열고 "웹 개발자 도구"를 선택합니다. 웹 콘솔을 열고 "Hello world"을 출력해 보세요.console.log("Hello world"); 콘솔에서 실행되는 코드 스니펫(재사용 가능한 코드)이 서로 상호 작용하지 않도록 해야 합니다.(ex: 한 콘솔 실행에서 생성된 항목이 다른 콘솔 실행에 사용되는 경우)

연산자 우선순위a 연산자1 b 연산자2 c연산자 1과 연산자 2의 자리에는 아무 연산자나 넣을 수 있습니다. 두 연산자의 우선순위(아래 표 참고)가 다를 경우, 우선순위가 높은 연산자가 먼저 실행되고 결합성은 영향을 미치지 않습니다. console.log(3 + 10 * 2); // 23을 출력console.log(3 + 10 * 2); // 23을 출력, 괄호는 불필요함console.log((3 + 10) * 2); // 26을 출력, 괄호로 인해 실행 순서가 바뀜위 예제에서는 덧셈이 곱셈보다 먼저 쓰였음에도 곱셈의 우선순위가 높기 때문에 먼저 실행됩니다. a = b = 5; // a = (b = 5);와 같음대입 연산자는 대입된 값을 반환하므로 a와 b의 값이 5가 됨을 예상할 수 있습니다.b =..

Javascript에서 사용되는 연산자 몇 가지를 알아보겠습니다. 1. 산술 연산자2. 증가 및 감소 연산자 3. 문자열 연산자4. 대입 연산자5. 비교 연산자6. 논리 연산자7. 조건 (삼항) 연산자8. 단항 연산자9. 관계 연산자 **참고: 피연산자는 연산자에 의해 처리되는 데이터를 의미합니다.예를 들어, 숫자 두 개를 더하는 경우 두 숫자는 피연산자이고 "+"는 연산자입니다. 1. 산술 연산자산술 연산자는 두 개의 숫자 값(리터럴 또는 변수)을 피연산자로 받아서하나의 숫자 값을 반환합니다. 표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)입니다.(0으로 나눌 경우 Infinity를 반환하니 주의해야 합니다.)console.log(1 + 1); // add(추가)console...

변수에 저장할 수 있는 데이터 유형에 대해 몇 가지 알아보겠습니다. 1. 숫자(Number)2. 문자열(String)3. boolean4. 배열(Array)5. null6. undefined7. 객체(Objects)8. symbol(ES6에서 추가)9. 동적 타이핑(Dynamic typing) ** JavaScript에서는 데이터 타입을 확인하기 위해 typeof 라는 키워드를 사용합니다. 숫자(Number) 30과 같은 숫자 (정수라고도함) 나 2.456(부동소수점 또는 부동 소수점 숫자라고도 함) 같은 십진수 숫자를 변수에 저장할 수 있습니다. JavaScript는 일부 프로그래밍 언어처럼 숫자 유형에 따른 다른 데이터 유형을 가지고 있지 않습니다. 변수에 숫자 값을 대입할 때, 따옴표는 사용하지 ..

스코프란?변수에 접근할 수 있는 범위를 말합니다.스코프는 전역 스코프와 지역 스코프로 나눌 수 있는데전역 스코프(global scope)는 어디에서든 해당 변수에 접근이 가능합니다. (전역 변수)지역 스코프(local scope)는, 한정적인 범위에서만 해당 변수에 접근이 가능합니다. (지역 변수)지역 스코프에는 함수 스코프와 블록 스코프가 있습니다. 전역 스코프(global scope)let globalName = 'global name';{console.log(globalName);} //globalNameconsole.log(globalName); // globalName전역 스코프는 블록 밖에서 선언되므로블록 안 또는 블록 밖에서 출력해도 내용을 확인할 수 있습니다.전역 변수들은 웹페이지가 실행..

Javascript에서 변수를 선언할 수 있는 키워드는 let입니다.(ES6에 추가된 문법)let이전에는 var을 사용했지만 var 사용을 권장하지 않는 이유에 대해 알아보겠습니다. 변수 선언 후 중복 가능var name = 'Hyoni';console.log(name); //Hyonivar name = 'Bob'; //Bobconsole.log(name);var를 사용하면 이미 선언된 변수를 중복해서 선언할 수 있습니다. 선언되지 않은 변수 참조 가능console.log(age); // 출력: undefinedage = 4; // 값 할당var age; // 변수 선언정상적인 코드라면 변수를 선언하고 값을 할당한 뒤 출력해야 합니다. 위 코드는 출력했을 때 변수가 선언되어 있지만 값은 undefin..

input[type="number"] 오른쪽 화살표 없애기 ( 증가,감소 버튼) input 태그에 type="number"를 사용했을 경우 해당 태그에 포커스를 주면 우측에 숫자를 +1, -1 할 수 있는 화살표가 생성됩니다. 화살표를 제거하고 싶다면 아래 css코드를 추가해주면 됩니다./* Chrome, Safari, Edge, Opera */input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}/* Firefox */input[type=number] { -moz-appearance: textfield;} 이제 포커스를 줘도 화살표가 생성되지 않습니다.

마우스 이벤트 종류 click- 사용자가 해당 element를 클릭했을 때(버튼을 눌렀다가 떼었을 때) 발생 합니다. mousedown- 사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다.mouseup- 사용자가 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생합니다. dblclick- 사용자가 해당 element에서 마우스 버튼을 더블 클릭했을 때 발생합니다. mousemove- 사용자가 해당 element에서 마우스를 움직였을 때 발생합니다. mouseover- 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다. mouseout- 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다. mouseenter- 사용자가 마우스를 해..

🌵 HTML 라디오 버튼1 라디오 버튼2 🌵 CSS.rdo-group{ position:relative; display:flex; align-items: center; width:300px; height:40px;}input[type="radio"] { display: none;}input[type="radio"]+label { position: absolute; display: block; left: 50%; width: 20px; height: 20px; background: url('https://github.com/hy0ni/library/assets/99204321/87fb372e-3217-418a-864b-d2d2..

마우스 클릭 좌표 (clientX, offsetX, pageX, screenX의 차이점 알아보기)1. screenX, screenY2. pageX, pageY3. clientX, clientY4. offsetX, offsetY 1. screenX, screenY사용자 모니터 화면을 기준으로 좌표를 표시합니다.screenX: 사용자 모니터 화면의 왼쪽 상단 모서리 지점을 0으로 측정하여 x좌표 위치를 반환합니다.screenY: 사용자 모니터 화면의 왼쪽 상단 모서리 지점을 0으로 측정하여Y좌표 위치를 반환합니다. 2. pageX, pageY전체 문서를 기준으로 좌표를 표시합니다.스크롤바가 움직이게 되면 특정 지점의 pageY 좌표값도 변경 됩니다. 3. clientX,clientY사용자에게 보여지는 브..