• 记JavaScript的入门学习(一)


          2016年11月20日算是每天都会利用点时间去思考,去学习,接下来便是我学习JavaScript的前前后后,希望早日学完JavaScript和jQuery

    之前学校毕业设计选择了一个如下图的题目

                               

    希望可以早日知道这里面到底都使用了什么功能才形成了如此神奇的二维码

          

    如下刚学的例子:

    1、通过js脚本改变原有的背景颜色

    <!DOCTYPE html>
    <html lang = "zh-cn">
    <head>
    <meta charset = "UTF-8">
    <title>关于背景色</title>
    </head>
    <body bgcolor=white>
    <p>Paragraph 1</p>
    <script type="text/javascript">
    // 改变背景颜色
    document.bgColor = "red";
    </script>
    </body>
    </html>

          代码仅仅是用来演示,在实际的应用中,如果要将页面的背景色设置成红色,可直接将<body>标记的bgcolor属性设置为“red”即可,并不需要使用JavaScript。例如:如果用户显示器的分辨率比较低,可以使用JavaScript调整页面上的内容。另外,使用JavaScript修改属性还可以实现一些特效,比如实现页面颜色的渐变效果。

    2、当页面加载时,首先看到第一段落的内容,即Paragraph 1,然后是一个消息框,这个消息框是由第一个脚本块产生的。这是,浏览器的页面解析过程将被挂起(halt),并一直等待你单击消息框的OK按钮。颜色在点击按钮后在变化,点击按钮之后网页才会向下解析。

    <!DOCTYPE html>
    <html lang = "zh-cn">
    <head>
    <meta charset = "UTF-8">
    <title>关于背景色</title>
    </head>
    <body bgcolor=white>
    <p>Paragraph 1</p>
    <script type="text/javascript">
    // document.bgColor = "red";
    // script block 1
    alert("First script block");
    </script>
    <p>Paragraph 2</p>
    <script type="text/javascript">
    // script block 2
    document.bgColor="red";
    alert("Second script block")
    </script>
    <p>Paragragh 3</p>
    </body>
    </html>

          通过这个实例,就是可以了解到两种不同的方法来设置页面的背景属性。比如设置页面的背景色属性时,既可以通过HTML标记进行设置,是一种静态的方法,将属性值直接写在HTML  ,除非直接修改HTML,否则它的值不会改变;也可以通过JavaScript代码进行设置,可以在程序中动态的改变属性的值。

         *动态:指某些元素的属性值或外观是可以改变的,可以在代码中改变它们的值,从而改变这些元素。

     

            不同的浏览器所支持的HTML标准的版本也可能存在差异,不同浏览器中JavaScript解释器所支持也可能有所不同。例如在一个浏览器只能实现图片的移动可能就需要几行或者几十行也可能无法实现。

    小结:

     

                                                                                           至2016.11.24

  • 相关阅读:
    opencv计算机视觉学习笔记一
    opencv_python学习笔记十八
    opencv_python学习笔记十六
    Android-锁屏功能
    Android-加载透明PNG图片变黑的问题
    Android-AttributeSet详解
    Android-UGallery
    Android-相册效果(图片缩放 自由滑动)
    Android进阶篇-内存管理
    Android进阶篇-时间滑动控件
  • 原文地址:https://www.cnblogs.com/hq123/p/6090908.html
Copyright © 2020-2023  润新知