Notice
Recent Posts
Recent Comments
Link
«   2026/03   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

ALLYES

[2022년 청년친화형 기업 ESG지원 사업 - 25] 본문

ESG

[2022년 청년친화형 기업 ESG지원 사업 - 25]

Allyes_99 2022. 10. 7. 17:41

일시 : 2022.10.07

시간 : 9:00 ~ 18:00

오전 : JavaScript

오후 : Web Crawling

오전 [JavaScript]

 

  • Javascript 연산자
    • 산술연산자 
      • +
      • -
      • *
      • /
      • %
      • **
    • 증감연산자
      • ++
      • --
    • 대입연산자
      • =
      • +=
      • -=
      • *=
      • /=
      • %=
    • 연결연산자
      • +(문자열 결합)
    • 비교연산자
      • ==
      • !=
      • ===
      • !==
      • >
      • >=
      • <
      • <=
    • 논리연산자
      • &&
      • ||
      • !
    • 조건연산자
      • 조건?실행문1:실행문2
  • Javascript 형변환
    • parseInt() 
      • 문자열을 숫자(정수)로 변경
    • parseFloat()
      • 문자열을 숫자(실수)로 변경
    • Number()
      • 다른 자료형을 숫자형(정수&실수)로 변경
    • toString()
      • 숫자를 문자열로 변경
  • 조건문
    • 조건에 따라 결과값 출력
  • 반복문
    • 어떤 조건에 만족할 때까지 같은 처리를 반복하는 구조
<!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>
        console.log(10/3);
        console.log(10%3);  

        // ==, != : 자료형을 자동으로 변환(ex. 문자열 -> 숫자)
        // ===, !== : 자료형도 확인
        console.log(10=='10');  
        console.log(10==='10'); // False
        // console.log('10' === '10') True
        console.log(10!='10');
        console.log(10!=='10');

        let num = 312;
        console.log("백의 자리 이하 버린 결과 >>" ,(num - (num%100)))
        console.log("백의 자리 이하 버린 결과 >>" ,parseInt(num/100)*100)

        let num1 = '100';
        let num2 = 200;
        console.log("100과 200의 더한 결과>>", Number(num1)+num2)

    </script>
</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>
    <script>
        var name = prompt("이름을 입력하세요.");
        console.log("어서오세요!");
        console.log(name +  "님, 환영합니다!🎉");

    </script>
</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>
    <script>
        // 예제1
        let num = 15;
        // num 10보다 작으면 10보다 작습니다 출력, 10 이상이면 10보다 큽니다 출력
        // document.write( num > 10 ? "10보다 큽니다.":"10보다 작습니다.")

        if (num < 10) {
            document.write("10보다 작습니다.")
        }
        else {
            document.write("10보다 큽니다.")
        }

        // 예제2
        // 값에 따라 따로 처리 -> switch문
        var season = "여름";
        // season 봄 -> "봄" 여름 -> "여름"
        switch (season) {
            case "봄":
                alert("봄");
                break;
            case "여름":
                alert("여름");
                break;
            case "가을":
                alert("가을");
                break;
        }
        // 예제3
        let java = Number(prompt("Java 점수를 입력하세요"));
        let python = Number(prompt("Python 점수를 입력하세요"));
        let R = Number(prompt("R 점수를 입력하세요"));
        let avg = ((java + python + R)/3).toFixed(2);
        // toFixed : 소숫점 2자리까지 출력
        let grade;
        if (avg >= 90) {
            grade = "A"
        }
        else if (avg >= 80) {
            grade = "B"
        }
        else if (avg >= 70) {
            grade = "C"
        }
        else{
            grade = "F"
        }
        console.log("당신의 평균은 "+  avg+ "이고 " + grade + "입니다.");



    </script>
</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>
    <script>
    let color = prompt("색깔을 적어주세요(빨강,초록,파랑)");
        switch(color){
            case "빨강":
            document.querySelector("body").style.backgroundColor = "red"
            break;
            case "초록":
            document.querySelector("body").style.backgroundColor = "green"
            break;
            case "파랑":
            document.querySelector("body").style.backgroundColor = "blue"
            break;
        }
    </script>
</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>
    <script>
        // 숫자 2개 입력
        let num1 = Number(prompt("시작 숫자 입력 :"));
        let num2 = Number(prompt("마지막 숫자 입력 :"));

        let sum = 0; // 누적합(시작 숫자 ~ 마지막 숫자 총합)

        for(let i= num1; i<=num2; i++){
            sum +=i;
        }
        /*
        while(true){
            if(){
                break;
            }
        }
        */
        alert(sum)
    </script>
