开始自学

面向工作编程

  • 前言
    • 技能挑选
    • 学习路径
  • Day1
    • 页面播放视频
    • 拆开分析 - 使用的对象
    • 学习目标
    • 创建一个表格
    • 接下来

前言

25岁的大学毕业生,正在美帝野鸡大学修读computer science的master学位。在第一个学期上完computer architecture和operating system两门专业课后,自觉靠这破学校的老师教的东西毕业后是没办法在美国获得opt工作的机会,遂而自学。

技能挑选

我选择了先学习HTML5,原因有以下几个:

  1. 语法简单,或者说没有语法
  2. 不需要安装IDE或者其他软件,新建一个txt文档再把后缀改成html便可
  3. 曾经学过php,重新学习html相当于复习,降低难度
  4. HTML属于前端,前端难度低不倚靠算法

学习路径

W3School学习HTML基本语法 >本地创建基础页面>W3School学习JavaScript》……

Day1

页面播放视频

代码如下

<!DOCTYPE html>
<html>
<body>

<div style="text-align:center;">
    <button onclick="playPause()">Play/Pause</button>
    <button onclick="makeBig()">Big</button>
    <button onclick="makeNormal()">Normal</button>
    <button onclick="makeSmall()">Small</button>
<br/>
    <video id="video1" width="420" height style="margin-top:15px;">
        <source src="/example/html5/mov_bbb.mp4" type="video/mp4">
        <source src="/example/html5/mov_bbb.ogg" type="video/ogg">
    Your Browser Does Not Support HTML5.
    </video>
</div>
<script type="text/javascript">
    var myVideo=document.getElementById("video1")
    function playPause()
        {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
        }
    function makeBig()
        {
            myVideo.width=560;
        }
    function makeNormal()
        {
            myVideo.width=420;
        }
    function makeSmall()
        {
            myVideo.width=320;
        }
</script>
</body>
</html>

实现效果:

开始自学_第1张图片

拆开分析 - 使用的对象

1. button
具体语句

    <button onclick="playPause()">Play/Pause</button>
onclick:赋予按键具有单击后有功能的属性
playPause():单击后的功能由这个函数实现
Play/Pause:按键上显示这段文本提示用户

2. video
具体语句

<video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4">
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg">
Your Browser Does Not Support HTML5.
</video>
id:给目标视频赋予一个id,方便函数对视频进行操作
style:固定视频的位置
source:给出视频的来源

3.function (目前还不需要了解)

<script type="text/javascript">
    var myVideo=document.getElementById("video1")
    function playPause()
        {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
        }
</script>
script:使用的函数都要放在script之内
var:先由目标的类型(video),确认需要用到哪些方法并赋值,接下来就可以方便使用对应的函数

学习目标

  • video
  • button
  • script

创建一个表格

示例表格:

类别1 类别2 类别3
项目a 项目b 项目c
项目d 项目e 项目f

接下来

学习内容
HTML
Markdown
JavaScript 和 HTML DOM 参考手册

你可能感兴趣的:(开始自学)