김코드의 웹디자인 세상

이번시간에는 DOM Attribute에 대해서 알아보겠습니다. 사용자가 브라우저에 입력하는 데이터는 DOM요소의 value 속성에 저장이 됩니다. 이 데이터를 사용하기 위해서는 DOM요소에 대한 접근을 한 후 해당 요소의 속성 정보에 접근해야 합니다. 그렇기에 이번에는 DOM요소에 접근하여 요소가 가지고 있는 속성을 읽고, 변경하는 방법에 대해서 알아보겠습니다. ✏ getAttribute() getAttribute 함수는 HTML요소의 속성 정보를 가져올 수 있습니다. 그럼 예제로 unput type="text" 요소에 사용자가 입력한 데이터를 가지고 오는 코드를 만들어 보겠습니다. ✏ setAttribute() 버튼을 disabled 처리했다가 풀어줍니다. 저장 ✏ hasAttribute() HTML요..

안녕하세요! 오늘은 자바스크립트의 연산자 중 동등연산자와 일치연산자에 대해서 알아보고 그 둘의 차이점을 알아보겠습니다! 1. 동등연산자 동등연산자는 (==)으로 표기하며 비교하는 값을 비교하는 연산자입니다. 그 말은 왼쪽의 값과 오른쪽의 값이 틀리면 false로 동일하면 true로 불린 데이터로 반환합니다. 그러나 동등연산자는 데이터타입을 구분하지 않고 불린데이터로 반환합니다. 2. 일치연산자 일치연산자는 (===)으로 표기하며 비교하는 값의 데이터타입을 함께 비교하는 연산자입니다. 비교하는 값이 동일하더라도 한쪽이 문자데이터(string)이고 비교하는 데이터값이 숫자데이터(numder)이면 false 거짓으로 반환합니다. 그렇기에 이 둘의 차이점은 데이터타입까지 구분의 유무를 보시면 되겠습니다. und..

안녕하세요! 오늘은 내장 객체를 배워보면서 응용으로 프로그램을 만들어보았습니다. Math.random함수를 사용하여 만들어보았네요! Math.random함수로 특정 범위의 랜덤 한 정수 값을 생성시켜 반환하는 함수입니다. function getRandomInteger(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min; } 위의 함수는 랜덤 정수값에 대한 최솟값과 최댓값을 파라미터로 전달하면, 최솟값과 최댓값 사이의 정수를 반환하는 함수입니다. 이 함수를 기반으로 코드를 작성해보았습니다 function getRandomInteger(min, max) { return Math.floor(Math.random() * (max - min +..

안녕하세요! 요즘은 자바스크립트 내의 내장 객체에 대해서 공부 중입니다. string 객체에 대해서 공부하던 중... length 함수를 보고 생각이 나서 이렇게 시작하게 되었습니다. 그렇기에 오늘은 바닐라 자바스크립트를 사용하여 글자 수를 세는 프로그램을 만들어보겠습니다. ☝ vanilla JavaScript 바닐라 자바스크립트란? 플러그인이나 라이브러리를 사용하지 않은 순수 자바스크립트를 말합니다. 그럼 시작해볼까요? 먼저 HTML과 CSS를 설정해둡니다. 저는 오늘은 자바스크립트를 중점적으로 다루고 싶었기 때문에 HTML과 CSS는 가장 기본적으로 설정해두었습니다. ✏ HTML ⌨ 글자 수 세기 확인 textarea에 커서가 깜박거리는 효과를 넣고 싶어서 autofocus를 넣어보았습니다. ✏ CS..