この記事は受講生向け、授業でしようするものです。
ウェブの技術
- サーバーサイド
PHP、Ruby、Python - クライアントサイド
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'); } }); });
勉強サイト