<html>
    <body>
        
        <h1>함수</h1>
        <script>
            function VAT(price,rate=0.1){
                return(price*rate);
            }
            // VAT(10);
            
            function sum(a,b){
                return(a+b);
            }
            console.log(sum(1,2)); 
        
            alert(VAT(10)+'입니다.');
            if(confirm(VAT(10)+'입니다. 납부할까요?' )){

                alert('납부했습니다.');
            }

        </script>
    </body>
</html>

위와 같이 작성할 수 있다.

함수명 앞에는 funtion을 적는다. 매개변수를 괄호안에 쓴다. rate는 상수이다. 

'Front-End > JavaScript' 카테고리의 다른 글

함수 호이스팅(Hoisting)  (0) 2022.03.23
콘솔을 통해 값 입력 받기  (0) 2022.03.23
자바스크립트 코드에 html 태그 쓰기  (0) 2022.03.23
객체(object)  (0) 2022.03.23
쿼리셀렉터(querySelector,querySelectorAll)  (0) 2022.03.23 
//''로 묶은 표기법
document.write('<li><a href="'+i+'">'+members[i] +'</a></li>');

//백터럴 표기법
document.write(`<li><a href="${i}">${members[i]}</a></li>`);

html 코드

<html>
    <body>
        <h1>배열과 반복문</h1>
        <ul>
        <script src="index.js">
        </script>
        </ul>
    </body>
</html>​

 

javascript 코드

var members=['솜차이','푸윗','삐띠','싸란'];
 
            for (let i=0; i<members.length; i++) {
                    console.log(members[i]);
//                     document.write('<li><a href="'+i+'">'+members[i] +'</a></li>');
              //백터럴 표기법
                    document.write(`
                    <li><a href="${i}">${members[i]}</a></li>`);
                }
        
            var names ='쏨차이 푸윗 뿌이';
            console.log(names.split(' '));

            var as =document.querySelectorAll('a');
            for(let i=0; i<as.length; i++){
                as[i].style.color='darkgreen';
            }
//''로 묶은 표기법
document.write('<li><a href="'+i+'">'+members[i] +'</a></li>');

//백터럴 표기법
document.write(`<li><a href="${i}">${members[i]}</a></li>`);

 

위와 같이 document.write() 안에 쓰면된다. 

See the Pen 자바스크립트 코드 안에 html 태그 넣기 by aingface (@aingface) on CodePen.

https://codepen.io/aingface/pen/dyzJvmg

'Front-End > JavaScript' 카테고리의 다른 글

콘솔을 통해 값 입력 받기  (0) 2022.03.23
자바스크립트 함수  (0) 2022.03.23
객체(object)  (0) 2022.03.23
쿼리셀렉터(querySelector,querySelectorAll)  (0) 2022.03.23
객체(object)의 길이 구하기  (0) 2022.03.23

변수: 데이터에 이름을 붙인 것

함수: 코드 처리방법에 이름을 붙인것

객체

서로 연관된 데이터와 그 처리 방법을 모아서 이름을 붙인 대상

객체를 모아서 프로그래밍하면 객체지향이고 함수를 모아서 프로그래밍하면 함수지향형

 

<html>
    <body>
        <script>
            var 세금_계산기={
                가격:10000,
                부가세율:0.1,
                부가세_계산: function(){
                    return this.가격 * this.부가세율;
                }
            }
            console.log(세금_계산기.부가세_계산());
        </script>
    </body>
</html>

 

위 코드는 세금_계산기라는 객체이다. 객체 안에는 key값으로 '가격', '부가세율', '부가세_계산'이 있다. 

벨류는 각각 가격은 10000, 부가세율은 0.1이다. 부가세_계산은 함수이다. 

 

인자(property) / 메소드에 접근하는 법

객체명.key 혹은 객체['key']로 접근할 수 있다. 위에서는 '세금_계산기.가격'과 같은 식으로 접근했다.  

'Front-End > JavaScript' 카테고리의 다른 글

