Help us understand the problem. What is going on with this article?

【JavaScript】書き方まとめ 全4種類

JavaScriptとはどういうものか

簡単に言うとウェブページをリロードすることなく画面に変化を起こせるもの

例えばこの画面の左側(スマホの場合上)に記事をいいねするボタンやストックするボタンがあります
それらにカーソルを合わせると色が変わる、
クリックすると画像が変化するなどの処理はJavaScriptで書かれています

LGTMストックはチェックマークがついた状態がデフォルトです(すっとぼけ)

1.HTMLファイルに直接書き込む <script>

<script>と</script>の間にJavaScriptの処理を書き込みます
コンソールにHello Worldが表示されます

html
<script>
console.log('Hello World');
</script>

2.HTMLの要素の属性として書き込む(イベントハンドラ)

実行ボタンを押すとアラートが表示されます
実行のタイミングはイベントハンドラによって異なる

html
<input type="button" value="実行" onclick="alert('Hello World')">

イベントハンドラ例

イベント
ハンドラ
動作
onLoad ページや画像の読み込みが完了した時に発生
onClick 要素やリンクをクリックした時に発生
onSubmit フォームを送信しようとした時に発生
onKeyDown キーを押した時に発生

3.外部ファイルに書き込む

拡張子が.jsのファイルを作り
JavaScriptファイルをHTMLファイルで読み込むことができます

hello.js
function hello() {
 consol.log('hello');
}
html
<!DOCTYPE html>
<html>
<head>
<title>任意のタイトル</title>
<script src="hello.js"></script>//ここでJavaScriptが実行される
</head>
・
・
</html>

4.URL記述

javascript:関数と書くとJavaScriptの処理をURLのように扱うことができます
こんにちはをクリックするとコンソールにHello Worldが表示されます

html
<a href="javascript:console.log('Hello World')">こんにちは</a>

まとめ

4つ目のURL記述を初めて知り、これを機にJavaScriptの書き方についてまとめました
JavaScriptはHTML、CSSをやってきた人にとって初めての本格的なプログラミングになると思うので
書き方さえ覚えてしまえば
ググる→コピペ→うまく動く→書いてあることを理解する
の繰り返しで行けると思います!
頑張ってください:muscle:
最後まで目を通していただきありがとうございました!
images.jpeg

adda_abw
2020年卒のwebエンジニアです 主にcakeを扱っています
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした