2021_08_10 JS

1) 학습한 내용

1. html

	<div id="color-bg">

		<button id="btn" type="button">클릭</button>
	
	</div>


	<!-- 자바스크립트 언어 사용 방법 1 -->

	<script src ="js/main.js"></script>
	<script src="js/custom.js"></script>

2. style.css

#color-bg {
    width: 500px;
    height: 500px;
    background: black;
}


#btn {
	width: 100px;
	height: 50px;
	line-height: 50px;

	background: purple;
	color: #ffffff;


	font-size: 20px;

}

3. main.js

// null - 변수 초기화로 명시적으로 ... 빈 값을 변수안에 할당한 상태 

// var n = null;

// console.log(n)

// undefined - 변수를 선언만 한 상태

// var u;

// console.log(u)




/* 둘의 차이점 

// console.log(typeof 10)
// console.log(typeof "Hello World")

1.
console.log(typeof null) - object로 나온다. -> 버그로 이해
console.log(typeof undefined)

2.
console.log(null == undefined)  //true
console.log(null === undefined) //false

3.
console.log(!true)  //false
console.log(!false) //true

console.log(!null)  //true
console.log(!!null) //false
console.log(!undefined) // true
console.log(!!undefined)// false 

4.
console.log(10 + null)  // 10  null = 0
console.log(10 + undefined) //NaN  = not a number

*/




//참조타입
/* 함수 (function) 
console.log(10 + 10)
console.log(20 + 30)
console.log(5 + 10)


// 임의 숫자 두 개를 전달 받아서 덧셈을 하는 기능을 만들고 싶다.
// 함수선언 상태

function sum() {

    console.log("Hello")
    console.log(10 + 10);
}

sum(); //turn on 기능 함수실행기능  = 함수 호출
*/


/* Parameter(매개변수), Argument(인수) 
//Parameter(매개변수) : num1,num2, 모든데이터입가능
function sum(num1, num2) {
    console.log(num1 + num2);
}
// Argument(인수) : 호출시 전달되는 값
sum (10,20)
sum (100, 50)



function fullName(firstName, lastName) {
    console.log(firstName + " " +lastName)
}

fullName("Eunhye", "Yeo")


function area(width, height) {
    console.log(width)
    console.log(height)

    var result = width * height
    console.log(result)
}

area(10)




function test(a) {
    console.log(a)
}

test(10)
test("Hello")
test(true)
test(null)

test(function a() {})
test([10,20,30])
test({name: "Eunhye"})
*/



//return
/*
function sum(num1, num2) {
    // console.log(num1 + num2)
    return num1 + num2
}


var result = sum(10,20)  //함수호출 30 , result = 30
console.log(result)


다른 변수의 값을 전달할때,
리턴으로 전달 받은 값으로 새로운 공식에 대입할때 사용
*/

/*
function area(hor, ver) {
    return hor * ver
}

// area(10,20) 아무것도 출력이 되지 않지만 200을 갖고 있는 상태
//console.log(area(10,20))   200 출력

var volume = area(10,20) * 100
console.log(volume)    //20000
*/



// 배열 (Array)
/*
var banana = "바나나"
var aplle = "사과"
var melon = "메론"


var fruit = ["바나나", "사과", "메론"]
console.log(fruit)

// 인덱스(index)
console.log(fruit[2])
console.log(fruit[0])
fruit[2] = "수박"
console.log(fruit[2])
*/

/*
var arr = [
    10, 
    "Hello", 
    true, 
    null,
    undefined, 
    function a() {},
    [10,20,30],
    {name: "Yeo"}
 ]

//배열안에 있는 데이터느 가능한 동일한 데이터 타입을 갖고 있어야한다.
var numm = [10, 10, 30, 3,14]
//가능한 동일한 성격을 갖고 있는 데이터로 채워주는 것이 좋다.
var fruit = ["사과", "배", "바나나"]

//배열안에 있는 배열 데이터에 접근하는 방법
var score = [[10,20,30], [100,200,300]]
console.log(score)
console.log(score[1])
console.log(score[1][2])
*/




