[Pre-course] 웹개발 기초 : JavaScript, JQuery

JavaScript

기초문법 1.

basic keyword : #변수 #자료형 #함수 #조건문&반복문

- 변수 : 값을 담는 상자.

- 변수 이름 : 직관적으로 실제로 쓰이는 단어로 지어야 함

- 변수 선언 : let 을 이용

- '='의 의미: 프로그래밍 언어에서는 = 는 가 같다 의 개념이 아닌 오른쪽에 값을 왼쪽에 넣으라는 의미이다.

ex. 변수 대입( a = 2 )의 의미→ "오른쪽에 있는 것을 왼쪽에 넣기" (2를 a라는 변수에 넣는다)

  <script>
    let a = 'hello';
    let b = 'nice to meet you';
    console.log(a);
    console.log(b);
    console.log(a+b);
    // hello // nice to meet you //
    // hellonice to meet you //
    
    let name = 'James';
    let age = 30;
    // James // 30
  </script>

기초문법 2.

자료형

1) List (리스트)

: 순서를 지켜서 가지고 있는 형태

  <script>
  
/* 리스트 선언 하기 */
    let fruits = ['apple', 'pear', 'orange'];
    console.log(fruits[0]); //apple
    
/* 리스트 길이 구하기 */
    console.log(fruits.length) //3
    
  </script>

2) Dictionary (딕셔너리)

: 키(Key)-밸류(Value) 값의 묶음

  <script>
  // Dictionary 선언 방법 1 with 중괄호
    let person_dict = {} 
    
 // 선언 방법 2
    let person = {'name':'bob', 'age':30, 'height':180};
    
    console.log(person['name']); //bob
    
  </script>
  
  
  <script>
  
    let person = {'name':'bob', 'age':30, 'height':180};
    let name = person['name'];
    let age = person['age'];
    console.log(name, age); //bob 30
    
  </script>

**리스트와 딕셔너리와의 조합

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

**사칙연산 외 기타 연산자

//'나눗셈의나머지'를 구하고 싶은 경우//

let a = 20
let b = 7

a % b = 6

//특정 문자로 문자열을 나누고 싶은 경우//

let myemail = 'sparta@gmail.com'

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

result[0] // sparta
result[1] // gmail.com

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

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

기초문법 3.

Condition (조건문)

if (조건) {
	// 조건에 맞다면~
} else {
	// ~가 아니라면~
}

  <script>
    
    let age = 34;

    if (age < 20) {
      console.log('you are a teenager.');
    } else {
      console.log('you are an adult');
    }

  </script>

Loop (반복문)

    array.forEach(element => {
      
    });

  <script>

    let ages = [15, 30, 28, 7, 40, 13];

    ages.forEach(a => {
      if (a < 20) {
        console.log('you are a teenager.');
      } else {
        console.log('you are an adult');
      }
    });

  </script>

JavaScript 활용문법 (DOM)

함수 만들기

//'영화 기록하기' 버튼을 누르면, 'Hello' 라는 alert 창이 뜬다. 
 
 <script>
    function 함수이름() {
      alert('Hello');
    }
  </script>
  
  <body>
  	  <button type="button" class="btn btn-outline-light" onclick="
      함수이름()">영화 기록하기</button>
  </body>

글자 색 바꾸기

//'영화 기록하기' 버튼을 누르면, '킹덤' 이라는 글자 색이 변한다.
 
  <script>
    function funtionName() {
      document.getElementById('title').style.color = 'red';
    }
  </script>
  
  
  // id 추가하기
  
  <body>
	 <h2 id="title">킹덤</h2>
  </body>

JQuery

JQuery란?

HTML의 요소들을 조작하는 Javascript를 미리 더 쉽게 작성해둔 라이브러리.

Import : 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다.

  // JQuery CDN Import
  
  <title>....</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키며 조작을 하게 된다.

  // 글자를 '쥬라기월드'로 바꿔
  
  <script>
    function funtionName() {
      $('#title').text('쥬라기월드');
    }
  </script>
  
  <body>
  	<h1 id="title">킹덤</h1>
  </body>

