웹개발 기초

웹개발 종합반2(javascript)

열심히 해 2024. 8. 28. 11:41
  • Javascript: 웹 조작, 웹 페이지에 동적인 기능 넣기. 서버를 만드는 데에도 쓰임. 아주 범용적인 언어. java와 javascript는 아무 관련이 없다.
<head>
    <script>
    </script>
</head>

 

<head></head> 사이에 <script>를 넣어 사용.

 

프로그래밍 언어의 5요소.

 

  • 변수 : 값을 담는 요소. 문수, 숫자 등, 값을 담에서 한 번에 관리. 변수의 이름은 최대한 직관적으로 지어서 알아보기 쉽게 해야한다. 

let a = 1
1 = 'Jhon' // 문자열은 작은 따옴표로 감싸준다.

 

let으로 변수를 선언(저장)한다. 한 번 선언 했으면 다시 선언하지 않고 값을 넣을 수 있다.

 







  • 자료형 : 자료형의 대표, 리스트와 딕셔너리. 변수를 꾸러미로 관리하고 싶을 때 사용.

    리스트[]는 순서가 중요하며 0부터 센다. 
            let a = ['john', 'bob', 'smith']
            console.log(a[1])

 

딕셔너리{}는 키(key)와 벨류(value)값의 묶음이며, 특정 요소에 대한 다양한 변수를 담을 수 있다.

        let john = {'sex':'male', 'age':30, 'height':180}
        console.log(john)

 

 

        let john = {'sex':'male', 'age':30, 'height':180}
        console.log(john['age'])

 

 

    <script>
        let john = {'sex':'male', 'age':30, 'height':180}
        let age1 = john['age']
        let height1 = john['height']
        console.log(age1, height1)
    </script>

 


*프로그래밍언어를 배울 때는, 무엇이 어떤 상황에서 쓰인다고 생각하기 보다는 어떤 때에 무엇이 쓰이는지 기억하는 게 좋다. 예를 들어 '[]는 리스트를 만들 때 쓴다'가 아니라 '리스트에는 []를 쓴다', '딕셔너리의 키값을 가져올 때 딕셔너리[]를 쓴다' 등으로 알아두자

  • 조건문 : if, else
            let age = 15;
            if (age<20){
                console.log('청소년입니다')
            }
            else{
                console.log('성인입니다')
            }

 

  • 반복문 : 반복 대상이 있어야 함. 보통 어느 꾸러미의 수만큼 반복하라고 함. 대게 리스트라는 꾸러미와 사용.
            let ages = [15, 28, 40, 7, 73, 52, 13];
            ages.forEach(a => {
                console.log(a)
            });

    -> ages에서 순서대로 값을 빼오는 일을 반복한다. 빼오는 값의 이름을 a라 한다.

        let ages = [15, 28, 40, 7, 73, 52, 13];
        ages.forEach(a => {
            if (a < 20) {
                console.log('청소년입니다')
            }
            else {
                console.log('성인입니다')
            }
        });

 

2는 2번 연속 나왔다는 의미.

        let persons = [{'name':'john', 'sex':'male', 'age':30, 'height':180}, {'name':'jenny', 'sex':'female', 'age':18, 'height':165}, {'name':'smith', 'sex':'male', 'age':7, 'height':100}]
        persons.forEach(a => {
            console.log(a['name'])
        });

 

 

  • 함수 : function 함수이름() {}, 함수는 같은 동작을 반복하는 것이다. 함수a를 부르면 함수a가 실행된다(함수a의 기능을 한다). 함수이름은 함수의 기능을 파악할 수 있도록 최대한 직관적으로 적는다. 오류를 피하기 위해 하나의 함수에는 하나의 기능을 주는 것이 좋다.
    <script>
        function hey(){
            alert('환영합니다');
        }
    </script>
</head>
<body>
    <button onclick="hey()" type="button">로그인하기</button>
</body>

 

  • jQuery : javascript 라이브러리. 미리 작성된 javascript 코드, 복잡한 코드를 단순하고 직관적으로 만들고, 브라우저 간의 호환성 문제 또한 고려함.
    document.getElementById('hello').innerHTML = '안녕'; // javascript
    $('#hello').html('안녕'); // jquery

위 둘은 같다.


사용법: <head> 와 </head> 사이에 아래를 넣기.

css와 마찬가지로 가리켜야 조작할 수 있다. 지칭에는 id값를 쓴다.

 

        $('#q1').text('밖이야?');

(id=)q1을 지정, 그것을 문자열 '밖이야?'로 바꿔라.

 

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

 

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

 

둘은 동치다. 변수지정이 어떻게 되는지 잘 따라가고, $(), ${} 등의 사용에 대해 주목하자.

 

1. 원하는 html 태그를 백틱(``)으로 묶는다. 
백틱(``)은 html 요소를 통째로 넣을 때 묶어주는 기호로서 문자와 변수를 함께 쓸 수 있다. 이를 통해 프로그램은 ``안의 내용을 단순한 문자열로서 인식한다.

2. 태그 안에 들어갈 값은 ${} 로 표시하고, 그 안에는 자료가 있는 변수를 넣는다.

3. 통째로 넣을 html 요소를 $('#아이디')로 골라주시고 appnd(변수)를 넣는다.

 

        function openclose() {
            $('#postingbox').toggle();
        }

 

함수 openclose는 id=postingbox를 toggle한다.
toggle은 두 가지 상태 사이를 전환하는 동작을 뜻한다. 즉, 어떤 속성이나 상태를 켜거나 끄는 동작을 말한다.

 

        function makeCard() {
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();

            let temp_html = `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">${date}</small>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);

 

let image = $('#image').val(); 에 주목하자. image를 (id=)image의 val(벨류값)으로 지정한다는 뜻이다.
  val.()은 jQuery 메서드 중 하나로 선택한 요소의 값을 가져오는 역할을 한다.
    메서드(method)는 어떤 객체가 가지고 있는 어떤 동작을 의미하는데, 쉽게 말해 일종의 함수다.

이때 <img src="${image}",  <h5 class="card-title">${title}</h5> , <p class="card-text">${content}</p> , <small class="text-muted">${date}</small>는 위에서 지정된 벨류값으로 한다는 뜻이다.

이후 $('#card').append(temp_html 한다. 

이상이 makeCard함수의 기능이다.

'웹개발 기초' 카테고리의 다른 글

웹개발 종합반 1  (1) 2024.08.27
웹개발 종합반 0-1 html 언어  (1) 2024.08.27
웹개발 종합반 0  (0) 2024.08.26
용어 정리  (0) 2024.08.26

'웹개발 기초'의 다른글

  • 현재글웹개발 종합반2(javascript)

관련글

티스토리툴바