JavaScript と jQuery 基礎

ウェブの技術

  1. サーバーサイド
    PHP、Ruby、Python
  2. クライアントサイド
    JavaScript
ウェブを構成する技術
・HTML、CSS、JS、など
 JSはユーザーの操作を受け取ったり動的にする、ウェブブラウザ上で動くプログラミング言語。拡張子はxxxxxx.js
必要なもの
・ブラウザ(Chrome)
・エディタ(Brackets、Dreamweaver)
GoogleChromeで試してみよう。
・コンソールで計算してみる
 演算子(+-*/)

JavaScript 基本の書き方

<script>
    alert("こんにちは");
</script>

このように書くと、こんなふうに窓が出てきて、ダブルクォーテーションの中に書いた文字が出てきます。

文字を表示させるだけではありません。

alert(13 + 22);

実行してみてください。
このように、カッコの中を計算することができます。
ではこれはどうですか?

alert("13 + 22");

そのまま文字として表示されましたね。
ではこれは?

alert("13" + 22);

このように、ダブルクォーテーションで囲ったものを「文字」として認識します。

jQueryの前知識

絶対URL・相対URLについて https://uxmilk.jp/31972

jQueryの読み込み、jsファイルの読み込み

CDNで、ダウンロードして

jQuery基本の書き方

$(function(){
 //処理を書くところ
});

こんな風に書いてあっても同じです。

jQuery(function(){
 //処理を書くところ 
});

$(document).ready(function(){
 //処理を書くところ
});

jQuery(document).ready(function(){
 //処理を書くところ
});

コメントの書き方は
//コメント

/* コメント */
と書きます。

 

 

jQueryでclass取得して・・・

$(function() {
  $('.title').メソッド);
});

メソッド

CSS 絶対配置と相対配置
演算子とは違う=

var a = 2;
var b = 3;
// a * b = 6 となる

DOM
DOMとは:http://piyo-js.com/05/dom.html

JSでのID取得 はこうなる。

var namebox = document.getElementById('title');

ここでのnameboxとは、取得したものを一度入れておく箱。変数という。
基本的にはスキな名前をつけてもいいが、一部使ってはいけない言葉もある(一覧はこちら

$(function() {
    $('.btn').click(function() {
        $(this).toggleClass('active');
        if ($(this).hasClass('active')) {
            $('.gnav').addClass('active');
        } else {
            $('.gnav').removeClass('active');
        }
    });
});
勉強サイト
ウェブ担当者向けHTML/CSS講座
ウェブサイト解析基礎コース(解析・改善)
デザインソフト基礎コース

この記事を書いた人

Matsuo

Matsuo

[経験]
・制作(Photoshop・Illustrator/HTML・CSS・jQuery・WordPress)
・アクセス解析/SEOライティング/運用改善/企画提案
・講師(職業訓練校/スクール/企業出向)
[活動]
大阪・東京でWeb制作を中心に活動。
また「拡げるキッカケを共創する」を活動指針として
①未来を切り開くスキル習得サポート、②自立したウェブサイト運用のアシスト、を行う。