반응형
1교시 수업
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var index=10;
function hello(){
var index=0;
console.log(index)
}
index++;
hello();
console.log(index);
hello();
//이런 경우에는 함수를 실행할 때는 함수 코드블럭 안에있는 인덱스를 우선으로
// 생각하기때문에 첫번째 콘솔 인덱스는 0으로 찍히고 그것을 ++하게 됨.
// 코드블럭 바깥의 콘솔 인덱스는 바깥에잇는 var 인덱스(전역변수)의 영향을 받기때문에
// ++이 되지 않은 채로 10이 찍힘.
//함수 안에있는 var인덱스는 지역변수.
/* for(i=0; i<10; i++){
console.log(i);
}
for(i=0; i<10; i++){
console.log(i);
}*/
//폴문이 여러개 한번에 쓰일 때, 변수 i를 읽을 때 오류가 나는 경우가 있음.
//그럴때는 i앞에 let을 붙여서 씀. let은 var와 같은 기능.
//내가 어느 지역에서 이 변수를 사용할 것인지 선언하는 것임.
//for( let i=0; i<10; i++){
// console.log(i);
//} --- 이렇게 쓰면 이 i는 이 폴문 안에서만 사용할 거라는 뜻.
// 사용한 위치에 따라서 사용 범위가 달라짐.
/*const index= 0; //const는 상수라는 의미로, 변하지 않는 변수라는 뜻임.
function hello(){//인덱스를 무조건 0으로만 쓸것이라는 뜻.
var index=0;
console.log(index)
index++;
}
hello();
hello(); */
// 이렇게 쓰면 첫번째 실행에서는 0이 뜨고
// 두번째 헬로실행에서 오류가 뜸. 왜냐면 인덱스는 변하지않는 상수0인데
//함수에서 변하게하려고 해서
//const는 주로 변수 지정할 때 자주 씀. 예를 들어
// const root = document.querySelector('#root');
</script>
<div id="root"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="dd">
<script>
var index=10;
function hello(){
var index=0;
console.log(index)
}
index++;
hello();
console.log(index);
hello();
</script>
</div>
</body>
</html>0 10 0
<script>
var index=10;
function hello(){
index=0;
console.log(index)
}
index++;
hello();
console.log(index);
hello();
</script>000
<script>
index=10;
function hello(){
var index=0;
console.log(index)
}
index++;
hello();
console.log(index);
hello();
</script>
0 11 0
<script>
index=10;
function hello(){
index=0;
console.log(index)
}
index++;
hello();
console.log(index);
hello();
</script>0 0 0
==========================================================================
for(i=0; i<10; i++){
console.log(i);
}
for(i=0; i<10; i++){
console.log(i);
}
for 두개 구문 쓰면 중복으로 let을 쓰면
for(let i=0; i<10; i++){
console.log(i);
}
for(let i=0; i<10; i++){
console.log(i);
}
저 안에서만 함수를 하겠다~ 라는 뜻 ㅇ
i를 저 for문안에서 쓰고 다시 리셋 되는 뜻
const index=0;
function hello(){
var index=1;
console.log(index)
index++;
}
hello();
hello();const?????
=-=====================2교시 ==========================================
이제 결과창으로 ㄱ ㄱ
<script>
const root=document.querySelector('#root'); //상수로 지정함~ let 쓴건 똒똒한 코딩이랭
for(let i=0; i<10; i++){
let li=document.createElement('li');
li.innerHTML=i;
root.appendChild(li);
}
</script>
위와 같이 바꾸기
const root=document.querySelector('#root'); //상수로 지정함~ let 쓴건 똒똒한 코딩이랭
for(let i=1; i<11; i++){
let li=document.createElement('li');
li.innerHTML=i+"번 : * ";
root.appendChild(li);
}
let a =0; //변수값 안에 ''가 없고 숫자만 있으면
//변수타입이 number or int
let b = '0'; //변수값 안에 '' 가 있으면 안에 어떠한 값이
//들어가든 이 변수타입은 string.
console.log(a+b);
querySelector
<script type="text/javascript">
let a = 0; //변수값 안에 ''가 없고 숫자만 있으면
//변수타입이 number or int
let b = '0'; //변수값 안에 '' 가 있으면 안에 어떠한 값이
//들어가든 이 변수타입은 string.
console.log(a+b);
const root=document.querySelector('#root'); //상수로 지정함~ let 쓴건 똒똒한 코딩이랭
const star = "*";
for(let i=0; i<10; i++){
let li=document.createElement('li');
li.innerHTML=String(i+1)+'번 : ' + star;
root.appendChild(li);
}
</script>
<script type="text/javascript">
let a = 0; //변수값 안에 ''가 없고 숫자만 있으면
//변수타입이 number or int
let b = '0'; //변수값 안에 '' 가 있으면 안에 어떠한 값이
//들어가든 이 변수타입은 string.
console.log(a+b);
const root=document.querySelector('#root');
const star="*";
for(let i=0; i<10; i++){
let li=document.createElement('li');
li.innerHTML=star;
root.appendChild(li);
}
</script>
이중 for 문
* 코드블럭 잘 보기 !
for(let i=0; i<10; i++){
for(let j=0; j<10; j++){
document.write(star);
}
document.write('<br />');
}
for(let i=0; i<10; i++){
for(let j=0; j<i; j++){
document.write(star);
}
document.write('<br />');
}
이중 배열 (?)
배열을 사용하면 이중for문을 안써도 될?
let arr = ['*', '**', '***', '****', '*****']
for(let i=0; i<5; i++){
console.log(arr[i]);
}
let arr = ['*', '**', '***', '****', '*****']
for(let i=0; i<5; i++){
console.log(arr[i]);
}
for(let i=0; i<5; i++){
for(let j=0; j<i; j++){
document.write('*');
}
document.write('<br/>');
}
//네번째 줄은 별찍지 말고 hello 써 -> 배열의 경우 arr 안 값만 바꿔주면 되서 편함
let arr = ['*', '**', '***', 'HELLO', '*****']
for(let i=0; i<5; i++){
console.log(arr[i]);
}
배열의 중요성,,
let arr = ['*', '**', '***', 'HELLO', '*****']
for(let i=0; i<5; i++){
console.log(arr[i]);
}
for(let i=0; i<5; i++){
for(let j=0; j<i; j++){
if(i!=3){
document.write('*');
}
}
if(i==3){
document.write('Hello');
}
document.write('<br/>');
}
for는 매우 복잡
가변적으로 쉽게 만들수 있음. 계속 늘려야하는 경우는 for~
배열 - 직접 노가다를 뛰어줘야함. fixed된 데이터 라면 배열~
for문 안에 if 조건문 쓰는 경우가 매우 많아짐..
for(let i=0; i<5; i++){
for(let j=0; j<i; j++){
if(i==3){
document.write('Hello');
} else{
document.write('*');
}
}
document.write('<br/>');
}이;렇게 쓰면
---------------
*
**
HelloHelloHello
***
요렇게 나옴. i==3일때 j =0,1,2가 3번 돌면서 Hello 3번 츄ㅜㄹ력
let arr = ['*', '**', '***', '****', '*****']
for(let i=0; i<5; i++){
arr[3]='Hello';
console.log(arr[i]);
}arr[3]='hello'; 도 같음.
배열 참고
tutorialpost.apptilus.com/code/posts/js/js-array/
JS Array 이해, push(), pop(), sort(), splice()
배열(Array)은 JavaScript 객체의 특수한 형태로써, 객체의 프로퍼티명이 0부터 시작해서 순차적으로 커지는 자연수로 이루어진 형태라고 생각할 수 있습니다. 이를 통해 어떠한 데이터를 순차적으
tutorialpost.apptilus.com
객체 =======오후수업-=========
let obj=new Object(); //객체 생성
//console.log(obj); // {}
// 사용법
obj.name='Zero';
console.log(obj); //name:'zero'
obj.age='20';
console.log(obj);
//obj안에서 name만 갖고오고 싶을 때
console.log(obj.name) // name return "Zero"
console.log(obj['name']); // name return "Zero"
1번째 방법
let ullist= {
'0':document.createElement('li'),
'1':document.createElement('li'),
'2':document.createElement('li'),
'3':document.createElement('li'),
'4':document.createElement('li'),
}
console.log(ullist);2번째 방법
createElement의 결과값 - element 어떤 값도 넣을 수 있음. string, num, boolean etc.
//객체 for 반복문 가능.
for(index in obj){
console.log(index);
}
for(a in obj){
console.log(a);
}
index, a 들어간 곳 아무거나 써도 상관없음.
in 앞에 있는 index, a는 변수같음.
안에 있는 값을 더 상세하게 알고 싶다~ 하면 배열을 보고싶다 ~ 하묜
for(item in obj){
console.log(obj[item]);
}
위처럼 내용도 가져올 수 있음.
==========함수 선언 방식 2가지 ===============
function hello(){
console.log('hello');
}
const hi = function(){
console.log('hello2');
}
hello();
hi();배우는 이유 : 두번째 꺼 많이 쓸 예정
객체에 함수도 넣을 수 있음.
1. 함수 = 함수를 만든거 (함수 정의)
2. 함수 = 함수를 만든걸 변수에 넣은 것 (함수 정의 + 변수에 넣기)
obj.hello=hi();
console.log(obj); //undefined? dd
undefined?
obj.hello=function(){
console.log('hello');
} //undefined? dd
???굳이 객체에 함수를 넣는 이유?
obj.hello=function(){
return 'hello!';
} //undefined? dd
console.log(obj.hello());
obj.hello=function(){
console.log(this.name);
console.log(this.age);
return 'hello!';
} //undefined? dd
console.log(obj.hello());
THIS ?
this -> obj (로 바꿔봐 이것도 됨_)
obj안에서 함수 만듬. 함수안에서 this를 사용하면 obj를 가르킴
오늘 오전, 오후 한 내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
let a = 0; //변수값 안에 ''가 없고 숫자만 있으면
//변수타입이 number or int
let b = '0'; //변수값 안에 '' 가 있으면 안에 어떠한 값이
//들어가든 이 변수타입은 string.
console.log(a+b);
const root=document.querySelector('#root');
const star="*";
for(let i=0; i<10; i++){
let li=document.createElement('li');
li.innerHTML=star;
root.appendChild(li);
}
//별로 정사각형 찍기
let arr = ['*', '**', '***', '****', '*****']
for(let i=0; i<5; i++){
arr[3]='Hello';
console.log(arr[i]);
}
for(let i=0; i<5; i++){
for(let j=0; j<i; j++){
if(i==3){
document.write('Hello');
} else{
document.write('*');
}
}
document.write('<br/>');
}
//네번째 줄은 별찍지 말고 hello 써 -> 배열의 경우 arr 안 값만 바꿔주면 되서 편함
var a= 0;
var b="0";
console.log(a+b);
//객체 배우기 ~ 배열이랑 비슷하기도하고...아니기도하고..json(데이터통신할 때 이 타입으로함)이랑 비슷함.
// API 가 뭐징 ?
let obj=new Object(); //객체 생성
//console.log(obj); // {}
// 사용법
obj.name='Zero';
console.log(obj); //name:'zero'
obj.age='20';
console.log(obj);
obj.career = ['1년 프로그래밍', '2년 서버개발자', '3년 프론트']
console.log(obj);
//obj안에서 name만 갖고오고 싶을 때
console.log(obj.name) // name return "Zero"
console.log(obj['name']); // name return "Zero"
//document.querySelectorAll() // list로 가져온거... 그 안의 값을 element로 처리한것. . . 음..
let ullist= {
'0':document.createElement('li'),
'1':document.createElement('li'),
'2':document.createElement('li'),
'3':document.createElement('li'),
'4':document.createElement('li'),
}
console.log(ullist);
//객체 for 반복문 가능.
for(index in obj){
console.log(index);
}
for(item in obj){
console.log(obj[item]);
}
//for((key,value)in obj){
// console.log(value);
//}
function hello(){
console.log('hello');
}
const hi = function(){
console.log('hello2');
}
hello();
hi();
obj.hello=function(){
console.log(this.name);
console.log(this.age);
return 'hello!';
} //undefined? dd
console.log(obj.hello());
</script>
</body>
</html>
API 변수 명을 어떻게 쓸꺼냐 정의해주는거 ?? 어렵지 않대,,, 생각보다 단순하다고...
API 통신 서버? 까지 넣으면 완벽한 서버를 구축할 수 있따
<script>
let obj=new Object();
obj.name="lulu";
obj.age="20";
obj.career=['1년 프로그래밍', '2년 서버개발자', '3년 프론트']
console.log(obj); //name, 값, age, 값, career, 값 모두 나옴
console.log(obj.name); //lulu
console.log(obj['name']); // lulu
for(a in obj){
console.log(a);
}
function hello(){
console.log('hello');
}
hello();
const hi=function(){
console.log('hi');
}
hi();
obj.hello=function(){
console.log(this.name);
console.log(this.age);
}
obj.hello();
</script>
array 블로그 보면서 공부한거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr=[1,2,3];
console.log(arr[0]); //1 배열 요소 접근
console.log(arr.length); //3 배열 요소의 개수 확인
console.log(arr[arr.length-1]); //3 배열의 마지막 요소에 접근
//대입연산자를 이용해 배열의 요소에 새로운값을 할당해주기
arr[2]=4;
console.log(arr); // arr= [1,2,4]
console.log(Array.from('foo')); // ["f","o","o"]
console.log(Array.from([1,2,3], x=>2*x)); //[2,4,6] // x=> x+x
console.log(Array.from("GOOD")); //["G", "O", "O", "D"]
console.log(Array.from([3,6,4,87], x=>x+x)); //[6,12,8,174]
//함수의 arguments를 배열로 손쉽게 변경하기 //
function f(){
var args=Array.from(arguments);
console.log(args);
}
f(1,2,3); //[1,2,3]
// 인자로 전달받은 객체가 배열이면 true, 아니면 false를 주는 //
console.log(Array.isArray([1,2,3]));
console.log(Array.isArray({too:123}));
console.log(Array.isArray('foobar'));
//원본배열을 수정하는 메서드 //
var arr=[1,2,3];
arr.pop(); // 3 배열의 마지막 요소 제거, 제거된 요소 리턴 arr=[1,2]가 남음
console.log(arr);
arr.push("new"); // 배열 마지막 요소에 추가, 배열의 크기 리턴 arr=[1,2,"new"]
console.log(arr);
arr.shift(); //1제거 (배열의 첫번째 요소 제거), arr=[2,"new"]
console.log(arr);
arr.unshift("first"); // 배열의 첫번째 요소 추가 arr=["first", 2, "new"]
console.log(arr);
// splice method 배열요소 추가 삭제
//arr.splice(start, deleteCount, el);
// start- 수정할 배열 요소의 인덱스
// deleteCount - 삭제할 요소의 개수 , 제거하지않을 경우 0
// el - 배열에 추가될 요소
var arr=[1,5,7];
arr.splice(1,0,2,3,4); //[1,2,3,4,5,7]
console.log(arr);
arr.splice(1, 2); //[1,4,5,7]
console.log(arr);
arr.splice(1,0,2,3);
console.log(arr);
arr.splice(5,0,6);
console.log(arr);
//reverse method - 배열 요소 순서 반전
arr.reverse();
console.log(arr); // [7,6,5,4,3,2,1]
//sort method- 배열 요소 정렬
//sort 함수는 기본적으로 배열의 요소를 문자열로 변환한 후 오름차순으로 정렬함.
arr.sort();
console.log(arr);
var arr2=[23,12,3,4,777]; //[12,23,3,4,777] -> 문자열로 변환한후 결과를 돌려줘서 다름.
arr2.sort();
console.log(arr2);
//따라서 대부분의 경우 sort 함수의 인자값으로 비교함수를 전달하여 정렬.
//????????????????????????????
// 23 0110 이진법 23 -> 유니코드
var arr2 = [23,12,3,4,777]
arr2.sort(function(a,b){
console.log(a); // a : 맨앞자리 뺴고.
console.log(b); // b 맨 뒤에거 뺴고
return a-b; // 12-23
});
console.log(arr2); // 나는 여기따가 console.log(arr2.sort());??같은걸 침.
//name 프로퍼티의 값을 기준으로 알파벳 순으로 정렬
var arr3=[
{name:"a"},
{name:"b"},
{name:"c"},
{name:"d"},
];
arr3.sort(function(a,b){
return a.name>b.name
});
console.log(arr3);
</script>
</body>
</html>
* 개인 프로젝트로 홈페이지 만들기 어떤거 하고싶은지 고민해보기 !
내가 구현하고 싶은 기능들을 짬뽕해서 만들어도 됨.
-
주말 ->
경일 홈페이지 첨부터 다시 겅부 +
경일 홈페이지 완성 시키기
만들고 싶은 홈페이지 생각해보기
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [14일차]20210401 fiverr 사진 움직이기 + 기타 (0) | 2021.04.01 |
|---|---|
| [13일차 복습] JavaScript 함수, 객체 , 배열 연습 (1) | 2021.04.01 |
| [12일차 복습] JavaScript 기초 문법 연습 (0) | 2021.03.30 |
| [12일차]20210330 경일홈페이지 취업자인터뷰 버튼만들기 / 조건문, 반복문, 함수 function기초 복습 (0) | 2021.03.30 |
| [11일차 연습] 움직이는 이미지 overflow:hidden, Java script (0) | 2021.03.30 |
