organize/자바스트립트 8

자바스크립트 7

문서 객체 모델 DOM(Document Object Model)웹에서 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 함모든 정보 요소를 자바스크립트로 가져와 프로그래밍할 때 사용자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM 트리웹 문서의 요소를 부모 요소와 자식 요소로 구분 html(root)head         bodymeta title부모와 자식 구조로 표시하면 나무 형태가 되므로 DOM 트리라고 함DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 하며,DOM 트리의 시작 부분인 html 노드를 나무 ..

자바스크립트 6

BOM자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 때문에 특정한 사이트로 이동, 새 탭 열기 등 브라우저와 관련된 여러 가지 효과를 만들 수 있음웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어냄웹 브라우저가 열리면 window 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타남window 하위에는 document, navigator, history, location, screen 객체가 존재window : 브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중에서 최상위에 존재document : 웹 문서마다 하나씩 있으며 body 태그를 만나면 만들어짐. HTML 문서의 ..

자바스크립트 5

객체객체(Object) 프로그램에서 인식할 수 있는 모든 대상자바스크립트에서는 웹 과 관련된 대상을 모두 객체로 인식자바스크립트의 객체문서 객체 모델(DOM)웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체. 일반적으로 웹 문서에 삽입하는 document, image, link 객체 등브라우저 관련 객체(BOM)웹 브라우저에서 사용하는 정보를 객체로 나타냄사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등내장 객체웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 함 객체의 인스턴스 만들기객체를 참조 형태로 사용해야 함. 객체가 아..

자바스크립트 4

재사용할 수 있는 함수입력을 바꿔 여러 번 사용할 수 있는 성질을 함수의 '재사용성'이라고 함 매개변수함수를 실행하는 데 필요한 값을 함수 밖에서 제공하는 것함수 안에서만 사용 return결괏값을 함수 밖에서 사용하려면 함수를 실행한 위치로 돌려줘야함. 이러한 동작을 값을 반환한다(return)고 함함수의 결괏값을 반환할 때 return을 사용해서 넘겨줄 값을 지정해주면 됨  인수(argument)함수 선언이 끝났다면 실행할 함수를 호출해야함. 매개변수가 있는 함수를 호출할 때 실제 값 부분을 인수라고 함  매개변수 기본값 지정ES6부터 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능도 생김  함수표현식익명함수이름이 없는 함수, 익명 함수를 선언할 때는 이름을 붙이지 않음익명..

자바스크립트 3

함수동작해야 할 목적대로 묶은 명령을 함수(function)alert() 함수와 같이 자바스크립트에 미리 만들어 놓은 함수를 '내장 함수'라고 함 함수를 사용하는 기본적인 방법은 함수를 만들 때 이름을 붙이고 필요할 때마다 함수 이름을 사용해 실행함수가 어떤 명령을 처리할지 미리 알려주는 것을 함수를 선언한다, 함수를 정의한다 라고 함함수를 선언하는 것만으로 함수가 실행되지 않음. 함수를 선언한 후 따로 실행하는 코드를 작성해야함함수를 사용하는 것을 함수를 호출한다, 함수를 실행한다 라고 함 함수명([변수])함수 선언과 실행 순서 : 웹 브라우저에서 자바스크립트 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석. 원하는 어느 곳에 함수를 선언해 놓기만 하면 선언한 위치와 상관없이 함스를 실행할 수..

자바스크립트 2

변수(variable)프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터↔ 값을 한 번 지정하면 바뀌지 않는 데이터를 상수(constant)변수 선언 규칙변수를 사용하려면 변수를 구별할 수 있도록 이름을 붙여 주어야 하는데, 이것을 변수 선언변수 선언var || let || const 변수명  자료형컴퓨터가 처리할 수 있는 자료의 형태. 데이터 유형, 데이터 타입, 데이터형이라고도 함기본 유형(숫자형, 문자열, 논리형), 복합 유형(배열, 객체), 특수 유형(undefined, null) 숫자형(number)따옴표 없이 숫자로만 표기ex) var currentYear = 2024;정수 : 소수점이 없는 숫자실수 : 소수점이 있는 숫자ex) var PI = 3.14;자바 스크립트에서는 실수를 정..

자바스크립트 1

자바스크립트가 하는 일웹에서 자바스크립트는 동적이고 인터렉티브한 기능을 구현하는데 사용DOM 조작 : HTML 문서의 구조를 실시간으로 수정하고 업데이트이벤트 처리 : 사용자의 입력을 처리하고 이에 반응비동기 요청(AJAX) : 서버와 비동기적으로 데이터를 주고받아 페이지 새로고침 없이 동적으로 콘텐츠를 업데이트애니메이션 : 페이지 내 요소에 애니메이션 효과를 추가클라이언트 측 유효성 검사 : 사용자가 입력한 데이터를 실시간으로 검증하여 오류를 미리 감지상태 관리 및 로직 처리 : 페이지 내 상태를 관리하고, 사용자 인터페이스에 맞게 동적인 로직을 처리즉, 웹 페이지를 더 동적, 반응형으로 만들어 사용자 경험을 향상시키는 핵심적인 역할 웹 브라우저와 자바스크립트웹 문서 안에서 태그로 자바스크립트를 작성..

728x90