자바스크립트 함수  (0) 2022.03.23
자바스크립트 코드에 html 태그 쓰기  (0) 2022.03.23
쿼리셀렉터(querySelector,querySelectorAll)  (0) 2022.03.23
객체(object)의 길이 구하기  (0) 2022.03.23
백리터럴 표기법  (0) 2022.03.23 
<html>
    <body>
        <h1>Array & Loop</h1>
        <ul>
        <script>
            var names ='쏨차이 푸윗 뿌이';
            console.log(names.split(' '));

            var as =document.querySelectorAll('a');
            for(let i=0; i<as.length; i++){
                as[i].style.color='red';
            }
        </script>
        </ul>
    </body>
</html>
var as =document.querySelectorAll('a');

querySelector(선택자) : 첫번째로 나오는 괄호 안의 선택자를 반환한다. 태그, id,class 모두 해당된다.

querySelectorAll(선택자) : 찾으려는 모든 선택자를 반환한다. 위의 코드는 모든 a태그를 찾아서 글씨를 빨간색으로 바꾸는 코드이다.

'Front-End > JavaScript' 카테고리의 다른 글

자바스크립트 함수  (0) 2022.03.23
자바스크립트 코드에 html 태그 쓰기  (0) 2022.03.23
객체(object)  (0) 2022.03.23
객체(object)의 길이 구하기  (0) 2022.03.23
백리터럴 표기법  (0) 2022.03.23 
var prices = {
    "fryed_chicken": 15,
    "hamburger": 5,
    "pizza": 20
}
var sLength=Object.keys(prices).length;

Object.keys(객체명).length;

위와 같이 입력해야한다. 

 

리스트나 문자열은 변수명.length를 하면 된다.

'Front-End > JavaScript' 카테고리의 다른 글

자바스크립트 함수  (0) 2022.03.23
자바스크립트 코드에 html 태그 쓰기  (0) 2022.03.23
객체(object)  (0) 2022.03.23
쿼리셀렉터(querySelector,querySelectorAll)  (0) 2022.03.23
백리터럴 표기법  (0) 2022.03.23 
const employees = [
  {
      name: 'kim',
      employeeId: 12312,
      departure: 'HR'
  },
  {
      name: 'lee',
      employeeId: 15515,
      departure: 'development'
  },
  {
      name: 'park',
      employeeId: 25467,
      departure: 'design'
  }
]

/*1.name이 park인 사람을 찾아서 부서를 HR로 바꾸세요*/
for(i in employees){
    if(employees[i].name=='park')
        employees[i].departure='HR';

    /*2. 웹 화면에 employees 정보를 출력해 수정되었는지 확인하세요.*/
    
    //일반 출력
    // document.write(employees[i].name+"'s departure: "+ employees[i].departure+'<br>');
    
    //백리터럴
    document.write(`${employees[i].name}'s departure: ${employees[i].departure}<br>`); 
}

 

//일반 출력
    // document.write(employees[i].name+"'s departure: "+ employees[i].departure+'<br>');
    
    //백리터럴
    document.write(`${employees[i].name}'s departure: ${employees[i].departure}<br>`);

문장을 출력할때 ""를 쓰지 않고 키보드에서 ~밑에 있는 ``로 감싸서 출력할 수 있다.

string이 아닌 변수를 입력할땐 ${}로 감싸주면 된다. 

 

장점

- 데이터 타입이 다른 데이터를 섞어서 입력 시 +를 안해도 된다. 

- 줄넘김이나 띄어쓰기 그대로 출력된다. 

 

'Front-End > JavaScript' 카테고리의 다른 글

자바스크립트 함수  (0) 2022.03.23
자바스크립트 코드에 html 태그 쓰기  (0) 2022.03.23
객체(object)  (0) 2022.03.23
쿼리셀렉터(querySelector,querySelectorAll)  (0) 2022.03.23
객체(object)의 길이 구하기  (0) 2022.03.23

+ Recent posts

티스토리툴바