kosta 클라우드 네이티브 애플리케이션 개발 과정 day 27

kosta 클라우드 네이티브 애플리케이션 개발 과정 day 27

---

자바 스크립트에서 객체의 생성 

 

정보를 관리하기 위해 의미를 부여하고 분류하는 논리적 단위 

 

객체는 attribute와 function을 가지고 있음 

객체 생성의 두가지 방법 

createobject1();
createObject2();

function createobject1() {
    let employee1 = {};
    employee1.name = "홍길동";
    employee1.title = "과장";
    employee1.showInfo = function () {
        document.write("이름:" + this.name);
        document.write("<br>");
        document.write("직책:" + this.title);
    }
    employee1.showInfo();
}

function createObject2() {
    let employee2 = {
        name: "홍길동",
        title: "과장",
        showInfo: function () {
            document.write("이름:" + this.name);
            document.write("<br>");
            document.write("직책:" + this.title);
        }
    }
    employee2.showInfo();

 

변수가 있는 객체 

 

function createObject4() {
    let Foo = function (name, nick) {
        this.name = name;
        this.nick = nick;
        this.aNumber = 5;
        this.doFoo = function () {
            alert("i'm " + this.name);
        };
    }
    let foo1 = new Foo("안대혁", "kick");
    foo1.address = "서울시";
    foo1.f = function () {
        alert(foo1.address);
    }
    foo1.doFoo();
    foo1.f();

}

 

 

프로토타입으로 상속을 사용하는 방법 

 

Foo.prototype.aNumber = 5;
Foo.prototype.doFoo() = function(){
    alert("i'm" + this.name);
}

 

 

프로토타입과 absolute position을 사용해서 

사각형을 만들어보자 

 

function createRectangle() {
    let Rectangle = function (x1, y1, x2, y2, color) {
        this.x1 = x1;
        this.y1 = y1;
        this.x2 = x2;
        this.y2 = y2;
        this.color = color;
    }

    Rectangle.prototype.show = function () {
        let width = (this.x2 - this.x1 + 1);
        let height = (this.y2 - this.y1 + 1);
        document.write(
            "<div style='" +
            "position:absolute;" +
            "left:" + this.x1 + "px;" +
            "top:" + this.y1 + "px;" +
            "width:" + width + "px; " +
            "height:" + height + "px; " +
            "background-color:" + this.color + ";" +
            "border:1px solid #000" +
            "'>" +
            "</div>");
    }

    let r1 = new Rectangle(100, 100, 199, 299, "#ddd");
    r1.show();
}

 

 

---

자바스크립트 array 

 

let array = new Array(10);
let colors = ["blue", "black", "red", "green"];
let size = colors.length;

let arrayPracticeSelector = document.querySelector('.array-practice');
for (let i =0; i< size; i++){
    arrayPracticeSelector.innerHTML+= colors[i];
}

 

 

배열 관련된 함수들 

 

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("kiwi");
console.log(fruits);
console.log(fruits.length);

console.log(fruits.pop());
console.log(fruits);
console.log(fruits.pop());

fruits.reverse();
console.log(fruits);

fruits.shift();
console.log(fruits);

let citrus = fruits.slice(1,3);
console.log(citrus);

fruits.sort();
console.log(fruits);

 

 

String 함수들 

 

let str = "Hello, I'm a string";
console.log("문자열 길이는: " + str.length);

let str2= "hello" + 5;
console.log(typeof(str2));

let str3 = "string1 string2 string3";
let start = str.indexOf('string2');

alert(start)
alert(str3)

 

substring을 했을 때 기존의 string 값이 변하지 않는다. 

 

특정 값을 기준으로 자르기 

 

let strSplit = str3.split(' ');

 

split 한 값은 객체로 반환된다. 

 

let strSplit = str3.split(' ');
console.log(strSplit);

console.log(typeof strSplit);

=> object 

 

 

 

함수 생성 방식 

 

let sum = new Function("a", "b", "return a+b");

function sum2 (a,b){
    return a+b;
}

let sum3 = function(a,b){
    return a+b; 
}

 

 

 

자바스크립트의 여러가지 메서드들 

 

<script>
    let escaped = escape("<h3> here's a headline</h3>");
    console.log(escaped);
    document.write(escaped)

    // url 엔코딩

    let url = "http://mysite.com/홍길동";
    let encodedURL = encodeURI(url);
    let decodedURL = decodeURI(url);
</script>


<script>
    let d = new Date();
    document.write(d);
</script>


<script>
    let sum = new Function("a", "b", "return a+b");

    function sum2(a, b) {
        return a + b;
    }

    let sum3 = function (a, b) {
        return a + b;
    }

</script>


<script>
    function changeText(id) {
        id.innerHTML = "oops!";
    }
</script>
<h1 onclick="this.innerHTML ='Oops!' "> Click on this text! </h1>



<script>
    function displayDate(){
        document.getElementById("demo").innerHTML = Date();
    }

    function hideDate(){
        document.getElementById("demo").innerHTML = "";
    }
</script>
<p> 버튼을 클릭하면 <em>displayDate()</em>함수가 실행됩니다. </p>
<button id="myBtn" onclick="displayDate();">try this </button>
<button id="myBtn2" onmouseover="displayDate();" onmouseout="hideDate()">try this </button>
<p id="demo"></p>




<script>
    function displayDate(){
        document.getElementById("demo").innerHTML = Date();
    }

    function onLoad(){
        let btn = document.getElementById("myBtn");
        btn.onclick = displayDate;
        btn.onmouseover = displayDate;
        btn.onmouseout = hideDate;
    }
</script>
<div onload="onLoad()" onunload="onUnload()">

    <p> 버튼을 클릭하면 <em> displayDate()</em> 함수가 실행됩니다 </p>
    <button id ="myBtn"> try it</button>
    <p id="demo"></p>
</div>



<script>
    function checkCookies(){
        if (navigator.cookieEnabled==true){
            alert("cookie allowed")
        } else {
            alert("cookie not allowed")
        }
    }
</script>

<body onload = "checkCookies()">
</body>

 

 

---

jquery 선택자 잡기 예제 

 

$(function(){
   // ex12
   $("[class]").css("color","blue");
   // ex13
   $("[title='second']").css("color","red");
});

 

꺽쇄 클래스 => 클래스가 설정되어 있으면 

 

 

 

even, odd 필터 

 

배열 -> 0 부터시작하는 특징 적용 

    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <title>sample24</title>
      <script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script>
      <script type="text/javascript">
      $(function(){
         $("li:odd").css("color","red");
      });
      </script>
   </head>
   <body>
      <ul>
         <li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
         <li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
         <li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
         <li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
      </ul>
   </body>
</html>

 

 

jqeury 사용 실습 

 

<script type="text/javascript">
   $( function() {
      $("a").attr("href", "https://www.naver.com");
      $("a").attr("target", "_blank");
} );
</script>

 

<script type="text/javascript">
   $( function() {
      $("li:contains('삭제')").remove();
   } );  
</script>

<script type="text/javascript">
   $( function() {
      $("p").replaceWith("<h1><변경후 </h1>")
   } );  
</script>

 

<script type="text/javascript">
   $( function() {
      $("strong, p").wrapAll("<div></div>div>")
      
   } );  
</script>

 

<script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script>
<script type="text/javascript">
    $(function () {
        $("li").on("mouseenter", function(){
            $(this).addClass("on");
        })
        $("li").on("mouseleave", function(){
            $(this.removeClass("on"));
        })
    });


</script>