ペンギン男の生活@気になるのは、海外SEOとYOGAとお天気

Web方面では、SEOだけでなく、事業計画やファイナンスといったWebビジネスを柔軟に支えるナレッジもカバー。身体方面では、ヨガだけでなく、ストレッチも加えたエクササイズのナレッジを積み上げていきます。なお、体調に大きく影響する他のトピック、例えば天気の話題も時折絡めます。

【よくわかるJavaScript】小さいことからコツコツと

こんにちは、ペンギン男です🐧 

以前Javaを少しかじった関係上、なんとはなく、そんなに肩に力を入れずに、リラックスして取り組めるJavaScript

私のイメージですと

  •     クライアントサイド→JavaScript 
  •     サーバーサイド→JavaとかC+

なんていう区別でした。技術の発達という意味では、サーバーサイドが先に着手されたせいか、クライアントサイドのプログラミング言語を少し低く見ているプログラマーもいましたが、いまや、クライアントサイド、Webサイド全盛の時代。さらに、クライアントサイドも、サーバーサイドも、どちらも相違点がだんだん小さくなってきたようです。

よくわかるJavaScript
 

出典はアマゾンさん。

 

 

 

(ページネーションはkindleでの表記に従います

JavaScriptの万能性

No.32

撮影した写真を表示するサイトでは、写真をダイナミックに美しく表示するため、JavaScriptが使われることがあります。また、商品をカートに入れて購入するネットショッピングのサイトでは、合計金額を確認する処理などにJavaScriptが使われることがあります。さらに地図情報を利用した便利なWebサイトにもJavaScriptが使われる場合があります。

  •     画像処理の精細化
  •     計算
  •     地図情報

というJavaScriptの使い途の説明ですが、これに、ゲームなどで使用する動的な処理が含まれれば(実際、JavaScriptには、そんな機能も含まれます。ちなみに、そんな機能関連の記事も別途投稿予定です)Webで要求される機能はほぼ網羅されてますね😊

HTMLとCSSJavaScriptの関係

大雑把に言って、まず、HTMLとCSSによって、Web上で基本的な文章とデザインを準備します。それから、JavaScriptによって、それらの使い勝手を向上させる、もしくは有効な機能を追加するといったイメージです。

No.71とNo.82を編集

  •      HTML→Webページ上にある文書のタイトルやリンク先・表示する画像ファイル名などといった「文書の構造」
  •      CSS→Webページ上の文字の大きさや色・画像の位置などの「レイアウト情報」
  •      JavaScript→HTMLだけではできない複雑な処理。例えば、ネットショッピングのサイトでは、商品の金額をチェックしたり、必要な商品画像をダイナミックに表示

準備するツール

例えばJavaだと、少しだけ手間をかけてJava固有のツールをダウンロードする必要あります。

しかし、JavaScriptはかなりシンプルのようです。

No.103〜120を編集

一般的に、JavaScriptはこれらのツールがあれば実行できます。

別途、開発者用ツールも公開されているとか。

HTMLのタグの代表例

今更ではありますが、<・・・>で囲む両端の記号をタグと言います。このタグで、入力・作成内容を指示する記号をはさみます。まぁ、入力・作成指示内容につき「ここから、ここまでがひとかたまり」ですよ、という区切りを表すものです。また、はてなブログの記事作成時にも、「HTML編集」のタブで、しょっちゅう見かける記号です。この辺りのタグなんて初歩中の初歩でしょうが、多少なりとも分かるとホッとします💦

No.164を編集

  •    title→ウェブページのタイトル
  •    body→本文テキスト
  •    h1〜h6→見出し
  •    a→リンク
  •    img→画像
  •    table→テーブル(表)
  •    form→入力フォーム
  •    p→段落
  •    

CSSセレクタとプロパティで表現

No.192

  •     コードの形は、セレクタ{プロパティ:値}となります。
  •     セレクタ→HTML上の要素等
  •     プロパティ→セレクタの色やフォントなど

個人的には、ほぼコピペで対処しているので、改めて、こういう説明をみるのは新鮮です。逆に、そんな初心者でも対処できるほどに、シンプル化、そして洗練されているのですね。

念のため、CSSのサンプルを一つ挙げます。

No.199

   body{

      background-color:

      cornflowerblue;

   }

解釈は次の通りですね。「色」の「指定」まで「値」と呼ぶのですね。

No.199

    HTMLの「body」要素の背景色(background-color)の値を、青花の色(cornflowerblue)に指定することが出来ます 

たいしてJavaScriptのことを知っているわけではないですが、なんか良い復習になります

本当にそうです👍

 

また、次回

 

#よくわかるJavaScript

#HTML

#CSS

#Java

#C+