베짱이와 노는 개미

콘솔의 역할에 대해서 쉽게 설명해보겠다 프로그래밍을 하는 과정에서 우리가 작성한 문장이 의도대로 잘 작동하는 지 확인해보기 위한 도구이다. 예를들어서 html파일에서 버튼을 만들고 그 버튼을 누를때마다 숫자가 증가 또는 감소를 하는 웹페이지를 만들었다고 가정하자 증가버튼 감소버튼 초기화버튼 이런식으로 html파일에서 버튼 3개(버튼은 마음대로 생성해줘도 된다.)를 만들어주고 var n=0; function up(){ console.log(++n); } function down(){ console.log(--n); } function zero(){ console.log(0); n=0; } 이런식으로 각 버튼에 대한 증가,감소 하는 함수를 정의해주면 실제로 버튼이 눌렸을때 값이 변하는지를 콘솔창을 통해 확인..

오늘은 본격적으로 자바스크립트를 html에 적용해보겠다. html에 javascript를 적용하는 방법은 2가지가 있는데 그중 우리는 js파일을 따로 외부에서 만들어서 src로 링크를 걸어서 사용하는 방식을 많이 사용하기때문에 이 방법을 사용해보겠다. 일단 오늘은 간단하게 버튼을 만들어서 삼행시가 출력되는 사이트를 한번 만들어보겠다. 웹개발 이라는 키워드로 삼행시를 지어보겠다. 일단 html로 끌고올 js파일을 하나 만들어주자 확장자명만 .js로 설정해주면 된다. html파일로 우리가 만든 index.js라는 js파일을 가져와야한다.(위에서 말한 2번째 방법) body태그에 를 추가해준다. 그리고 이제 js파일로 가서 function changeText1(){ var h1 = document.getEle..

오늘은 좀 본격적으로 javascript를 직접 사용하기위해 html과 연동하는 방법에 대해서 소개해보겠다 방식은 크게 2가지가 있다. 1.html파일에 script태그를 이용하여 연동하기 이런식으로 script태그를 직접 활용하는 방식이다. 이방식은 코드가 길어지면 구조가 복잡해질 수 있기떄문에 추천하는 방식은 아니다 즉 다음에 소개되는 2번째 방식을 많이 사용한다. 2. script src를 사용하여 링크 걸기 앞서배웠던 스타일시트파일(css)을 따로 만들어서 html에 적용했던 방법과 동일하다 javascript파일을 따로 만든뒤에 src를 통해 연결해주면 되는것이다. 이런식으로 hello라는 이름의 javascript파일을 만들어서 src를 통해 연결해준다. =====================..

오늘부터 저번까지 배운 html,css와 함께 웹프론트엔드 개발에 해당하는 자바스크립트에 대해서 포스팅 할 예정이다. (에디터는 html,css할떄 썼던 Visual Studio Code를 그대로 사용) 웹개발에는 html, css, javascript 이렇게 3가지 언어가 사용된다. html, css는 정적인 효과를 다루고 javascript는 동적인 효과를 추가해주는 역할이다. 이 3가지 언어가 모두 모여서 우리가 자주 사용하는 웹사이트의 형태를 띠는 것이다. 그럼 우리가 배울 javascript는 어떤 효과를 구체적으로 가져오는지 예를 살짝 들어보자면 버튼을 누른다거나 클릭했을때 특별한 효과가 보인다던가 이런거다(뭔가 동적으로 보이는 웬만한 효과는 모두 자바스크립트와 연관) javascript는 웹..