자바스크립트_기본

 

 

자바스크립트 : 

버튼을 눌렀을때의 동작 설정

자료가 입력될때 동작 설정

html, css는 변수, 함수 등을 사용하지 않았으나 자바스크립트 언어에서는 사용함 

 

//만약 조건문 
let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite...");
}

//함수생성 
function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

multiply(4, 7);


//함수 호출 
let myVariable = document.querySelector("h1");

//경고문 호출
alert("hello!");

//클릭 이벤트 
document.querySelector("html").onclick = function () {
  alert("Ouch! Stop poking me!");
};

//이미지를 클릭하면 이미지가 바뀌는 이벤트 
let myImage = document.querySelector("img");

myImage.onclick = function () {
  let mySrc = myImage.getAttribute("src");
  if (mySrc === "images/이미지1번.png") {
    myImage.setAttribute("src", "images/이미지2번.png");
  } else {
    myImage.setAttribute("src", "images/이미지1번.png");
  }
};

 

//사용자가 처음으로 사이트에 방문하면 페이지 제목을 바꾸는 이벤트 
<button>Change user</button> //html 추가 

let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");

function setUserName() {
  let myName = prompt("Please enter your name.");
  if (!myName || myName === null) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.innerHTML = "Mozilla is cool, " + myName;
  }
}

//prompt는 데이터를 입력하는 대화상자 
//localStorage API 사용 : 브라우저에 데이터를 저장하고 나중에 불러올수 있다 

if (!localStorage.getItem("name")) {
  setUserName();
} else {
  let storedName = localStorage.getItem("name");
  myHeading.textContent = "Mozilla is cool, " + storedName;
}
// 이전 방문이 있어서 정보가 있다면 setUserName을 실행하고 정보가 없다면 textContent를 작업하여 새이름을 얻을수 있게 만든다 

myButton.onclick = function () {
  setUserName();
};
// 사용자가 새이름을 입력받도록 동작한다

 

 

 

자바스크립트 입력위치 

body 위 또는 아래에 직접 항목을 나열해 입력하거나 

js 파일을 만들어서 script src = 로 연결함