새롭게 알고리즘에 대해 알아보겠습니다. 어렵지 않게 정의와 개념부터 부담없이 접근해보겠습니다.  알고리즘을 이해하고 있다면 우리는 프로그램을 멋지게 작성할 수 있습니다. 더 효율적이고 정확한 문제해결이 가능한 프로그램을 만들 수 있게 됩니다.   알고리즘이란 컴퓨터를 이용해서 주어진 과제를 해결할 수 있는 처리절차를 말합니다.  그 절차를 예를 들어보자면  정보의 순서를 정해 나열하고 원하는 정보를 검색하며 몇개의 숫자들의 최대공약수를 구하는 것과 같은 것입니다.  이과정에의 '처리절차'를 알고리즘이라고 합니다.  '문제해결을 위한 처리절차'라고 말할 수 있습니다 음식을 만드는 레시피도 음식을 만드는 과제를 해결하기 위한 방법을 순서대로 기록한 것이며 일종의 알고리즘이라고 할 수 있습니다.     블로그..

자바스크립트 반복문 루프에 대해서 연습해 보겠습니다 루프는 동일한 행위에 대해서 반복하는 것입니다 (여기서는 while문을 이용합니다) 구글은 검색결과를 보여주기 위해 '루프'를 사용합니다. 소프트웨어 중 루프기능이 들어 있지 않은 것은 없다고 봐도 됩니다.  이제 루프반복문을 이용한 코드를 작성해 보겠습니다. 기존의 모든 코드를 삭제하고 ' numbers'를 아이디로 비어있는 div를 넣습니다.  웹페이지에 1부터 50까지의 숫자를 출력하는 간단한 루프를 만들어 보겠습니다.  루프를 돌리게 되면 해당숫자의 값이 일정범위 내에서 바뀌면서 입력되는 '변수'가 필요합니다. 변수라는 것은 숫자나 일정한 문자를 담는 도구라고 보시면 됩니다. 변수는  'var'로 표시합니다.   var   number = 1  ..

'what is your name?' 이라는 텍스트와 텍스트 입력박스, submit버튼을 웹페이지에 만듭니다. 그런 다음에 사용자가 자신의 이름을 입력하면 'Hello [이름]!'이라는 텍스트가  페이지에 출력되도록 구성요소를 추가합니다. (이 내용을 수행하려면 사용자의 이름과 자신이 설정한 텍스트를 결합해야 합니다 아래처럼 할 수 있습니다) "Hello" + document.getElementById("name").value + "!"   + 기호는 앞과 뒤의 요소를 사슬과 같이 연결시켜줍니다.  Hello와 텍스트 박스의 값 그리고 !를 함께 결합합니다. 그러면 이내용을 코딩으로 구현해 보겠습니다.      항상 코딩의 논리적인 흐름을 반복해서 연습하세요  이 코딩을 실행하면 결과는 아래처럼 됩니다 ..

지금까지 사용자에게 정보를 알려주고 소통하기 위해 팝업창을 이용했습니다. 그러나 이제 페이지 자체 빈문단에서 메시지를 보여 주는 기능을 구현해 보겠습니다. 웹페이지에서 모든 코드를 삭제하고 아래의 내용대로 코딩을 작성합니다.  'my-paragraph'라는 아이디로 빈문단을 넣고 클릭했을때 'that was easy'라는 내용을 보여주는 팝업창이 뜨도록 버튼을 추가하라 이제 이정도는 쉽게 느껴져야 합니다. 아직도 어려우시다면 앞의 내용들을 반복해서 숙지하시기 바랍니다.  위 상자안의 내용을 코딩해 보겠습니다.    'my-paragraph' 만든다는 것은 글자가 들어갈 공간을 미리 정의해 놓은 것(만들어 놓은 것)이고 여기에는 아무것도 아직 입력하지 말고 버튼을 만들어 그 버튼을 클릭했을때 팝업창에 위의..

