Web/JAVASCRIPT45 자바스크립트 function 문법 사용법 HTML 내부에 JavaScript 함수 작성 함수적용 사례 살펴보기 알림창 입니다. 알림창 보여주기 알림창 입니다. 알림창 보여주기 2023. 7. 12. 동적 UI만들기 (alert) [ UI를 만드는 단계 ] 1. HTML/CSS로 미리 UI를 디자인한다. 2. 만든 디자인을 숨김처리한다. display: none; 3. 필요할 때 숨김처리를 해제하는 코드를 작성한다. (JavaScript) display: block; Alert 박스 만들기 index.html 알림창 입니다. 알림창 보여주기 알림창 숨기기 main.css /* STEP 02 */ .alert-box{ background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } 응용해보기 드롭다운 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 .dropdown-box{ background-color: lightgray; border-rad.. 2023. 7. 11. HTML에서 JS를 포함하는 방법 1. head 내부 : head에 js파일 포함시키기 [head 내부 방법] 1. html 위에서 아래로 읽는다. (html parsing) 2. script 태그를 발견 시 읽던 html을 멈추고 JavaScript 파일을 다운 받아 실행한다. 3. 다시 html 위에서 아래로 읽는다. (html parsing) ⚠️ 이 방법은 좋은 방법은 아니다.⚠️ JavaScript 파일이 크면 다운 받는데 속도가 오래 걸리고 그렇게 오래 걸리게 되면 웹사이트가 사용자에게 노출되는 시간이 오래 걸리기 때문이다. 2. body 끝 : body 맨 끝에 script 파일을 포함시키는 것 [body 맨 끝 방법] 1. html 위에서 아래로 모두 읽는다. (html parsing) 2. html을 모두 읽어 페이지 준.. 2023. 7. 9. [DOM] 제어 대상 찾기 0. NodeList란? : 대상 찾기 메소드의 값으로 반환되는 객체이다. : html문서와 같은 문서 내의 모든 노드를 리스트 형태로 저장하고 있다. 1. getElementsByTagName : 문서 내에서 특정 태그에 해당되는 객체를 반환한다. : getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. HTML CSS JavaScript 만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 된다 HTML CSS JavaScript HTML CSS JavaScript 2. getElementsByClassName : 문서 내에서 특정 클래스 이름에 해당되는 객체를 반환한다. HTML CSS Java.. 2023. 7. 5. Document Object Model(DOM) : 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. : window 객체의 document 프로퍼티를 통해서 사용할 수 있다. : window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 2023. 7. 5. [BOM] 창 제어 1. Window open : window.open 메소드는 새 창을 생성한다. 첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다. 두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다. _blank는 새 창을 의미한다. 창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다. 세번재 인자는 새 창의 모양과 관련된 속성이 온다. 2. 새창에 접근 2023. 7. 4. [BOM] Navigator 객체 1. Navigator 객체란? : 브라우저의 제품명, 버전 등을 제공하는 객체이다. 주로 호환성 문제를 위해서 사용한다. 브라우저에 따라서 짜놓은 코드가 다르게 행동할 수 있다. 따라서 이때 JavaScript는 해당 브라우저에 따라서 작동하도록 해줄 필요가 있다. 그때 사용하기 위한 객체가 Navigator객체이다. 2. Navigator객체의 기능들 console.dir(navigator); // 전체 프로퍼티에 접근 console.dir(navigator.appName); // 특정 프로퍼티에 접근 위의 코드로 Navigator 객체의 모든 프로퍼티를 열람할 수 있다. App Name 웹브라우저의 이름이다. IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nesca.. 2023. 7. 4. [BOM] Location 객체 1. Location 객체란? : 현재 브라우저 창에 열려있는 문서의 url을 알려주는 객체이다. 2. 문서의 주소정보 알아내기 console.log(location.href); // 현재 윈도우의 문서가 위치하는 URL을 알아내는 방법 console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash) //url을 필요에 따른 조각으로 나눠서 알아내는 방법 http://127.0.0.1:5500/Location/location.html?id=10#bookmark location.protocol: 통신규약, 사용자가 서버에 접속할 때 어떤 방식으로 통신할 지 정의 locat.. 2023. 7. 3. [BOM] 전역객체 Window 전역객체 Window : 모든 객체가 속한 객체이며, 전역객체이다. : 창이나 프레임을 의미한다. 전역객체라는 의미는 만약 전역변수를 선언한다면 Window의 프로퍼티이고 함수를 선언한다면 Window의 메소드가 된다는 의미이다. 아래의 코드를 보면 전역변수를 호출한 것과 window객체의 프로퍼티를 호출한 것과 같은 결과와 같은 것들을 보여준다. 2023. 7. 3. Browser Object Model(BOM) Browser Object Model 이란? : 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것이다. : 예를 들어 현재 열려있는 웹사이트의 URL을 알아내는 것, 현재 동작하고 있는 웹 브라우저의 제품명등을 담아내도록 도와주는 것이 바로 BOM이다. 2023. 6. 30. HTML에서 JavaScript 로드하기 1. inline : 태그에 직접 자바스크립트를 기술하는 방식 장점 태그에 연관된 스크립트가 분명하게 드러난다. 단점 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다. 2. script : 태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식 장점 html과 js 코드를 분리할 수 있다. 3. 외부파일의 분리 : js를 별도의 파일로 분리할 수도 있다 장점 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다. 캐쉬를 통해서 속도 향상, 전송량의 경량화를 도모할 수 있다. [file.html] [file.js] var hw = document.getElementById('hw'); hw.addEventListener(.. 2023. 6. 29. [JavaScript] 행변환 prompt로 입력 받은 값은 문자형이다. 그렇기 때문에 숫자를 입력 받아도 90이 아닌 "90"이 된다. const mathScore = prompt("수학은 몇점인가요?"); // "90" const engScore = prompt("영어는 몇점인가요?"); // "60" const result = (mathScore + engScore) / 2; // "90" + "60" = "9060", "9060" / 2 = 4530 console.log(result); 여기서 "9060" / 2가 연산이 되었던 이유는 자동 행변환 덕분이다. 오류를 발생시킬 수 있기 때문에 자동으로 시스템에서 형변환을 시킨겄이다. 행변환은 아래의 3가지가 있다. 1. String() 괄호 안의 타입을 문자열로 변경해준다. 2... 2023. 4. 20. [JavaScript] alert, prompt, confirm 1. alert alert: 알려줌 (사용자와 상호작용보다는 통보느낌) 2. prompt prompt: 입력을 받음 (사용자에게 어떤 값을 입력받아 값을 사용함.) const name = prompt("이름을 입력하세요."); alert("반갑습니다. " + name + "님!"); prompt는 아래와 같이 인수를 두개 입력해주면 기본 값을 미리 입력해 놓을 수도 있다. const name = prompt("이름을 입력하세요.", "홍길동"); alert("반갑습니다. " + name + "님!"); 3. confirm confirm: 확인을 받음 해당 confirm에 대한 답변은 boolean값으로 받을 수 있다. const isNice = confirm("반가우신가요??"); if (isNice =.. 2023. 4. 10. [JavaScript] 자료형 https://www.youtube.com/watch?v=KF6t61yuPCY 1. 문자형 String 문자형은 아래와 같이 3가지 방식으로 작성할 수 있다. const name1 = "Mike"; const name2 = 'Mike'; const name3 = `Mike`; 만약 기호로 작은 따옴표(')를 사용하려면 큰 따옴표(")를 사용하던가 슬래쉬(\)와 함께 사용해야한다. const message1 = "I'm a boy."; const message2 = "I\'m a boy."; 2. 변하는 String 값 출력 선언한 상수 값을 String 값에 넣어서 출력하기 위해서는 `와 ${}를 사용해야한다. const name = "Mike"; const age = 30 const message1 =.. 2023. 4. 8. [JavaScript] 변수 1. 변수 선언 아래와 같이 변수를 선언할 수 있다. 변수를 선언할 때는 ;를 마지막에 사용해주어야한다. name = "Mike"; age = 30; 2. 변수에 접근 alert() //경고창을 띄우는 함수 console.log //로그를 띄우는 함수 위의 사진과 같이 사용할 수 있다. ⚠️ 하지만 여러 사용자가 협업할 때 위와 같이 변수를 사용하는 것은 위험할 수 있다. 마지막에 선언된 변수의 값으로 적용될 수 있기 때문이다. ⚠️ 따라서 아래의 키워드를 사용해 해당 부분을 방지할 수 있다. 3. let, const let: 선언 후 다른 값으로 변경 가능한 값 const: 선언 후 다른 값으로 변경 불가능한 값 (상수라는 것을 알리기 위해서 대문자로 변수명을 작성하는 것이 좋다.) 4. 변수와 관련된.. 2023. 4. 8. 이전 1 2 다음
