전체 게시글376 [Javascript] getElementById() / getElementsByTagName() / getElementsByName() / 접근 및 제어 먼저, 3가지 메서드에 대해서 이론적인 내용부터 알아보겠습니다. getElementById()란? 태그에 있는 id 속성을 이용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 메서드입니다. 해당 id가 없는 경우 null 에러가 발생합니다. document.getElementById(id); getElementsByTagName()란? 주어진 태그 이름을 가진 요소를 반환합니다. getElementsByTagName(name) getElementsByName()란? 문서에서 주어진 속성을 가진 요소를 반환합니다 . getElementsByName(name) id , name을 가진 button이 있다고 가정해보겠습니다. 저는 button에 onclick 이벤트를 추가해보겠습니다. 이에 접근 및 .. 2022. 9. 25. [Javascript] <select> 태그 / <option> 태그 / selectedIndex / 초기값 선언 / options / value 출력 / onclick() 이벤트 다음과 같은 옵션 항목이 있다고 가정해보겠습니다. 옵션 항목을 위와 같이 출력하기 위해서는 아래와 같은 코드를 작성할 수 있습니다. 사과 수박 딸기 참외 배 그렇다면, 사용자가 선택한 옵션 항목에 대해서 정보를 얻고 싶을때는 어떻게 하면 될까요? 첫번쨰로는, 선택한 항목에 대한 실행문을 출력해보겠습니다. button에 onclick 이벤트를 ckeckfrm() 함수가 실행되게끔 설정해놨습니다. 그렇다면 함수를 이런식으로 작성할 수 있습니다. console 출력 selectedIndex 속성이란? select 태그에서 선택된 값의 위치 또는 순서 index를 알기 위해서 사용하는 속성이며, 선택된 태그의 index 넘버를 반환해줍니다. 두번쨰로는, 선택한 항목에 대한 text를 출력해보겠습니다. "내용확인.. 2022. 9. 25. [Javascript] 소문자 이름을 입력받아서 이름의 첫 글자를 대문자로 출력 / split() / for of문 / substring() / toUpperCase() / 소문자 이름 입력 대문자 이름 출력 전체 소스코드 2022. 9. 25. [Javascript] text 박스에 두 수를 입력하면 덧셈을 해주는 함수 / trim() / return / parseInt / onclick() / 덧셈 전 덧셈 후 전체 코드 + = 2022. 9. 25. [Javascript] <form> 태그 사용 시 접근 방식 / forms 객체에 관해서 / 태그에 대해서는 이전 포스팅을 참고해주세요. [HTML] form / 서버 / 클라이언트 / GET과 POST의 차이에 대해서 / method: get / method: post 폼 (form) 로그인을 위해서 아이디/비밀번호를 입력할 때나 회원가입을 하기 위해서 개인정보를 입력할 때 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때 폼을 이용해서 서버에 전송합니 starting-coding.tistory.com 우선 forms 객체에 대해서 알아보겠습니다. 태그는 자바스크립트를 통해 접근, 제어할 수 있습니다. forms[] 배열은 폼 자체로 배열로 참조되어 집니다. 배열의 순서는 구성 요소의 순서와 마찬가지로 HTML 내에서 기술된 순서와 동일하게 0번부터 참조되어집니다. 배열로 참조된 폼 내의 .. 2022. 9. 25. [Javascript] window.onload() 함수 사용 / 콜백함수 / addEventListener() widow.onload() 함수 자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백함수이며, 웹 페이지의 모든 요소들이 로드된 후 호출되며, 웹 페이지에서 여러번 사용해도 window.onload() 함수는 하나만 적용됩니다. 이를 대체할 수 있는 방안은 글 아래쪽에 작성해보겠습니다. 아래와 같이 코드를 작성했습니다. Hello world 위와 같은 코드의 실행순서는 자바스크립트의 document.getElementById( 'pTag1' )가 p 태그의 id인 pTag1이 생성되기 전에 실행되므로 에러가 발생하며, style.color.blue가 적용되지 않습니다. 에러 내용을 단어를 통해 뜻을 유추해본다면 정의되지 않은 개체의 속성을 읽을 수 없다.하려고 한다. 그렇다면 페이지가 로드되면 .. 2022. 9. 24. 이전 1 ··· 47 48 49 50 51 52 53 ··· 63 다음
