목록Front-end (103)
NULL
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을 클릭할 시 해당 알림창을 띄웁니다. 이 외에도 다양한 이벤트와 요소에 이벤트를 붙이는 방법이 많습니다. 사진과 같이 두 가지 방법으로 이벤트를 사용할 수 있습니다. 효과는 동일합니다.
함수
함수는 코드의 집합을 나타내는 자료형이며 함수를 변수에 할당 또는 리턴 할 수 있습니다. 위와 같이 매개변수로 받아서 실행마다 재사용할 수도 있으며 괄호안에 콤마로 구분한다.
조건문
코드리뷰를 하자면 iceCream 값이 참이라면 Yay, I love chocolate ice cream!을 알림으로 출력하고 거짓이라면 Awwww, but chocolate is my favorite...를 알림 출력합니다.