</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>
    <script>
        // 0~1랜덤 -> 0~100 랜덤
        // Math.floor(Math.random()*100) : 0~99
        let ans = Math.floor(Math.random()*10)+1;

        while(true){
            let num = Number(prompt("숫자를 입력해주세요"));
            if(num == ans){
                alert("정답🎉");
                break;
            }
            else if(num < ans){
                alert("입력한 값보다 큰 수입니다.");
            }
            else if(num > ans){
                alert("입력한 값보다 작은 수입니다.");
            }
        }
        console.log(ans);
    </script>

</body>
</html>
  • 내부 JavaScript
    • 작성 위치에 따라 실행 순서와 브라우저 렌더링에 영향을 미침

<!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">
    <!-- 외부 자바 스크립트 파일 불러오기 -->
    <!-- 브라우저가 자바 스트립트 파일을 다운로드 받아오는 과정이 필요
        -> 렌더링을 할 수가 없음(화면에 컨텐츠를 보여줄 수 없음)  -->
    <script src ="./Ex10.js"></script>
    <!-- 렌더링동안 병렬로 다운로드 명령
        다운로드, 렌더링 속도/시간 절약할 수 있음, 실행할 때는 렌더링을 잠시 멈춤 
        원하는 대로 화면이 보이지 않을 수 있다 라는 단점! -->
    <script async src ="./Ex10.js"></script>
    <!-- 모든 파일 병렬로 다운로드 렌더링이 모두 완료 후에 실행 -->
    <script defer src ="./Ex10.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- onclick : 버튼을 클릭했을 때 자바스크립트 기능을 호출 -->
    <button onclick="a()"> 버튼1</button>
    <button onclick="alert('마우스올림')">버튼2</button>
    <button onmouseenter="alert('버튼3번에 올림')">버튼3</button>
    <button onmouseleave="alert('버튼4')">버튼4</button>
</body>
</html>
function a(){
    alert("a 호출!")
}
  •  객체
    • 개념
      • 키(key)-값(value)를 쌍으로 데이터를 저장하는 구조
    • 배열
      • 개념
        • 여러 자료들을 한꺼번에 다룰 수 있는 자료구조
        • 여러 자료형을 섞어서 하나의 배열에 저장 가능
      • 특징
        • 인덱스와 인덱스에 대응하는 데이터들로 이루어진 자료구조
          • 배열에 데이터를 추가할 때 자동으로 공간 할당
        • 모든 타입을 저장할 수 있는 구조
          • 한 배열의 요소가 모두 같은 타입일 필요없음, 다른 배열이나 객체를 포함할 수도 있음
        • 인덱스 0부터 시작
          • 배열의 시작 위치에서부터 데이터가 있는 상대적인 위치를 의미
<!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>
        // 배열선언
        // 배열의 레퍼런스 값(주소 값)을 저장할 변수
        let numList = [];
        let numList2 = new Array();

        // 배열 생성
        let numList3 = [1,2,3];
        let numList4 = new Array(1,2,3);

        // 배열에 데이터 추가
        numList2[0] = 1;
        numList2[1] = '가나';
        numList2[2]  = true;
        console.log(numList2.length);
    </script>
</body>
</html>
  • 배열 접근
    • 반드시 배열 생성 후 에 접근 할 수 있다
    • 배열 변수명과 []사이에 원소의 인덱스를 적어 접근
    • 인덱스 0부터 시작
  • 배열의 크기
    • 배열의 크기는 동적
    • 배열의 크기가 지정되어 있어도 데이터를 추가하면 저장공간이 자동으로 할당이 됨
    • 배열의 크기는 배열의 length 프로퍼티(property)에 저장

오후 [Web Crawling]

 

  • Big Data
    • 디지털 환경에서 생성되는 수치, 문자, 이미지, 영상 데이터를 모두 포함하는 대규모 데이터
    • 규모, 속도, 다양성, 정확성, 가치
  • 데이터 분석 과정
    • 데이터 수집 & 저장
    • 데이터 처리 & 분석
    • 데이터 시각화 & 응용
  • 수집 데이터 형태
    • 정형(Structured)
    • 반정형(Semi-Structured)
    • 비정형(Unstructured)
  • 웹 크롤링
    • 웹 사이트의 내용에 접근하여 원하는 정보를 추출해 내는 행위
  • 웹 크롤링 라이브러리
    • requests
      • 접근할 웹 페이지의 데이터를 요청/응답받기 위한 라이브러리
    • BeautifulSoup
      • HTML문서에서 원하는 데이터를 추출하기 쉽게 해주는 라이브러리

 

 

'ESG' 카테고리의 다른 글

[2022년 청년친화형 기업 ESG지원 사업 - 27]  (1) 2022.10.11
[2022년 청년친화형 기업 ESG지원 사업 - 26]  (0) 2022.10.11
[2022년 청년친화형 기업 ESG지원 사업 - 24]  (1) 2022.10.07
[2022년 청년친화형 기업 ESG지원 사업 - 23]  (1) 2022.10.05
[2022년 청년친화형 기업 ESG지원 사업 - 22]  (1) 2022.10.04
'ESG' Related Articles more