javaScript
JavaScript 기본
밍블리-셔
2024. 12. 20. 15:03
다시 JavaScript 공부를 제대로 하기 위해 mdn 문서를 보고 기본기를 다시 익혀보자.
<body>
<h1>Hello World!</h1>
<img src="images/a.png" alt="이미지 변경">
<button>Change user</button>
<h1></h1>
</body>
<script>
//값을 로그로 출력하기
console.log('값을 로그로 출력하기')
const a = 10;
const b = 20;
const sum = a + b;
console.log(sum);
console.log('안녕하세요.', '지금은', new Date(), '입니다.')
console.log('35' + '25')
console.log(35 + 25)
//파라미터
function greet(name) {
//템플릿 리터럴 -> 백틱 (``)으로 넣어줘야 함 [맥 키보드에서 원화표시]
console.log(`hello, ${name}`);
}
//이벤트 리스너를 추가하는 함수
const button = document.querySelector('button')
button.addEventListener('click', function () {
greet('Alice');
})
//조건문
let iceCream = "chocolate";
if (iceCream === "chocolate") {
alert("Yay, I love chocolate ice cream!");
} else {
alert("Awwww, but chocolate is my favorite...");
}
//fuction (함수) -> 재사용하기를 원하는 기능을 담는 방법
//재사용할 기능이 필요할 때 매번 전체 코드를 다시 작성하는 대신 함수의 이름으로 그 함수를 호출해서 사용
//document.querySelector 와 alert 같은 것들은 언제든지 사용할 수 있는 내장 함수
//변수 이름처럼 보이지만 그 뒤에 괄호()가 있다면 함수이다.
let myVariable = document.querySelector("h1");
// alert("hello!");
//변수 내 텍스트를 가져올 땐 textContent
alert(myVariable.textContent)
//return문은 브라우저에게 함수로부터 나오는 result라는 변수를 반환하게 함으로써 그 변수를 사용할 수 있게 함
function multiply(num1, num2) {
let result = num1 * num2;
return result
}
// 콘솔에 함수 결과 출력
console.log(multiply(4, 7)); // 28
console.log(multiply(20, 20)); // 400
console.log(multiply(0.5, 3)); // 1.5
//이벤트
//요소선택.이벤트 = function () {};
document.querySelector('html').onclick = function(){
alert('Ouch! Stop poking me!')
};//html요소를 선택하고 그 요소의 onciick 프로퍼티에 클릭 이벤트가 실행할 코드를 갖고 있는 익명 함수를 할당
//이미지 변경자 추가
let myImage = document.querySelector('img');
myImage.onclick = function(){
let mySrc = myImage.getAttribute('src');
//이미지의 src 속성 값을 얻고, src 값이 원래 이미지 경로와 같은지 확인하기 위해 조건문 사용
if(mySrc === 'images/a.png'){
myImage.setAttribute('src', 'images/b.png');
//만약 같다면, src 값을 두 번째 이미지 경로로 변경해 다른 이미지가 로드되도록
} else {
myImage.setAttribute('src', 'images/a.png')
//같지 않다면(이미 변경되었다는 것을 의미), 원래 상태로 되돌리기 위해 src 값을 원래 이미지 경로로 바꿔놓기
}
}
//개인화된 환영 메시지 추가
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');
function setUserName(){
let myName = prompt('please enter your name.');
if(!myName || myName === null){
//myName에 할당된 값이 없거나 null일 때,
setUserName();
//setUserName() 함수를 처음부터 다시 실행
}else{
localStorage.setItem('name',myName);
//값이 있으면(위의 if 조건이 not true 일 경우) localStorage에 값을 저장하고
myHeading.textContent = "Mozilla is cool, " + myName;
//헤딩의 텍스트에 값을 설정
}
}
myButton.onclick = function(){
setUserName();
}
</script>,-