If문은 프로그램에 어떤 조건이 충족될때만 특정 작업을 하라는 명령이다. 이것은 웹사이트에 로그인할때 주로 사용된다. '만약 사용자 이름과 패스워드가 데이터베이스의 기록과 일치하면 사용자의 로그인을 허용하라'는 작업을 실행한다.  이제 if문을 이용해 간단한 패스워드시스템을 만들어 보자. 우선 입력창 바로 앞부분에 텍스트 'What is the password?'를 추가한다.      이 코드를 실행하면  아래와 같은 결과가 나온다.    여기까지 이해되셨다면 다음단계로 넘어간다. 사용자가 입력한 내용이 미리 정해놓은 패스워드와 일치하는지 테스트한다. 패스워드를 'coding'이라고 정하고 자바스크립트의 밑줄친  alert...  열을 아래처럼 바꾼다.       밑줄친 부분의 흐름을 설명하자면 문서에서..

암호입력시 사용자가 암호를 잘못 입력했을 경우에 아무런 결과가 나오지 않으면 안된다. 사용자에게 잘못입력되었다고 무언가 메시지를 주어야 한다.  'else'라는 키워드로 이를 해결할 수 있다. 앞의 코드에 아래 코드를 추가하라  else { alert("that's not right, try again")}       이제 틀린 단어를 아무렇게 입력하고 실행하게 되면 다음과 같은 메시지창이 뜬다. 점점 모양을 갖춘 코딩이 되어 가고 있다 ^^

이제 코드를 바꿔서 'clicked!!' 라는 팝업창을 띄우지 않고 사용자가 박스안에 직접 입력한 내용을 팝업창으로 띄워 보겠습니다.  먼저 다음과 같이 입력창에 아이디를 부여합니다.    그 다음은 자바스크립트의 alert("clicked")를 다음과 같이 바꿉니다  alert(document.getElementById("my-input").value)     위 코드가 무슨 작업을 진행하고 있는지 이해가 되시나요? 문서 또는 HTML 페이지 안의 아이디 'my-input'을 가진 구성요소의 값을 팝업창으로 띄우고 있습니다.  이를 실행해 보면 박스 안에 어떤 내용이 입력되어도 팝업창으로 출력이 됩니다.  아래와 같은 코드에서 어떤 부분을 수정하면  위에 설명한 것처럼 무엇을 입력해도 팝업창으로 뜨도록..

앞의 글에서  클릭을 통해서 팝업창을 띄우고 스타일을 바꾸는 법에 대해 알아 보았습니다. 이제 텍스트박스안에 입력되어진 사용자의 정보를 가져오는 법에 대해 알아보겠습니다.       홈페이지를 검색하다보면 텍스트를 입력한 다음 그안의 내용을 서버에 제출하는 홈페이지 구성을 자주 보셨을겁니다  아래와 같은 모습입니다.   위의 박스안에 글을 입력하고 submit을 누르면 박스안에 입력된 자료가 지정한 서버로 송출이 되어집니다.  그럼 예제를 통해 연습해 봅시다 문제) 페이지에서 링크와 자바스크립트를 삭제하고 텍스트영역을 만들어라. 그리고 'submit'라는 이름의 버튼을 추가한다. 버튼을 클릭하면 "click!"라는 팝업창이 뜨도록 설정한다. 먼저 충분히 생각해 보시고 아래의 정답을 보시기를 권장합니다  ..

자바스크립트를 이용한 스타일 변형의 예를 들어보자 1. 텍스트를 파란색으로 바꿔라 2. 텍스트에 밑줄을  그어라 (textDecoration을 사용해야 한다) 3. 텍스트 크기를 20픽셀로 바꾸고 오른쪽으로 정렬하라.  아래 그림의 코드를 수정해서 위의 조건을 완성해 보세요 위의 코드를 수정해서 위의 조건을 완성하면 아래 그림이 나온다.       박스안의 글을  누르면 그림이 선명해집니다     소스코딩 보기

이번에는 자바스크립트를 이용해서 홈페이지의 스타일을 바꾸어 보는 것을 알아보겠습니다자바스크립트를 이용해 팝업창을 띄우는 것처럼 스타일을 바꿀 수도 있습니다 페이지에 'text'라는아이디로 문단을 추가합니다 그리고 링크  텍스트를  'Turn text red'로 바꿉니다.         위 코드는 아이디 'text'라는 구성요소를 가져와서 컬러를 빨간색으로 설정한다는 의미이다. 어떤 스타일이든 이 스크립트를 이용해서 컬러를 바꿀수 있다