목록Front-end/Vanilla JS (54)
NULL
var man ={ name:"asd", age: 18, height:180 }; 위와 같이 객체를 선언하며, 객체 정의 시 속성이름 : 값 형태로 정의합니다. 객체 속성을 얻어오는 방법은 방법1 객체이름.속성 man.name 방법2 객체이름["속성"] man.["name"] 주의사항 방법2 같은 경우 대괄호안에 문자열 따옴표를 넣어줘야한다. 객체속성을 변경하는 방법은 변수와 동일하다.
var a = "ads", b = 20, c = true; console.log(a, typeof(a)); console.log(b, typeof(b)); console.log(c, typeof(c)); typeof를 쓰면 데이터를 확인할수있다.
var name = prompt("이름을 입력하세요"); console.log(name,"님 환영합니다."); prompt로 값을 입력받을수 있다. prompt는 사용자로부터 받은 문자열을 데이터형으로 갖는다. 따라서 정수나 실수로 데이터를 변환하려면 parseInt, parseFloat을 사용하면된다. var value = prompt("값을 입력하세요"); console.log(value, typeof(value)); var value_int = parseInt(value); console.log(value_int, typeof(value_int)); var value_float = parseFloat(value); console.log(value_float, typeof(value_float)); ..
// 슬라이드 초기값 var slideIndex = 1; // 시작시 실행되는 showSlides()함수 slideIndex = 1 showSlides(slideIndex); // 양 옆 화살표 onclick 함수 // Next/previous controls function plusSlides(n) { // n값을 불러와 slideIndex의 값에 더한 후 showSlides함수를 실행 showSlides(slideIndex += n); } // 버튼 클릭시 실행되는 함수 // Thumbnail image controls function currentSlide(n) { // n값을 불러와 slideIndex의 값에 대입한 후 showSlides함수를 실행 showSlides(slideIndex = n)..
if(!localStorage.getItem('name')) { setUserName(); } else { var storedName = localStorage.getItem('name'); myHeading.textContent = 'Mozilla is cool, ' + storedName; } 사용자가 null이나 공백을 입력하였는지 체크하는 코드입니다. !localStorage.getItem('name')에 값이 없다면 setUserName() 함수를 실행시킵니다. 값이 존재한다면 스토리지에 있는 값을 불러오고 헤딩의 textContent로 문자열과 storedName 변수값을 출력합니다.
var myButton = document.querySelector('button'); var myHeading = document.querySelector('h1'); 새로 추가된 버튼과 제옥을 참조하여 변수에 저장합니다. function setUserName() { var myName = prompt('Please enter your name.'); localStorage.setItem('name', myName); myHeading.textContent = 'Mozilla is cool, ' + myName; } prompt는 사용자가 데이터를 입력하도록 요청하는 것이고 사용자가 입력한 데이터를 변수에 저장합니다. 브라우저에 데이터를 저장하고 나중에 불러올 수 있도록 해주는 localStorage라..
var myImage = document.querySelector('img'); myImage.onclick = function() { var mySrc = myImage.getAttribute('src'); if(mySrc === './images/img.jpg') { myImage.setAttribute ('src','./images/img2.png'); } else { myImage.setAttribute ('src','./images/img.jpg'); } } var myImage 변수에 img를 저장합니다. 이미지를 클릭하면 함수를 실행시킵니다. var mySrc 변수에 src값을 가져온다. 그리고 if문으로 조건이 맞다면 img2.png를 불러오고 아니라면 img.jpg를 불러온다. 이렇게 하..

이벤트 이벤트는 브라우저에서 발생하는 일에 대해 반응하는 코드입니다. 클릭 이벤트를 예로 들자면 document.querySelector('html').onclick = function() { alert('Ouch! Stop poking me!'); } html을 클릭할 시 해당 알림창을 띄웁니다. 이 외에도 다양한 이벤트와 요소에 이벤트를 붙이는 방법이 많습니다. 사진과 같이 두 가지 방법으로 이벤트를 사용할 수 있습니다. 효과는 동일합니다.