연습하기

<!DOCTYPE html>
<html>
    <head>
        <title>자바스크립트 문법 연습하기!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <style>
        .button-part {
            display: flex;
            height: 50px;
        }
    </style>
    <script>
      function checkResult() {
        let c = [
          {'name':'영수', 'age':30},
          {'name':'철수', 'age':35}
        ]
        $('#q1').text(c[1]['name']); //철수
      }
    </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"></div>
        </div>
        <div class="dict-part">
            <h2>3. 딕셔너리</h2>
            <div id="q2"></div>
        </div>
        <div>
            <h2>4. 리스트 딕셔너리</h2>
            <div id="q3"></div>
        </div>
    </body>
</html>

// List 자료형

      function checkResult() {
        let a = ['사과', '배', '감', '귤']
        $('#q1').text(a[2]); //감
      }


// Dictionary 자료형

	let b = {'name' : '영수','age' : 30}
    $('#q1').text(b['name']); //영수
    
    
// List & Dictionary 자료형

	  function checkResult() {
        let c = [
          {'name':'영수', 'age':30},
          {'name':'철수', 'age':35}
        ]
        $('#q1').text(c[1]['name']);
      }

JQuery 연습하기

지우기

<script>
    function checkResult() {
      let fruits = ['사과','배','감','귤','수박'];
      $('#q1').empty(); // 
    }
</script>

다 지우고, 감자를 붙이기(추가하기)

    function checkResult() {
      let fruits = ['사과','배','감','귤','수박'];
      $('#q1').empty();

      let temp_html = `<p>감자</p>`;
      $('#q1').append(temp_html);
    }

다 지우고, 사과를 붙이기(추가하기) 단 최소한의 코드를 통해서

    function checkResult() {
      let fruits = ['사과','배','감','귤','수박'];
      $('#q1').empty();

      let a = fruits[0];
      let temp_html = `<p>${a}</p>`;
      $('#q1').append(temp_html);
    }

다 지우고, 사과부터 수박까지 모두 붙이기


    function checkResult() {
      let fruits = ['사과','배','감','귤','수박'];
      $('#q1').empty();

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

이름과 나이 두가지 변수와 함께

**temp_html 은 temporary html

    function checkResult() {
          let people = [
      {'name':'서영','age':24},
      {'name':'현아','age':30},
      {'name':'영환','age':12},
      {'name':'서연','age':15},
      {'name':'지용','age':18},
      {'name':'예지','age':36}
    ]

      $('#q2').empty();

      people.forEach(a => {
        let name = a['name'];
        let age = a['age'];
        let temp_html = `<p>${name}는 ${age}살입니다.</p>`;
        $('#q2').append(temp_html);
      });
    }

전체 html

<!DOCTYPE html>
<html>

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

      $('#q2').empty();

      people.forEach(a => {
        let name = a['name'];
        let age = a['age'];
        let temp_html = `<p>${name}는 ${age}살입니다.</p>`;
        $('#q2').append(temp_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>

728x90

'부트캠프 개발일지 2023-2024 > Pre-course 사전학습' 카테고리의 다른 글

[Pre-course] 웹개발 기초 : addDoc, getDoc, Github 배포, 파이썬 (0)	2023.10.03
[Pre-course] 웹개발 기초 : Firebase, Database, Firestore Database (데이터 넣기, 데이터 가져오기) (0)	2023.10.03
[Pre-course] 웹개발 기초 : Client-Server, Fetch (1)	2023.10.02
[Pre-course] 웹기발 기초 : JQuery 2 (1)	2023.10.01
[Pre-course] 웹개발 기초 : html, css (0)	2023.10.01

Whereanna 🐈‍⬛

[Pre-course] 웹개발 기초 : JavaScript, JQuery

'부트캠프 개발일지 2023-2024 > Pre-course 사전학습' 카테고리의 다른 글

티스토리툴바

[Pre-course] 웹개발 기초 : JavaScript, JQuery

'부트캠프 개발일지 2023-2024 > Pre-course 사전학습' 카테고리의 다른 글

관련글

티스토리툴바