JavaScript / Object / Element.getAttribute() / 요소의 속성 값을 가져오는 메서드
.getAttribute()
.getAttribute()는 선택한 요소(element)의 특정 속성(attribute)의 값을 가져옵니다.
문법
element.getAttribute( 'attributename' )
예를 들어
var jb = document.getElementById( 'xyz' ).getAttribute( 'title' );
는 id의 값이 xyz인 요소의 title 속성 값을 변수 jb에 저장합니다.
예제
id의 값이 abc인 a 요소의 href 속성의 값을 가져와서 출력합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p><a id="abc" href="https://www.codingfactory.net">Coding Factory</a></p>
<script>
var jbHref = document.getElementById( 'abc' ).getAttribute( 'href' );
document.write( '<p>href : ' + jbHref + '</p>' );
</script>
</body>
</html>
JavaScript / Object / document.querySelector() / 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드
.querySelector() .querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다. 문법 document.querySelector( 'selector' ) 예를 들어 document.querySelector( '.xyz' ) 는 클래스 값이 xyz인 첫번째 요소에 접근합니다. 예제 1 클래스 값으로 abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...
JavaScript / Object / Array.indexOf(), Array.lastIndexOf() - 일치하는 요소의 위치(인덱스)를 반환하는 메서드
.indexOf() .indexOf()는 주어진 값과 일치하는 요소의 인덱스를 반환하는 메서드입니다. 문법 array.indexOf( value, start ) value : 찾으려는 값을 넣습니다. start : 검색을 시작할 인덱스 값입니다. 생략 가능하고, 생략했을 경우 값은 0입니다. 일치하는 원소가 있다면 인덱스를 반환합니다. 여러 개 있으면 처음 원소의 인덱스를 반환합니다. 없다면 -1을 반환합니다. 예제 배열 원소의 인덱스는 0부터 시작합니다. 즉, 첫번째 원소의 인덱스는 0, 두번째 ...
CKEditor는 JavaScript 기반의 WYSIWYG 에디터이다. 어떻게 설정하고 사용하는지 간략하게 알아본다. Modern JavaScript rich text editor with a modular architecture. Its clean UI and features provide the perfect WYSIWYG UX for creating semantic content. CKEditor에는 Classic editor, Inline editor, Balloon editor, Balloon block editor, Document editor 다섯 가지의 타입이 있는데, 아래의 예는 모두 ...
한 줄 주석 한 줄 주석은 //로 만듭니다. // single line comment // 앞은 코드로 처리하고, // 뒤는 주석으로 처리합니다. 예를 들어 var jb = 'hi'; // Comment 라고 var jb = 'hi';는 코드로 인식합니다. 여러 줄 주석 여러 줄을 주석으로 만들 때는 /*와 */로 둘러쌉니다. /* Comment 1 Comment 2 */ 읽기 좋게 다음과 같은 모양으로 만들기도 ...
JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수
Number() Number()은 문자열을 숫자로 변환하는 함수입니다. 문법 Number( object ) object : 문자열 또는 문자열을 값으로 하는 변수 등을 입력합니다. 숫자로 변환할 수 없는 값인 경우 NaN을 반환합니다. 예제 변수 c의 값은 문자 1과 문자 2를 더한 12입니다. 변수 d의 값은 숫자 1과 숫자 2를 더한 3입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / Plugin / Swiper / 슬라이더 플러그인
Swiper는 널리 사용되는 슬라이더 플러그인 중의 하나입니다. 다양한 옵션을 제공하며, 해상도에 따라 다른 옵션을 줄 수 있어 반응형 사이트에 사용하기 좋습니다. 홈페이지 : https://swiperjs.com/ GitHub : https://github.com/nolimits4web/swiper Swiper는 IE를 지원하지 않습니다. 만약 IE 지원이 중요하다면, IE를 지원하는 Swiper 구 버전을 사용하거나 다른 슬라이더를 사용하세요. 기본 사용법 스크립트 파일과 CSS 파일을 연결합니다. 다음은 CDN을 이용하여 연결하는 코드입니다. <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <link ...
JavaScript / 요소 추가하기 / .createElement(), .createTextNode(), .appendChild()
자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다. .createElement() .createTextNode() .appendChild() .createElement()는 요소를 만듭니다. 예를 들어 .createElement( 'h1' ) 은 다음과 같은 코드를 생성합니다. <h1></h1> .createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어 .createTextNode( 'My Text' ) 는 My Text라는 문자열을 만듭니다. .appendChild()는 선택한 요소 안에 자식 요소를 추가합니다. 다음은 Click이라는 텍스트를 가진 button 요소를 추가하는 예제입니다. <!doctype html> <html ...
JavaScript / Object / String.length / 문자열의 길이 반환하는 속성
.length .length는 문자열의 길이를 반환하는 속성입니다. 문법 string.length 예를 들어 'abcd'.length 는 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( '<p>"1234".length : ' + '1234'.length + '</p>' ); document.write( '<p>"".length : ' + ''.length + '</p>' ); document.write( '<p>"한글".length : ' + '한글'.length + '</p>' ...
가장 기본적인 조건문은 if입니다. 하지만 조건식에서 비교할 값이 많다면 코드가 길어지고 가독성이 떨어진다는 단점이 있습니다. 이럴 땐 switch를 사용하는 것이 좋습니다. 문법 switch ( condition ) { case value1: statement1; break; case value2: statement2; break; ... ...
JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드
.includes() .includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드이다. IE는 Edge부터 지원한다. 문법 string.includes( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 검색을 시작할 위치이다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abzcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z' ) zcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z', 2 ...