본문 바로가기
카테고리 없음

[왕초보] 웹개발 2주차 - JS

by GREEN나무 2024. 10. 25.
728x90

Javascript 기초 문법

◆ html 코드에서 사용하기

<head> 안에서 <script>에 작성합니다.

...
<head>
   ...
   <style> ... </style>
   <script>
      // 여기에 js를 적으세요
   </script>
</head>
<body>
   ...

 

◆  consol.log 확인하기

개발자 도구(F12)에서 'Console'을 선택하세요.

    <script>
        let a = 'hello';
        console.log(a);
    </script>

 

문장 더하기

출력할 문장의 변수 사이에 '+'를 넣으세요.

    <script>
        let a = 'hello';
        let b = '안녕하세요';
        console.log(a+' '+b);
    </script>

let a = 2
let b = 3
console.log(a+b) // 5

let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국

 

◆  리스트 & 딕셔너리

리스트

리스트에 들어있는 첫 번째 값은 [0]부터 시작합니다.

리스트변수 선언은 'let a_list = [ ]'나 'let a = [1,2,3 ]'으로 할 수 있습니다.

'let a'로 변수 선언 후 'a = [ ]'로 리스트변수 'a'를 만들 수 있습니다.

...<script>
        let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
        a = ['사과', '수박', '딸기', '감']
        //
        let b = ['사과', '수박', '딸기', '감'] // 로 선언 가능
        //
        let c
        c = ['사과', '수박', '딸기', '감'] // 로 선언 가능

        console.log(a[1]) // 수박
        console.log(b[2]) // 딸기
        console.log(b[3]) // 감

        //리스트 길이 구하기
        console.log(a.length) //4
    </script>...

 

딕셔너리(객체) :  키(Key)-밸류(Value) 값의 묶음

※ 디렉터는 리스트와 다르게 변수명에서 '_dict'를  생략하면 오류가 발생합니다.

<script>

        let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

        a_dict.name = '하은';   // 새로운 속성 name을 추가
        a_dict.age = 27;        // 새로운 속성 age를 추가
        a_dict.hobby = '독서';  // 새로운 속성 hobby를 추가

        // 
        let b = { 'name': '하은', 'age': 27, 'hobby': '독서' } // 로 선언 가능
        //
        let c
        c = { 'name': '하은', 'age': 27, 'hobby': '독서' }


        console.log(a_dict)
        //console.log(a['name']) //오류. 
        //디렉터는 리스트와 다르게 변수명에서 '_dict'생략 시 오류발생

        console.log(a_dict['name']) // 하은
        console.log(b['age']) // 27
        console.log(c['hobby']) // 독서

    </script>

 

리스트와 딕셔너리(객체)의 조합

let a = [
	{'name':'하은','age':27},
	{'name':'하민','age':15},
	{'name':'민희','age':20}
]
console.log(a[0]['name']) //하은
console.log(a[1]['age']) //15

 

특정 문자열로 문자열 나누기 (리스트 활용)

    <script>
        let myemail = 'sparta@gmail.com'

        let result = myemail.split('@') // ['sparta','gmail.com']
        console.log(result[0]) // sparta
        console.log(result[1]) // gmail.com

        let result2 = result[1].split('.') // ['gmail','com']

        console.log(result2[0]) // gmail
        console.log(result2[1]) // com

        let domain = myemail.split('@')[1].split('.')[0] // 한줄 로 쓰기
        console.log(domain);  // gmail
    </script>

 

◆ 조건문, 반복문

조건문 if, else

if (조건) { 

   // 조건에 부합한 경우 실행 햅니다.

   } else{

   // 조건에 부합하지 않을 경우 실행 홥니다.

    <script>
        let age = 15;

        // 조건문 if, else
        if (age < 20) {
            console.log('청소년 입니다.');
        } else {
            console.log('성인 입니다.');
        }
    </script>

 

반복문

리스트에서 순서대로 꺼내서 처리합니다.

    <script>
        
        let ages = [14,5, 45,65, 84,45, 55]

        /*foreach 자동완성 사용 
        
        array.forEach(element => {
            
        }); 

        배열(array)을 forEach 돌려서 사용합니다.
        'array'를 리스트 변수명으로 수정하세요
        'element'는 리스트에서 가져온 값의 변수명입니다. 수정 가능 합니다.
         */

        ages.forEach(a => {
            console.log(a);
        });

    </script>

 

반복문에서 조건문 사용하기

    <script>

        let ages = [14, 5, 45, 12, 56, 45, 8]

        ages.forEach(a => {
            //'a'는 리스트에서 꺼내온 값의 변수명 입니다.

            if (a < 9) {
                console.log('영유아 입니다.');
            } else if (a < 20) {
                console.log('청소년 입니다.');
            } else {
                console.log('성인 입니다.');
            }
        });

    </script>

 

 

◆ 웹페이지에 동작 넣기

함수

function 함수명() {

   //기능

}

함수 호출은 '함수명()'로 합니다.

    <script>
        function hey(){
            // 기능
        }

 

버튼 눌러 함수 사용하기

버튼 사용 방법 : '<button> 안에 'onclick = '함수명()''을 추가하세요,

<!--영화기록하기 버튼을 누르면 '안녕하세요' 알림창이 뜹니다.-->
...
<head>
   ...
   <script>
        function hey() {
            alert('안녕하세요'); 
            //alert 기능은 웹 페이지에서 간단한 메시지 창을 띄워 사용자에게 알림을 표시하는 데 사용됩니다.
        }
    </script>
<body>
   ...
            <button onclick='hey()' type="button" class="btn btn-outline-light">영화기록하기</button>
            <!--버튼 사용 방법 : '<button> 안에 'onclick = '함수명()''을 추가하세요-->
   ...
</body>

 

 

 

◆  JQuery ( 라이브러리)

1) 쓰기 전에 "임포트"를 해야합니다

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <!-- JQuery를 <title> 아레에 넣어주세요 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

 

