JavaScript と jQuery 基礎

この記事は受講生向け、授業で使用するものです。

ウェブの技術

1. サーバーサイド
   PHP、Ruby、Python
2. クライアントサイド
   JavaScript

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');
        }
    });
});