목록WEB (20)
jennet1 님의 블로그
1. 문자열 길이 구하기 package Pool;public class ch01 { public static void main(String[] args) { // TODO Auto-generated method stub // 문자열 길이 String str = "Hello world"; System.out.println(str.length()); }} 출력11 2. 문자열 비교 (같은지 다른지)equals() : 두 문자열이 정확히 동일한지 비교equalsIgnoreCase() : 대소문자 구분 없이 비교package Pool;public class ch01 { public static void main(String[] args) { // TODO Auto-generated method..
jQuery란? - javascript 라이브러리로 더 간편하게 사용하기 위해 만들어졌다. 주로 DOM,이벤트,애니메이션,AJAX 요청 등을 쉽게 할 수 있게 도와준다. jQuery와 javaScript 의 차이점1. 코드 간결성 : 일반적인 javascript 복잡한 작업을 간단하게 처리할 수 있다. 즉 짧은 코드로 처리가 가능하다2. 호환성 : 브라우저 호환성을 처리해주기 때문에, 다양한 브라우저에서 동일하게 작동하는 코드를 쉽게 작성이 가능하다.javaScript 는 브라우저 별로 코드가 다르게 작동할 수 있어 호환성 문제가 발생할 수 있다.3. 기능 : ajax,애니메이션,이벤트 핸들링 등을 간단하고 효율적으로 구현이 가능한 함수들이 내장되어있다.JavaScript:document.getEleme..
value와 innerText 를 다뤄보자 각 속성의 차이와 언제 사용하는지 알아보자1. value 어디에 사용?: 주로 input,textarea,select 와 같은 폼 요소에 사용됩니다.역할: 사용자가 입력한 값 또는 프로그램matically 설정한 값을 다룹니다.input 값을 변경하려면 value 사용해야함 값 자체는 value 속성에 저장되기 때문이다. 2. innerText어디에 사용?: 주로 div,span,p 와 같은 일반 HTML 요소에 사용됩니다.역할: 해당 태그 내의 텍스트 내용을 다룹니다. 이 속성은 태그 안에 있는 순수 텍스트를 변경하거나 가져올 때 사용됩니다.기본 텍스트 input,textarea 같은 태그는 value 를 사용하고div나 span 의 텍스를 수정하고 싶은 경우..
- Event Listener : 사용자 상호작용을 처리하는 중요한 요소이다. 클릭,입력,마우스 움직임 등다양한 이벤트가 발생할 때 특정 작업을 수행할 수 있게 한다. Event Listener 구조는 다음과 같다.element.addEventListener(event, function, useCapture);element : 이벤트를 동작할 HTML 요소event : 발생할 이벤트 종류 ("click"."keydown")function : 이벤트가 발생했을 때 실행될 함수자주 사용하는 이벤트 click: 요소가 클릭되었을 때 발생mouseover: 마우스가 요소 위로 올려졌을 때 발생keydown: 키보드에서 키가 눌렸을 때 발생submit: 폼이 제출되었을 때 발생input: 사용자가 입력 필드에 텍..
1. rand 함수란?- 임의의 정수를 반환하는 함수, 주어진 범위 내에서 무작위 값을 생성한다.Math.random() 함수 : 0 과 1 사이의 소수 값을 반환한다.let randomValue = Math.random();console.log(randomValue); // 예: 0.123456789정수로 출력하기 위해 추가적인 작업이 필요하다 1~10 사이의 정수 생성let randomValue = Math.floor(Math.random() * 10) + 1;console.log(randomValue); // 1부터 10까지의 정수 출력 Math.floor() : 소수점 아래를 버리고 Math.random() * 10은 0부터 9.9999..까지의 값을 반환해서1부터 10까지의 랜덤값을 얻을 수 있..
children ? childrenNodes ?- DOM 에서 부모 요소의 자식 요소를 가져올 때 사용한다. 둘다 반환하는 값이나 활용하는 상황이 다르니 차이점을 이해해 보자1. children 부모 요소의 자식 요소들 중 HTML 요소만 반환한다.태그 요소들만 가져옴 , 텍스트나 노드 주석은 다 무시한다.반환 값은 HTMLCollection 입니다. foreach 문을 사용할 수 없지만 for(basic) 가능하다. Text div 두번째 Text div 세번째 Text 2. childNodes부모 요소의 모든 자식 노드를 가져온다.HTML 요소뿐만 아니라 노드,공백,주석 등 모든 노드를 반환한다.NodeList 배열이 아니지만, 대부분 forEach 문 사용이 가능 ..
InnerHTML, innerText, textContent HTML * 요소의 내용을 가져오거나 수정하는 방식인 3가지 방법에 대해 알아보자 1. InnerHTML 기능 : 요소의 HTML 코드를 포함한 내용을 가져오거나 수정할 떄 사용한다.HTML 태그와 태그 안에 내용을 모두 포함한다.HTML을 추가할 때 문자열로 작성된 HTML 태그가 그대로 랜더링 된다.보안에 주의해야한다. 사용자 입력을 InnerHTML 로 삽입하면 XSS 공격의 위험이 있다// 안녕하세요!const exampleDiv = document.getElementById('example');// innerHTML을 사용해 HTML 태그와 내용을 모두 가져옴console.log(exampleDiv.innerHTML); // "안녕하..
1. DOM 개념 소개DOM이란: HTML 문서의 구조를 계층적으로 표현한 모델입니다. 문서를 트리 구조로 표현하여, 각 요소(태그)를 객체로 다룰 수 있게 합니다.DOM과 JavaScript: JavaScript를 이용해 DOM을 조작하면 웹 페이지의 동적인 변화를 실시간으로 구현할 수 있습니다.2. DOM 접근 방법document.getElementById(): ID로 요소를 찾는 방법.document.querySelector()와 querySelectorAll(): CSS 선택자를 사용해 요소를 선택하는 방법.document.getElementsByClassName()와 document.getElementsByTagName(): 클래스명과 태그명을 통해 여러 요소를 선택하는 방법. Text..