2) 사용할 값에 ID 값을 붙여주세요

$('#아이디명') : id = '아이디명'가 있는 부분을 가리킵니다.

<head>
    ...
    <title>스파르타플릭스</title>
    <!--JQuery 자리-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    ...
    <style>
        ...
    </style>
    <script>
        function hey() {
            $('#title').text('쥬라기월드');
            // title의 텍스트를 '쥬라기월드'로 바꿔라
            // $('#아이디명') : id = '아이디명'가 있는 부분을 가리킵니다.            
        }
    </script>
</head>

<bodyi>
            <h1 id="title">킹덤</h1>
   ...

https://youtu.be/14zlTXj_GHE

 

버튼 눌러 없던 글씨 만들기 1

...
<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>...</style>

<script>
    function checkResult() {
        $('#q1').text('쥬라기월드');  // 'q1' 텍스트응 '쥬라기월드'로 바꾸기 
    }
</script>

<body>
   ...
    <div class="list-part">
        <h2>2. 리스트</h2>
        <div id="q1"></div>   <!-- 'q1' -->
    </div>
    ...

https://youtube.com/shorts/Lj2snDhdfJc?feature=share

 

버튼 눌러 없던 글씨 만들기 2

<script>
    function checkResult() {
        // 리스트
        let a = ['사과', '배', '감', '귤']
        $('#q1').text(a[1])// 배
        
        // 딕셔너리
        let b = { 'name': '영수', 'age': 30 }
        $('#q2').text(b['name']) // 영수
        
        // 딕셔너리를 요소로 사용하는 리스트
        let c = [
            { 'name': '영수', 'age': 30 }, // c[0]
            { 'name': '철수', 'age': 35 } // c[1]
        ]
        $('#q3').text(c[1]['age']) // 35
    }
</script>

버튼 클릭 전
클릭 후

텍스트 지우기, 붙이기 1

<script>
    // 텍스트 지우기, 붙이기
    function checkResult() {
        let fruits = ['포도', '석류', '무화과', '매실', '복숭아'];
        $('#q1').empty(); // id가 'q1'인 곳을 비우기

        let temp_html_1 = `<p>감자</p>`; // 벡티'`'로 감싸세요

        let a = fruits[0];
        let temp_html_2 = `<p>${a}<p>`; //포도


        $('#q1').append(temp_html_1 + temp_html_2);
        //id가 'q1'인 곳에 변수 'temp_html'를 넣기

        fruits.forEach(f => {
            let temp_html_3 = `<p>${f}<p>`
            $('#q1').append(temp_html_3);
        })
    }
</script>

 

 

클릭 전
클릭 후

텍스트 지우기, 붙이기 2

<script>
    let people = [
        { 'name': '서영', 'age': 24 },
        { 'name': '현아', 'age': 30 },
        { 'name': '영환', 'age': 12 },
        { 'name': '서연', 'age': 15 },
        { 'name': '지용', 'age': 18 },
        { 'name': '예지', 'age': 36 }
    ];

    function checkResult() {
        $('#q1').empty();
        $('#q2').empty();  
        
        people.forEach((person) => {
            let temp_html_2 = `<p>${person.name}는 ${person.age}살</p>`;  // 각 사람의 정보를 표시하는 템플릿
            $('#q2').append(temp_html_2);  // 각 사람에 대한 HTML 추가
        });
    };
</script>

클릭 전
클릭 후

전체코드

더보기 
<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
    body {
        background-color: rgb(126, 155, 166)
    }
</style>
<script>
    let people = [
        { 'name': '서영', 'age': 24 },
        { 'name': '현아', 'age': 30 },
        { 'name': '영환', 'age': 12 },
        { 'name': '서연', 'age': 15 },
        { 'name': '지용', 'age': 18 },
        { 'name': '예지', 'age': 36 }
    ];

    function checkResult() {
        $('#q1').empty();
        $('#q2').empty();

        people.forEach((person) => {
            let temp_html_2 = `<p>${person.name}는 ${person.age}살</p>`;  // 각 사람의 정보를 표시하는 템플릿
            $('#q2').append(temp_html_2);  // 각 사람에 대한 HTML 추가
        });
    };
</script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <div class="button-part">
        <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <div class="list-part">
        <h2>2. 붙이기</h2>
        <div id="q1">
            <p>사과</p>
            <p>귤</p>
            <p>감</p>
        </div>
    </div>
    <div class="list-part">
        <h2>3. 붙이기</h2>
        <div id="q2">
            <p>영수는 24살입니다.</p>
            <p>세종은 30살입니다.</p>
            <p>수영은 20살입니다.</p>
        </div>
    </div>
</body>

</html>

 

 

 

 

 

 

 

 

 

 

 


※ 요약

◆ html 코드에서 JS, JQuery 사용하는방법

JQuery를 사용할 때는 <head>의 <title> 아래에 JQuery를 임포트하고 <head> 밖에서 <scrip>안에 적습니다.

JQuery를 사용하지 않을 때는 <head> 안에서 <script>안에 적습니다.

◆ JS 기초문법

※ 기억할 것

◆ html 파일에서 JS는 <head>안에 <script>에서 작성합니다.

◆ 디렉터는 리스트와 다르게 변수명에서 '_dict'를  생략하면 오류가 발생합니다.

※Tip

◆Js, <scripe>에서 주석처리

      한줄 주석 : //

      여러줄 주석 : /* 여러줄 */

 

 

 

 

 

 

 

 

저작자표시

티스토리툴바