안녕하세요 상훈입니다.

자바스크립트로 문자열을 나누는 split 함수를 사용하도록 하겠습니다.

<script>
  cosnt yearInput = prompt('태어난 해는?', '')
  const year = Number(yearInput)
  const tags = '원숭이,닭,개,돼지,쥐,소,호랑이,토끼,용,뱀,말,양'.split(',')
  alert(`${year}년에 태어났다면, ${tags[year%12]} 띠 입니다.`)
</script>

결과

 

Split 함수 예제를 알아보았습니다.

반응형
저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ Html, Css, Javascript ] Spinner / Loading Screen 만들기 / 로딩 화면 만들기  (0) 2021.10.06
[ jQuery ] jQuery 제이쿼리 CDN 링크 공유  (0) 2021.10.06
[ JavaScript ] 드림코딩 클론코딩, 짧고 간단한 쇼핑 웹앱 구현, 예제  (0) 2021.09.09
[ JavaScript ] 키보드 구현 - cdn 사용하기  (0) 2021.08.31
[ JavaScript ] 버튼 클릭 복사 - 기능 구현 예제  (0) 2021.08.26

 

 

키보드 구현 결과

 

자바스크립트를 이용해서 영어 키보드를 구현하도록 하겠습니다.   (다음 포스팅은 한글 키보드..)

물론 cdn을 이용해서 기본 키보드에서 좀 더 꾸며진 모습을 확인할 수 있습니다.

 

head태그 내에 넣을 내용

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
</head>

body 태그 내에 작성할 내용

<body>
    <input class="input" placeholder="Tap on the virtual keyboard to start" />
    <div class="simple-keyboard"></div>
  
    <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script>
    <script src="src/index.js"></script>

    <script>
        const Keyboard = window.SimpleKeyboard.default;

        const myKeyboard = new Keyboard({
        onChange: input => onChange(input),
        onKeyPress: button => onKeyPress(button)
        });


        function onChange(input) {
        document.querySelector(".input").value = input;
        console.log("Input changed", input);
        }


        function onKeyPress(button) {
        console.log("Button pressed", button);
        }

    </script>
</body>

 

 

확인해보니 최소 px의 가로길이는 500px 로,

모바일 환경에서는 불가능하다는 판단을 내렸고, 태블릿 정도까지는 갈 수 있다고 판단됩니다.

 

화질은 별로지만 해당 내용 구성입니다.

 

이미지를 클릭하면 참조 사이트로 이동합니다. 

 

 

 

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ Html, Css, Javascript ] Spinner / Loading Screen 만들기 / 로딩 화면 만들기  (0) 2021.10.06
[ jQuery ] jQuery 제이쿼리 CDN 링크 공유  (0) 2021.10.06
[ JavaScript ] 드림코딩 클론코딩, 짧고 간단한 쇼핑 웹앱 구현, 예제  (0) 2021.09.09
[ JavaScript ] Split 예제, 자바스크립트 문자열 나누기  (0) 2021.09.06
[ JavaScript ] 버튼 클릭 복사 - 기능 구현 예제  (0) 2021.08.26

안녕하세요 CodeHoon입니다.

 

이번 글은 렌더링 기초 중의 기초이자 핵심, 컴포넌트 / 함수형으로 랜더링하기 (예제 포함) 입니다.

 

결과물입니다. 출처링크포함

html에서는 h1태그와 img 태그. 이 두가지를 삽입하기만 하면 해당 내용이 출력되어져 편했었죠?

 

리액트에서는 조금 더 들어가야합니다. WebFramework이니까요.

 

<body>
    <div id="root"></div>


    <script type="text/babel">
        class App extends React.Component{
            render(){
                return (
                    <div>
                        <h1>{this.props.name}님, 안녕하세요</h1>
                        <img src={this.props.imgUrl}/>
                    </div>
                )
            }
        }

        // 출력
        const container = document.querySelector("#root")
        ReactDOM.render(
            <App name="애용" imgUrl="https://newsimg.hankookilbo.com/cms/articlerelease/2019/04/29/201904291390027161_3.jpg" />, container 
            )
    </script>
