video 태그 muted 설정하기 HTML5 에서 video 태그가 추가됨으로써 동영상을 쉽게 삽입할 수 있게 되었다. video 태그에는 몇 가지 속성 값을 정할 수 있다. autoplay, controls, muted 등이 있다. : 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, 요소가 사용자 경험에 좀 더 적합합니다. developer.mozilla.org controls 해당 속성을 명시하면 소리 조절, 동영상 탐색, 일시 정지 및 재시작 기능을 지원하는 컨트롤러 버튼을 제공한다. 컨트롤러 버튼을 사용해서 동영상을 음소거 할 수 있다. ..
JavaScript에서 타임 리프 변수 사용하기 타임 리프를 사용하여 html 파일 작성 시 일반적인 이와 같이 th:inline을 명시해준다. 이후 자바 스크립트 코드는 모두 /**/로 묶어주어야 한다. 따라서 첫 줄에 /**/를 작성해주었다. 또한 타임 리프 변수인 ${paging.page}도 /*[[]]*/로 묶어주어야 하기 때문에 /*[[ ${paging.page} ]]*/라고 작성하였다.
Object.defineProperty https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty Object.defineProperty() - JavaScript | MDN The static method Object.defineProperty() defines a new property directly on an object, or modifies an existing property on an object, and returns the object. developer.mozilla.org 객체의 동작을 재정의하는 메서드이다. Object.defineProperty(대상 객체,..
왜 나만 졸려하는걸까.. 나도 뭘 마셔야되나.. JavaScript (JS) DOM (Document Object Model) 예제 예제 1 - 버튼 클릭으로 style 바꾸기 스타일 DOM으로 변경 스타일 변경 하기 const style에 div.style을 저장하고, const color에 style.color를 저장하였는데 이렇게 하지 않고 그냥 div.style.color로 하여도 되긴하다. 위 방법처럼 button에 바로 onclick을 주어도 되고, 이벤트 리스너를 추가해도 된다. 스타일 DOM으로 변경 스타일 변경 하기 button 클릭 시 EventListener가 동작한다. 위 코드와는 다르게 button에 onclick을 주지 않았다. 예제 2 - className 값 1 값 2 값 3..
JavaScript (JS) Closer (클로저) 지역 변수를 외부에서도 참조(By Reference)할 수 있는 함수 함수 중첩을 이용해 함수 호출이 종료되더라도 그 함수의 지역 변수 및 지역 변수 체인 관계를 유지할 수 있는 구조를 갖는다. 내부에 선언된 함수 객체가 반환되어 계속 유지되는 상태 -> 그 함수 객체에 딸린 [[scope]]에서도 참조를 계속 유지하는 상태 부모 함수가 종료된 후에도 부모 함수의 Variable(Activation) Object는 가비지 콜렉팅 되지 않고 유지된다. 간단하게 생각하면 자바의 캡슐화와 유사하다고 생각하면 된다. 밖에서 사용하지 못하도록 감추는 것이다. function func() { var x = 1; return { increase : function(..
호이스팅(Hoisting) 스코프 안에 있는 선언들을 모두 스코프의 최상위로 끌어올리는 것이다. 선언문들을 미리 실행하는 것이라 생각하면 된다. 실제 메모리에서는 변화가 없다. var 키워드나 함수 선언문 같은 경우는 코드 실행 전 자바스크립트 내부에서 미리 변수를 선언하고 undefined로 초기화를 해놓는다. let 키워드, const 키워드와 함수 표현식도 호이스팅이 발생하긴 하나 변수를 선언만 해놓을 뿐 초기화하지 않는다. 초기화는 변수 선언문을 만났을 때 수행한다. 이때 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간을 Temporal Dead Zone(TDZ)이라 한다. 예제 1 console.log(typeof(funcHello)); console.log(typeof(func..
JavaScript 비교 연산자 script 언어는 equals()가 없고 연산자로만 표현한다. == 는 기존 equals()와 동일하다. ===와 !==는 타입까지 비교할 때 사용한다. 특수 연산자 delete 객체(Object), 개체의 속성(Property), 배열의 특정 인덱스에 있는 원소를 지우는 연산자이다. var 키워드로 선언된 변수는 삭제할 수 없다. delete가 실행 가능하면, 속성이나 원소가 undefined로 설정된다. 이때 배열의 길이에는 변화가 없다. 실행이 가능하면 true를 반환하고, 실행이 불가능하면 false를 반환한다. 정의할 필요 없이 한 번 쓰고 버리는 변수나 함수 같은 경우 delete 연산자 사용 시 메모리 관리에 효율적이다. in 저장된 객체에 해당되는 속성이 ..
JavaScript (JS) ECMAScript 브라우저에서 사용되는 JS 같은 것들은 모두 ECMAScript를 토대로 한다. 옛날 JS는 브라우저마다 함수와 기능이 달랐었다. 그래서 ECMAScript 명세에 맞추어 만들기로 하였고, 이게 표준이 되었다. use strict 모드 자바스크립트의 장점은 자유롭다는 거지만 이게 단점으로 적용하여 디버깅하기가 힘들 수 있다. use strict 모드를 사용하면 문법 검사를 브라우저 자체에서 타이트하게 해 준다. JavaScript 자료형 Boolean 타입 논리 요소를 나타낸다. true와 false 두 가지 값이 존재한다. Null 타입 null 하나의 값만을 가질 수 있다. Undefined 타입 값을 할당하지 않은 변수가 가지는 타입이다. Null 타..
jQuery 메소드 정리 클래스 관련 // name이라는 id를 가진 태그에 up이라는 클래스 추가 $('#name').addClass('up'); // name이라는 id를 가진 태그에 down이라는 클래스 제거 $('#name').removeClass('down'); // name이라는 id를 가진 태그에 up이라는 클래스가 없으면 추가, 있으면 제거 $('#name').toggleClass('up'); // item에 down이라는 클래스가 있으면 true, 없으면 false 리턴 $("#name").hasClass('down'); 속성 관련 // 이미지 태그의 src 속성 받아오기 $('img').attr('src'); // 이미지 태그의 src 속성 지정하기 $('img').attr('src',..
String charAt() let str = 'String'; console.log(str.charAt(3)); 특정 인덱스의 문자를 받아올 수 있다. indexOf() 문자열 내에 찾는 문자(또는 문자열)가 포함되어 있는지 알 수 있다. 포함되어 있다면 해당 문자열이 시작되는 문자의 인덱스 값이 반환되고, 포함되어 있지 않다면 -1이 반환된다. let str = 'Index Of Of'; console.log(str.indexOf('d')); console.log(str.indexOf('Of')); lastIndexOf() indexOf와 같은 기능을 하지만, 문자열의 뒤에서부터 찾는다. let str = 'Index Of Of'; console.log(str.lastIndexOf('Of')); su..
