본문 바로가기

WEB37

[JS] 자바스크립트 함수 표현식 함수 : 코드 집합 선언적 함수, 즉시 실행 함수 함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다. 함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다. 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었습니다. // 함수 선언문 방식 function 함수() { document.write('함수_01'); document.write('함수_02'); }; // 함수 표현식 var result = (function() { return 10 + 20; }()); console.log(result);// 30 var result = (function(a, b) { return a + b; }(10, 20)).. 2022. 3. 16.
[JS] VSCode에서 JS 콘솔 실행하기 (node.js 설치) JS 코드 실습 진행 중 웹브라우저에 about:blank 로 확인하기보다 개발 환경의 콘솔 창에서 바로 확인하는 편이 나을 것 같아서 실행해보았습니다. Run Code 또는 Ctrl++Enter로 실행해보면 hello는 구경도 못 하고 이상한 문자열을 마주하게 되었습니다. node 어쩌구.. 터미널에서 node --version이라고 검색하면 node가 설치되어 있지 않는 걸 볼 수 있을 것입니다. 갑자기 node.js 를 설치하게 되었습니다! https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 저는 설치 폴더 위치를 변경.. 2022. 3. 12.
[JS] let과 constant 변수 자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프(scope)라고 합니다. - 로컬 변수(Local Variable) 한 함수 안에서만 사용할 수 있는 변수 - 전역 변수, 글로벌 변수(Global Variable) 스크립트 소스 전체에서 사용할 수 있는 변수 함수 안에서만 쓸 수 있는 지역 변수 var myVar = 100; test(); document.write("myVar is " + myVar); function test() { var myVar = 50; } test() 함수 밖에 변수 myVar가 100으로 선언되어 있고, test() 함수 내에서 myVar가 50으로 재선언되었습니다. 함수 내에서만 사용할 수 있는 지역 변수이기 때문에 test() 함수를 벗어나면 그.. 2022. 3. 12.
[CSS] 반응형 웹 미디어 쿼리 : 미디어 타입에 따라 CSS를 적용할 수 있는 기능 반응형 웹 : 웹 페이지 하나로도 데스크톱, 테블릿 등에 맞게 디자인이 자동으로 변경 → 미디어 쿼리 사용 뷰포트 설정 - meta 태그 : 웹 페이지에 추가 정보를 제공할 때 사용 - view port meta 태그 : name 속성에 viewport가 입력된 meta 태그 값 설명 예 width 화면 너비 width=240 height 화면 높이 height=800 initial-scale 초기 확대 비율 initial-scale=2.0 user-scalable 확대 및 축소 가능 여부 user-scalable=no minimum-scale 최소 축소 비율 minimum-scale=2.0 maximum-scale 최대 확대 비율 max.. 2022. 2. 11.
[JS] JQuery 라이브러리 JQuery 라이브러리 모든 웹 브라우저에서 동작하는 클라이언트용 자바스크립트 라이브러리 CDN 파일을 여러 서버에 분산시키고 사용자가 접속하는 지역과 가장 가까운 곳의 서버에서 파일을 전송하는 기술 JQuery 기본 JQuery 라이브러리 형태 $ ( 선택자 ) . 메서드 ( 매개변수, 매개변수 ) ; window.JQuery = window.$ = jQuery 속성 조작 attr() 문서 객체 속성을 조작할 때 사용하는 메서드 속성 추출 var src = $ (‘img’) . attr (‘src’) ; img 태그의 src 속성 추출 속성 지정 ① 속성 값을 입력해 지정하는 방법 attr() 메서드의 첫 번째 매개변수에 속성 이름을 입력, 두 번째 매개변수에 속성 값 입력 // 속성 값을 입력해 속성.. 2022. 2. 11.
[JS] 문서 객체 모델 문서 객체 모델의 정의 Document Object Model을 줄여 DOM으로 표기하는 문서 객체 모델은 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법이다. 문서 객체 HTML 태그를 자바스크립트에서 사용할 수 있는 객체 노드 요소 노드와 텍스트 노드로 구분 텍스트 노드를 갖지 않는 태그 : 정적 생성 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것 동적 생성 웹 페이지 실행 중에 자바스크립트를 사용해서 문서 객체를 생성하는 것 웹페이지 실행 순서 아래는 오류 코드임! Process - 1 Process - 2 웹 브라우저가 위쪽에서 아래쪽으로 코드를 실행하기 때문에 script 태그에서 h1과 h2를 찾을 수 없다. 따라.. 2022. 2. 11.