</body>

이곳에서 중요한 점은 저 위 return에서 첫번째줄 <div>를 엔터처리하여 return ; 이 되지 않게 하는 것입니다.

그래서 괄호( ) 를 넣어놓았어요.

 

지난번과 다른점은 함수형인 부분인데요, 

 

바로 클래스 컴포넌트를 이용했다는 점입니다.

 

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > React.js' 카테고리의 다른 글

[ React.js ] 에러 VM42:9 Uncaught TypeError: Super expression must either be null or a function, not undefined  (0) 2021.09.01
[ React.js ] 현재 시각 시계 만들기 예제  (0) 2021.08.30
JSX 기본 문법 - 기초  (0) 2021.08.27
[ React.js ] Render() - 리액트 시작하기 예제  (0) 2021.08.25
[ React.js ] 시작하기 - Script태그 내에 CDN 작성하기  (0) 2021.08.25

안녕하세요. CodeHoon 입니다.

 

이번에는 자바스크립트의 dom 복사 이벤트를 구현하려고 합니다.

 

버튼 클릭으로 할 거구요, 다른 이벤트로 자유롭게 해도 무관합니다.

복사하기 구현

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>복사하기 구현</h1>
    <textarea name="" id="textArea" cols="30" rows="10"></textarea><br>
    <button type="button" id="copyBtn">copy</button>

윗부분이구요,


<script>
   const textArea = document.querySelector('#textArea')
   const copyBtn = document.querySelector('#copyBtn')

   copyBtn.addEventListener("click", () => {
       textArea.select()
       document.execCommand("copy")
   })
</script>

</body>
</html>

주요 내용입니다.

 

 

ID가 textArea인 Textarea 태그를 생성하여 html에 작성합니다. 

그리고 그 아래에 ID가 copyBtn인 버튼을 생성하여 html에 작성합니다.

 

Javascript 부분입니다. 

textarea부분과 button의 아이디를 querySelector로 가져와, button 에 이벤트를 생성합니다.

 

textArea.select()로 textarea 내에 작성한 모든 내용을 선택한다는 뜻이고,

document.exeComand("copy") 로 선택한 내용을 복사한다는 뜻입니다.

 

이상입니다.

 

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ Html, Css, Javascript ] Spinner / Loading Screen 만들기 / 로딩 화면 만들기  (0) 2021.10.06
[ jQuery ] jQuery 제이쿼리 CDN 링크 공유  (0) 2021.10.06
[ JavaScript ] 드림코딩 클론코딩, 짧고 간단한 쇼핑 웹앱 구현, 예제  (0) 2021.09.09
[ JavaScript ] Split 예제, 자바스크립트 문자열 나누기  (0) 2021.09.06
[ JavaScript ] 키보드 구현 - cdn 사용하기  (0) 2021.08.31

React를 시작할때 사용할 수 있는 cdn 이다.

해당되는 cdn은 개발 버전으로, 안정성을 추구한다면 production 버전을 사용하도록 한다.

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

 

왜 사람들이 자바스크립트로 자꾸 드래그 금지시켜놓는지 모르겠네요. 

 

반응형

'FrontEnd > React.js' 카테고리의 다른 글

[ React.js ] 에러 VM42:9 Uncaught TypeError: Super expression must either be null or a function, not undefined  (0) 2021.09.01
[ React.js ] 현재 시각 시계 만들기 예제  (0) 2021.08.30
JSX 기본 문법 - 기초  (0) 2021.08.27
[ React.js ] Render - 함수형으로 출력하자. - 예제 / 고양이 사진 출력하기  (1) 2021.08.26
[ React.js ] Render() - 리액트 시작하기 예제  (0) 2021.08.25

+ Recent posts

티스토리툴바