[대구시/MS 협력 개발일지5일차] JavaScript 기초실습(2022.03.25)
> 1. 학습한 내용
- document.write -> 웹페이지 상에 출력
console.log -> console 창에 출력
- 버튼의 약자는 'input'
(참고) shift+enter -> console 창에서 줄내려가기 시 사용
- `if(this.value === 'night'){ // 비교 연산자
document.querySelector('body').style.color="white";
document.querySelector('body').style.backgroundColor='black' ;
this.value = 'day' ; // ->대입 연산자, 오른쪽의 수치가 왼쪽의 변수가 되는 것}~
- 객체와 배열은 무엇인가?
`Array + Loop <script>
var topics = ['html', 'css', 'js'] ;
for(let i=0 ; i<topics.length ; i=i+1 ){
console.log('i=>', topics[i]);
document.write('<li>'+topics[i]+'</li>'); // li 태그 만들고 싶을때 식/ 태그로 감싸기 -> +( )+
}
</script>
<script>
let topics2 = ['html', 'css', 'js'] //[]는 배열, 배열의 이름을 정해주고, let(첫 설정,선언)
for(let i=0;i<topics2.length;i=i+1){
console.log(topics2[i]);
// document.write('<li>' + topics2[i] + '</i>') 밑에 것이랑 같은 것.
document.write(`<li>${topics2[i]}</li>`)
}
</script>
-
객체지향
->객체 지향은 서로 연관된 변수와 함수를 그룹핑에서 이름을 붙인것(첫인상으로 요렇게 이해할 것)
`
<h1>Object</h1>
<script>
let student = ['kasumigaoka', 'Kato'] ; // 배열, 배열에선 각각의 데이터를 '인덱스'로 식별. 인덱스로 식별되는 '객체'인것, 순서를 가지고 저장할때는 배열사용.
console.log(student[0], student[1]);// 배열의 값을 꺼낼 때.
//let member = ['kasumigaoka', 'Michiru']; // 객체에 이름을 붙일 수 있음(객체는)
//console.log(member[0], member[1]);// 이 상태로는 각 데이터의 성질은 알 수가 없음.
let member = {developer : 'kasumigaoka', designer : 'Michiru'}; // 객체 표시는 {} 사용, 헷갈리지 말것.
console.log(member.developer, member.designer);
let person = {name:'kasumigaoka', city:'Tokyo', job:'writer'};//순서없이 이름을 저장할때는 객체를 사용.
console.log(person.name, person.city, person.job);
let MyMath = {}
MyMath.Pi = 3.14;
MyMath.sum = function(val1,val2){
return val1+val2;
}
console.log(MyMath.Pi);
console.log(MyMath.sum(10,20));
</script>
-
함수
->내장함수 : 크롬에 '내장'되어 있는 함수. 크롬 개발자가 만듦 built-in-function
함수는 서로 연관된 코드를 모아서 grouping한 정리정돈의 상자다/ grouping 해서 이름을 붙인것 -> 이라고 생각해볼것.
함수 설정해놓으면 무수히 많은 코드가 있다고 하더라도 함수 하나의 설정에 담아놓은 코드만 수정해주면 한꺼번에 모든 코드와 내용, 성질이 수정됨.
장점 : 코드가 간결해진다./가독성이 좋아진다./함수부분을 통해 모든 곳에서 동시에 수정이 일어난다.->유지보수가 편해진다.
`
<script>
function night(){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
let as = document.querySelectorAll('a');
for(let i=0; i<as.length;i=i+1){ // i=i+1 대신 i++ 써도 됨.
as[i].style.color = 'white' ;
}
}
function day(){
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
let as = document.querySelectorAll('a');
for(let i=0; i<as.length;i=i+1){ // i=i+1 대신 i++ 써도 됨.
as[i].style.color = 'black' ;
}
}
</script>
<input type="button" id="dnbtn" value="night" onclick="
let button = document.querySelector('#dnbtn') ; // 이거를 this 로 바꿔도 똑같이 동작(this는 )
if(button.value === 'night') {
night();
button.value = 'daylight';
} else {
day();
button.value = 'night' ;
}
">`
호출되는 코드 ~() ->'~'는 실행값,()는 계산하는 값
정의하는 코드 function ~(){} -> {}명령하는 내용
중간중간에 다른 많은 코드와 기능이 섞여 있을때, 비슷한 혹은 같이 움직이는 것들 끼리 묶어서 function으로 함축한다.
매개변수를 여러개를 달아서 여러개의 입력값을 출력할 수 있게됨.
함수의 return 값이 함수의 값이 됨. 그 함수의 실행값이 됨. -> 함수의 값이 확정됨. 따라서 바로 뒤에 코드를 넣어봤자 실행이 안됨.
-
캡쳐자료
> 2. 어려웠던 내용들
- '객체'에 관한 부분이 전반적으로 이해가 잘 되지 않음.
- function(함수) 부분의 return의 기능(무엇을 의미하고 어떤 동작이 필요해서 이걸 집어 넣었는지)이 잘 이해가 가지 않음.
> 3. 해결방법
- 강의와 자료를 검색하여 내용을 정리함.
- 직접 새로운 html파일을 만들어서 이것저것 넣어보며 시도를 함.
- 배열은 순서가 있는 값으로, 그 순서는 인덱스로 구성이 되어있음.(번호는 0부터 매김)
그 값들은 각각 요소(element)라고 부르며, 각각의 요소들은 쉼표(comma)로 구분해줌.
대괄호'[]'를 통해 배열을 만듦.
ex) 'let arr = []; // 빈배열을 선언, arr = [1, 3, 5, 7, 9]; // 배열에 값을 할당, console.log(arr); //--> [1,3,5,7,9] 출력
- 객체는 항상 키와 값(key-value pair)으로 값을 넣어야 함.
그 값들은 속성(Property)라고 부르며, 한 쌍당 구분은 쉼표(comma)로 구분
중괄호'{}'를 통해 객체를 생성
ex) let user ={} // 빈 객체 선언, user = { name: "Hikigaya Hachiman", wherefrom : "bokuno seishunlovecomewa machigatteiru", wherelive : "Chiba" } // 객체에 값을 할당, console.log(user); // --> { name: "Hikigaya Hachiman", wherefrom : "bokuno seishunlovecomewa machigatteiru", wherelive : "Chiba" } 로 출력
(참조) https://www.google.com/search?q=%EA%B0%9D%EC%B2%B4%EC%99%80+%EB%B0%B0%EC%97%B4&oq=%EA%B0%9D%EC%B2%B4%EC%99%80+%EB%B0%B0%EC%97%B4&aqs=chrome..69i57j0i512l9.3570j0j7&sourceid=chrome&ie=UTF-8
- function의 특성을 아래의 url을 통해 더 검색하여 알아봄.https://www.google.com/search?q=function+return&sxsrf=APq-WBvp3b8LyS65KJ-ib9lUyKCAO6nq9w%3A1648192517381&ei=BWw9YoP4FqSGr7wPrLq1iAc&ved=0ahUKEwjDjpTM2-D2AhUkw4sBHSxdDXEQ4dUDCA4&uact=5&oq=function+return&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEOgcIIxCwAxAnOgcIABBHELADOgQIIxAnOhEILhCABBCxAxCDARDHARDRAzoICAAQgAQQsQM6CwgAEIAEELEDEIMBOgcILhCABBAKOhEILhCABBCxAxCDARDHARCjAjoKCAAQgAQQhwIQFDoLCC4QgAQQxwEQrwE6CAguEIAEELEDSgQIQRgASgQIRhgAUMIJWMAlYO0oaAFwAXgAgAGiAYgBvhGSAQQwLjE1mAEAoAEByAEKwAEB&sclient=gws-wiz
> 4. 학습소감
앞의 몇일들에 비해 보다 이해력이 올라갔고, 스스로 찾아보는 것에 대한 재미가 더욱 증가했음. 배운 내용을 가지고 나만의 정보창고를 세계적인 검색엔진들과 나란히 할 수 있을 정도로 만들고 싶어지는 욕구가 더욱 커짐. 무한히 커져가는 정보의 창고, 옛 바빌론의 보물창고와 같은, 그러한 것을 조금씩 만들어가고 싶음. 허왕된 얘기일지도 모르지만, 만일 우리 이외의 우주의 생명체들과 교류하게 될 시, 그런 우주의 정보들을 전부 담고 있는 무언가를 이 코딩을 기초로 만들어 낼 수 있다고 생각하면 정말 두근두근하다고 밖에 할 말이 없음. 힘내보자! 나 자신!
Author And Source
이 문제에 관하여([대구시/MS 협력 개발일지5일차] JavaScript 기초실습(2022.03.25)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jeounghooni/대구시MS-협력-개발일지5일차-JavaScript-기초실습2022.03.25
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
console.log -> console 창에 출력
(참고) shift+enter -> console 창에서 줄내려가기 시 사용
document.querySelector('body').style.color="white";
document.querySelector('body').style.backgroundColor='black' ;
this.value = 'day' ; // ->대입 연산자, 오른쪽의 수치가 왼쪽의 변수가 되는 것}~
`
Array + Loop <script>
var topics = ['html', 'css', 'js'] ;
for(let i=0 ; i<topics.length ; i=i+1 ){
console.log('i=>', topics[i]);
document.write('<li>'+topics[i]+'</li>'); // li 태그 만들고 싶을때 식/ 태그로 감싸기 -> +( )+
}
</script>
<script>
var topics = ['html', 'css', 'js'] ;
for(let i=0 ; i<topics.length ; i=i+1 ){
console.log('i=>', topics[i]);
document.write('<li>'+topics[i]+'</li>'); // li 태그 만들고 싶을때 식/ 태그로 감싸기 -> +( )+
}
</script> <script>
let topics2 = ['html', 'css', 'js'] //[]는 배열, 배열의 이름을 정해주고, let(첫 설정,선언)
for(let i=0;i<topics2.length;i=i+1){
console.log(topics2[i]);
// document.write('<li>' + topics2[i] + '</i>') 밑에 것이랑 같은 것.
document.write(`<li>${topics2[i]}</li>`)
}
</script>객체지향
->객체 지향은 서로 연관된 변수와 함수를 그룹핑에서 이름을 붙인것(첫인상으로 요렇게 이해할 것)
`
<h1>Object</h1>
<script>
let student = ['kasumigaoka', 'Kato'] ; // 배열, 배열에선 각각의 데이터를 '인덱스'로 식별. 인덱스로 식별되는 '객체'인것, 순서를 가지고 저장할때는 배열사용.
console.log(student[0], student[1]);// 배열의 값을 꺼낼 때.
//let member = ['kasumigaoka', 'Michiru']; // 객체에 이름을 붙일 수 있음(객체는)
//console.log(member[0], member[1]);// 이 상태로는 각 데이터의 성질은 알 수가 없음.
let member = {developer : 'kasumigaoka', designer : 'Michiru'}; // 객체 표시는 {} 사용, 헷갈리지 말것.
console.log(member.developer, member.designer);
let person = {name:'kasumigaoka', city:'Tokyo', job:'writer'};//순서없이 이름을 저장할때는 객체를 사용.
console.log(person.name, person.city, person.job);
let MyMath = {}
MyMath.Pi = 3.14;
MyMath.sum = function(val1,val2){
return val1+val2;
}
console.log(MyMath.Pi);
console.log(MyMath.sum(10,20));
</script>함수
->내장함수 : 크롬에 '내장'되어 있는 함수. 크롬 개발자가 만듦 built-in-function
함수는 서로 연관된 코드를 모아서 grouping한 정리정돈의 상자다/ grouping 해서 이름을 붙인것 -> 이라고 생각해볼것.
함수 설정해놓으면 무수히 많은 코드가 있다고 하더라도 함수 하나의 설정에 담아놓은 코드만 수정해주면 한꺼번에 모든 코드와 내용, 성질이 수정됨.
장점 : 코드가 간결해진다./가독성이 좋아진다./함수부분을 통해 모든 곳에서 동시에 수정이 일어난다.->유지보수가 편해진다.
`
<script>
function night(){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
let as = document.querySelectorAll('a');
for(let i=0; i<as.length;i=i+1){ // i=i+1 대신 i++ 써도 됨.
as[i].style.color = 'white' ;
}
}
function day(){
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
let as = document.querySelectorAll('a');
for(let i=0; i<as.length;i=i+1){ // i=i+1 대신 i++ 써도 됨.
as[i].style.color = 'black' ;
}
}
</script>
<input type="button" id="dnbtn" value="night" onclick="
let button = document.querySelector('#dnbtn') ; // 이거를 this 로 바꿔도 똑같이 동작(this는 )
if(button.value === 'night') {
night();
button.value = 'daylight';
} else {
day();
button.value = 'night' ;
}
">` 호출되는 코드 ~() ->'~'는 실행값,()는 계산하는 값
정의하는 코드 function ~(){} -> {}명령하는 내용
중간중간에 다른 많은 코드와 기능이 섞여 있을때, 비슷한 혹은 같이 움직이는 것들 끼리 묶어서 function으로 함축한다.
매개변수를 여러개를 달아서 여러개의 입력값을 출력할 수 있게됨.
함수의 return 값이 함수의 값이 됨. 그 함수의 실행값이 됨. -> 함수의 값이 확정됨. 따라서 바로 뒤에 코드를 넣어봤자 실행이 안됨.
캡쳐자료
- '객체'에 관한 부분이 전반적으로 이해가 잘 되지 않음.
- function(함수) 부분의 return의 기능(무엇을 의미하고 어떤 동작이 필요해서 이걸 집어 넣었는지)이 잘 이해가 가지 않음.
> 3. 해결방법
- 강의와 자료를 검색하여 내용을 정리함.
- 직접 새로운 html파일을 만들어서 이것저것 넣어보며 시도를 함.
- 배열은 순서가 있는 값으로, 그 순서는 인덱스로 구성이 되어있음.(번호는 0부터 매김)
그 값들은 각각 요소(element)라고 부르며, 각각의 요소들은 쉼표(comma)로 구분해줌.
대괄호'[]'를 통해 배열을 만듦.
ex) 'let arr = []; // 빈배열을 선언, arr = [1, 3, 5, 7, 9]; // 배열에 값을 할당, console.log(arr); //--> [1,3,5,7,9] 출력
- 객체는 항상 키와 값(key-value pair)으로 값을 넣어야 함.
그 값들은 속성(Property)라고 부르며, 한 쌍당 구분은 쉼표(comma)로 구분
중괄호'{}'를 통해 객체를 생성
ex) let user ={} // 빈 객체 선언, user = { name: "Hikigaya Hachiman", wherefrom : "bokuno seishunlovecomewa machigatteiru", wherelive : "Chiba" } // 객체에 값을 할당, console.log(user); // --> { name: "Hikigaya Hachiman", wherefrom : "bokuno seishunlovecomewa machigatteiru", wherelive : "Chiba" } 로 출력
(참조) https://www.google.com/search?q=%EA%B0%9D%EC%B2%B4%EC%99%80+%EB%B0%B0%EC%97%B4&oq=%EA%B0%9D%EC%B2%B4%EC%99%80+%EB%B0%B0%EC%97%B4&aqs=chrome..69i57j0i512l9.3570j0j7&sourceid=chrome&ie=UTF-8
- function의 특성을 아래의 url을 통해 더 검색하여 알아봄.https://www.google.com/search?q=function+return&sxsrf=APq-WBvp3b8LyS65KJ-ib9lUyKCAO6nq9w%3A1648192517381&ei=BWw9YoP4FqSGr7wPrLq1iAc&ved=0ahUKEwjDjpTM2-D2AhUkw4sBHSxdDXEQ4dUDCA4&uact=5&oq=function+return&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEOgcIIxCwAxAnOgcIABBHELADOgQIIxAnOhEILhCABBCxAxCDARDHARDRAzoICAAQgAQQsQM6CwgAEIAEELEDEIMBOgcILhCABBAKOhEILhCABBCxAxCDARDHARCjAjoKCAAQgAQQhwIQFDoLCC4QgAQQxwEQrwE6CAguEIAEELEDSgQIQRgASgQIRhgAUMIJWMAlYO0oaAFwAXgAgAGiAYgBvhGSAQQwLjE1mAEAoAEByAEKwAEB&sclient=gws-wiz
> 4. 학습소감
앞의 몇일들에 비해 보다 이해력이 올라갔고, 스스로 찾아보는 것에 대한 재미가 더욱 증가했음. 배운 내용을 가지고 나만의 정보창고를 세계적인 검색엔진들과 나란히 할 수 있을 정도로 만들고 싶어지는 욕구가 더욱 커짐. 무한히 커져가는 정보의 창고, 옛 바빌론의 보물창고와 같은, 그러한 것을 조금씩 만들어가고 싶음. 허왕된 얘기일지도 모르지만, 만일 우리 이외의 우주의 생명체들과 교류하게 될 시, 그런 우주의 정보들을 전부 담고 있는 무언가를 이 코딩을 기초로 만들어 낼 수 있다고 생각하면 정말 두근두근하다고 밖에 할 말이 없음. 힘내보자! 나 자신!
Author And Source
이 문제에 관하여([대구시/MS 협력 개발일지5일차] JavaScript 기초실습(2022.03.25)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jeounghooni/대구시MS-협력-개발일지5일차-JavaScript-기초실습2022.03.25
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- 강의와 자료를 검색하여 내용을 정리함.
- 직접 새로운 html파일을 만들어서 이것저것 넣어보며 시도를 함.
- 배열은 순서가 있는 값으로, 그 순서는 인덱스로 구성이 되어있음.(번호는 0부터 매김)
그 값들은 각각 요소(element)라고 부르며, 각각의 요소들은 쉼표(comma)로 구분해줌.
대괄호'[]'를 통해 배열을 만듦.
ex) 'let arr = []; // 빈배열을 선언, arr = [1, 3, 5, 7, 9]; // 배열에 값을 할당, console.log(arr); //--> [1,3,5,7,9] 출력 - 객체는 항상 키와 값(key-value pair)으로 값을 넣어야 함.
그 값들은 속성(Property)라고 부르며, 한 쌍당 구분은 쉼표(comma)로 구분
중괄호'{}'를 통해 객체를 생성
ex) let user ={} // 빈 객체 선언, user = { name: "Hikigaya Hachiman", wherefrom : "bokuno seishunlovecomewa machigatteiru", wherelive : "Chiba" } // 객체에 값을 할당, console.log(user); // --> { name: "Hikigaya Hachiman", wherefrom : "bokuno seishunlovecomewa machigatteiru", wherelive : "Chiba" } 로 출력
(참조) https://www.google.com/search?q=%EA%B0%9D%EC%B2%B4%EC%99%80+%EB%B0%B0%EC%97%B4&oq=%EA%B0%9D%EC%B2%B4%EC%99%80+%EB%B0%B0%EC%97%B4&aqs=chrome..69i57j0i512l9.3570j0j7&sourceid=chrome&ie=UTF-8 - function의 특성을 아래의 url을 통해 더 검색하여 알아봄.https://www.google.com/search?q=function+return&sxsrf=APq-WBvp3b8LyS65KJ-ib9lUyKCAO6nq9w%3A1648192517381&ei=BWw9YoP4FqSGr7wPrLq1iAc&ved=0ahUKEwjDjpTM2-D2AhUkw4sBHSxdDXEQ4dUDCA4&uact=5&oq=function+return&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEOgcIIxCwAxAnOgcIABBHELADOgQIIxAnOhEILhCABBCxAxCDARDHARDRAzoICAAQgAQQsQM6CwgAEIAEELEDEIMBOgcILhCABBAKOhEILhCABBCxAxCDARDHARCjAjoKCAAQgAQQhwIQFDoLCC4QgAQQxwEQrwE6CAguEIAEELEDSgQIQRgASgQIRhgAUMIJWMAlYO0oaAFwAXgAgAGiAYgBvhGSAQQwLjE1mAEAoAEByAEKwAEB&sclient=gws-wiz
앞의 몇일들에 비해 보다 이해력이 올라갔고, 스스로 찾아보는 것에 대한 재미가 더욱 증가했음. 배운 내용을 가지고 나만의 정보창고를 세계적인 검색엔진들과 나란히 할 수 있을 정도로 만들고 싶어지는 욕구가 더욱 커짐. 무한히 커져가는 정보의 창고, 옛 바빌론의 보물창고와 같은, 그러한 것을 조금씩 만들어가고 싶음. 허왕된 얘기일지도 모르지만, 만일 우리 이외의 우주의 생명체들과 교류하게 될 시, 그런 우주의 정보들을 전부 담고 있는 무언가를 이 코딩을 기초로 만들어 낼 수 있다고 생각하면 정말 두근두근하다고 밖에 할 말이 없음. 힘내보자! 나 자신!
Author And Source
이 문제에 관하여([대구시/MS 협력 개발일지5일차] JavaScript 기초실습(2022.03.25)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jeounghooni/대구시MS-협력-개발일지5일차-JavaScript-기초실습2022.03.25저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
