[3월 25일] Javascript 3/3
1) 학습한 내용
1. 코드정리
<script>
document.write('<li>'+topics2[i]+'</li>');
document.write(`<li>${topics2[i]}</li>`);
</script>
<script>
document.write('<li>'+topics2[i]+'</li>');
document.write(`<li>${topics2[i]}</li>`);
</script>
같은 의미로 사용되지만 아래줄 코드가 좀더 정리가 잘되고 보기좋음
2. 하이퍼링크 글씨색 바꾸기
링크가 연결되면 글자색이 기본으로 설정되어 있음
-다크모드 실행에서 글자색을 바꾸기 위해선 링크의 색을 직접 바꿔주어야한다.
WEB
①링크연결된 각각의 코드에 id를 설정한다.
<h1> <a id="a1" href="index.html">WEB</a></h1> <div id="container"> <ol> <li><a id="a2" href="1.html">html</a></li> <li><a id="a3" href="2.html">css</a></li> <li><a id="a4" href="3.html">JavaScript</a></li> </ol>
②for문을 이용해 a를 하나하나 불러와 색을 지정해준다.
<script> let as = document.querySelectorAll('a'); for(let i=0;i<as.length;i++){ as[i].style.color='black'; } </script>
3. 2000개의 버튼 누르기
(1) 모든 버튼누르기
<script> let btn =document.querySelectorAll('input'); for (let i=0;i<btn.length;i++){ btn[i].click() ; } </script>
(2) 100초과 버튼누르기
<script> let btn =document.querySelectorAll('input'); for (let i=0;i<btn.length;i++){ if(btn[i].value>100){ btn[i].click() ; } } </script>
(3) 100초과 200미만 버튼누르기
1)2개의 if문 사용
<script> let btn=document.querySelectorAll('input'); for (let i=0;i<btn.length;i++){ if (btn[i].value>100){ if(btn[i].value<200){ btn[i].click(); } } } </script>
2)1개의 if문 사용 (&&연산자)
<script> let btn =document.querySelectorAll('input'); for (let i=0;i<btn.length;i++){ if(btn[i].value>100 && btn[i].value<200){ btn[i].click() ; } } </script>
4. 함수사용
"함수는 서로 연관된 코드를 그룹핑한 정리정돈의 상자이다"
함수를 사용하면 '코드가 간결해진다 / 가독성이 좋아진다 / 유지 및 보수가 편해진다'
부가세 계산 함수만들기
①변수를 받지 않고, 반환값을 사용하지 않는 함수
<script> function 부가세계산(){ let 가격=1000; let 부가세율=0.1; let 부가세=가격*부가세율; console.log(부가세); } console.log(1); 부가세계산(); console.log(2); </script>
②변수를 받고, 반환값을 사용하지 않는 함수
<script> function 부가세계산(가격,부가세율){ //매개변수,parameter let 부가세=가격*부가세율; console.log(부가세); } 부가세계산(2000,0.1);// 인자,argument,입력값 </script>
③변수를 받고, 반환값을 사용하는 함수
<script> function 부가세계산(가격,부가세율){ let 부가세=가격*부가세율; return 부가세; } console.log(부가세계산(5000,0.1));// return값을 콘솔창에 출력 alert(부가세계산(10000,0.1)) confirm(부가세계산(20000,0.1)) </script>
5. 객체(Object)
"객체지향은 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것 "
배열은 index로 식별되는 객체
객체는 이름으로 식별되는 배열
<script> let member ={developer:'egoing',designer:'duru'}; console.log(member.developer,member.designer);
let person={name:'egoing',city:'seoul', job:'developer'} console.log(person.name,person.city,person.job) </script>
-배열과 달리 객체는 평등하지 않은 것들,성질이 다른 것들이 들어있을 때 사용한다.
6.유용한 사이트
코드작성연습
-코드 연습하기 좋은 사이트
2) 학습내용 중 어려웠던 점
console.log(topics[i]);
vs document.write(topics[i]);
두개의 차이가 헷갈렸다.
''대신 ""을 사용하여 원하는 결과가 안 나올때가 많았다.
조건이 두개일때 and가 아닌 &&연산자를 사용하는것을 몰라서 처음에 해결을 못하였다.
3) 해결방법
이고잉 강사님의 방법을 따라하면서
조건이 2개일때는 if문을 두번쓰는 방법과 &&연산자를 사용하는 방법이 있다는 것을 알게 되었다.
4) 학습소감
파이선을 배울 때도 함수의 기능이 신기하고 재미있었는데 자바스크립트에서도 함수는 정말 유용하고 재밌다.
코드의 형태가 조금씩 다르니까 잘 기억해야할 것 같고,헷갈리지 않게 개념정리가 필요한 것 같다.
Author And Source
이 문제에 관하여([3월 25일] Javascript 3/3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wjdtjdl0403/3월-25일-Javascript-33저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)