/*property = 
  [객체 (Object) =(구성요소) 이름, 나이, 스킬, 성별]
                          + [key = velue] 

var student = {
    name: "Eunhye",
    age: 29,
    skills: ["자바스크립트","HEML","CSS"]
}
console.log(student)
//우리가 나열한순서대로 나오지 않고 알파벳순으로 나온다.
console.log(student.name) //Eunhye
console.log(student['name']) //Eunhye
console.log(student.skills[1]) //HEML

student.age = 100
console.log(student) //{name: "Eunhye", age: 100, skills: Array(3)}


student.gender = "여자"
console.log(student) //{name: "Eunhye", age: 100, skills: Array(3), gender: "여자"}
*/

/*
var student = {
    name: "Eunhye",
    age: 29,
    skills: ["자바스크립트","HEML","CSS"],

    test1: true,
    test2: null,
    test3: undefined,
    test4: {color: "red"},

    sum: function (num1, num2) {
        return num1 + num2; } //객체안 함수 : 메서드 method
}

var result = student.sum(10,20)
console.log(result)

student.sum(100,200)
console.log("Hello World")

//객체밖 함수: 함수

*/


/*원시타입과 참조타입 차이점 
var str1 = "Hello World"
var str2 = str1

str1 = "Nice"

console.log(str1) //Nice
console.log(str2) //Hello World
// 원시타입은 복사본에는 영향을 주지 않는다.


var obj1 = {name: "Eunhye"}
var obj2 = obj1

obj1.name = "park"

console.log(obj1) //name: "park"
console.log(obj2) //name: "park"
// 참조타입은 원본이 복사본에 영향을 미친다.
*/



// 배열안에 있는 색상을 버튼을 클릭할때마다 랜덤으로 가지고 오도록 적용시키기


var colors =[
       'yellow',
       'green',
       'pink',
       '#dc143c',
       'rgba(123, 123, 123, 0.5)']

var bg = document.getElementById('color-bg');
// console.log(bg);
var btn = document.getElementById('btn')
// console.log(btn)
// document라는 객체를 사용해 html문서에 id 값으로 접근


// 클릭했을때라는 행동을 버튼에 적용
// 행동자체 = Event
/* Listener는 두가지인수를 갖는다. 
- 첫번째인수: 종류 (행동), 
- 두번째인수: 익명함수(=이름없는 함수)(호출)

= 콜백 함수 (호출 기호 없이 특정 조건 하에 호출되는 함수*/
btn.addEventListener('click' , function () {
    // console.log("Hello");
    var random = Math.floor(Math.random() * 5)
    // console.log(random)
    console.log(colors[random])

    bg.style.backgroundColor = colors[random]
    // 캐멀케이스 적용!!
})





// 1 ~ 6 숫자를 랜덤하게 가져오는 게임
//  Math.random()              : 0 ~ 0.999999 < 1
//  Math.random() * 6          : 0 ~ 5.999999 < 6
//  Math.random() * 6)         : 0 ~ 5
//  Math.random() * 6) + 1     : 1 ~ 6
/*
console.log(Math.random()) 
console.log(Math.random() * 6) 
console.log(Math.floor(Math.random() * 6)) 
console.log(Math.floor(Math.random() * 6) + 1) */



/*예약어 - 자바스크립트에서 사전에 정의 해놓은 언어들
 - > 다 알 수 없으므로 변수를 만들때는 두개이상의 단어를
      조합해서 사용하는 것이 좋다.*/



/* idex 에서 
    <script src ="js/main.js"></script>
    <script src="js/custom.js"></script>
     연동시켜줄때 순서를 주의 해야 한다.
     */

console.log("Main")  

var mainVar = " Main Var"    
// console.log(mainVar)

function mainFunc(){
    console.log("Main Func")
}

4. custom.js

console.log("Custom") 


console.log(mainVar)


mainFunc()

2) 학습내용 중 어려웠던 점 및 해결방법

함수를 이해하기가 조금은 시간이 걸렸더 것같다. 또 기본적인 언어들의 종류가 많아 외우는 것이 좀 힘들었다.

3) 학습소감

오늘은 지난시간에 이어 기본적인 js 언어에 대해서 배우고 함수와 custom파일을 연결하여 스타일을 주는 방법에 대해 알아보았는데, 역시나 점점 알아야하는 언어들이 많아지고 있고 용어들도 다양하여 참 외울게 많은 것 같다.
함수도 사용해 보았는데, 바로바로 사용할 수 있기보다는 아직은 조금 시간이 필요한것 같다.