21.1.13

1. 자바스크립트로 onclick 명령 사용하여 그림 바꾸기
   index.html body 부분

    <img id = "change" onclick="changeImage()" src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">

여기서 작은 파이어폭스 여우를 큰 파이어폭스 여우 그림으로 바꾼 자바스크립트 문장

function changeImage() {
  var changes = document.getElementById('change');
  if(changes.src.match('firefox-icon.png')){
    changes.src = "images/firefox2.png";
  }else{
    changes.src = "images/firefox-icon.png"
  }
}

• 먼저 함수 만든 뒤 이미지의 Id값을 찾는 변수 지정
• 이후 If, else, match사용하였음. match의 경우 이미지 파일의 이름이 일치하는지 확인하는 용도였고 if는 그 일치 여부에 따라 연결된 이미지 파일을 바꿔주는 역할. else, 즉 일치하지 않으면 그냥 원본 쓰자는 뜻.

어디서 착안했는지? : MDN 공식 문서 보다가 그림이 안 바뀌는 예제 보고 이해가 안 되어서 다른 예시 보고 고침.

2. 같은 파일에서 promt로 경고창 비슷한 거 띄워서 사용자 이름 입력하고 버튼으로 초기화 하는 것. + 거기서 난 에러 해결

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

function setUserName(){
  let myName = prompt('please enter your name');
  if(!myName){
    setUserName();
  }else{
    localStorage.setItem('name', myName);
    myHeading.innerHTML = 'Mozila is cool, ' + myName;
  }
}

if(!localStorage.getItem('name')){
  setUserName();
}else{
  let storedName = localStorage.getItem('name');
  myHeading.innerHTML = 'Mozila is cool, ' +storedName;
}

myButton.onclick = function(){
  setUserName();
}

• 사용할 버튼과 홈페이지의 제목이 바뀌는 변수 지정 후 함수 사용. 이 때 if, else를 사용하여 팝업창을 띄운다.(아주 자세한 것까지는 확 이해되진 않았으나 동작 원리는 어느 정도 알겠음) 마지막으로 버튼을 온클릭 했을 때 사용자 이름을 초기화 할 수 있게 해줌

• 여기서 뜬 에러 :

cannot set property ‘innerHTML’ of null

참고 : 링크텍스트

• 해결 : 나는 main에서 스크립트를 매일 헤드 쪽에 썼는데 이 경우에는 바디 내용이 반영되지 않는다고 바디 닫히는 밑에 써야한다고 한다. 그래서 옮겼더니 에러가 해결 되었다. 처음에 스크립트를 아래로 내린다는게 뭔 소린지 싶었는데 그런 내용이었다.

• 마지막 깃허브 동기화 과정 중 에러난 것 :
  깃의 원격 저장소와 현재 로컬 저장소가 동기화 되어 있지 않을 때 :

git pull --rebase 원격저장소별칭 master

(나는 origin3로 했었다.)