zoukankan      html  css  js  c++  java
  • JavaScript初步入门,一个小白刚步入JavaScript以及一些简简单单的程序,为初学者提供便利。

        在上一篇博客中,我提到了html,css,JavaScript,在学习JavaScript之前,我们把这三者的概念在进行一次回顾。


    结构层:HTML→从页面结构,语义上描述页面。
    样式层:CSS→从审美的角度来装饰页面。
    行为层:JavaScript→从交互的角度提升页面用户的体验

    交互:网页的元素针对用户的特定行为,产生指定的变化。
    JavaScript是什么?
         JavaScript是用来实现交互的。
         首先,JavaScript是纯文本,用任何的文本编辑器都能够编辑它。同时,它是网页的一部分,
    随着一个html的页面被请求,JavaScript脚本也随之下载到了用户的计算机本地,在用户计算机本地
    渲染运行的。

       同时注意JavaScript的一些特点:
        1 JavaScript脚本可以从网上看到。
        2 JavaScript不是Java!
        3 JavaScript轻量级运行在浏览器中的语言,而Java是跨平台的开发多种语言。
        4 JavaScript是运行在用户的计算机中的,是前台的脚本,用来开发页面效果。
        5 有JavaScript的网页仍然是静态网页。

        6  JavaScript对换行 空格不敏感,不会影响其效果,但是对大小写严格敏感。

    下面就是我学到的几个初级的JavaScript的程序,为了更好的方便直观,我把代码放在了下面,大家在看代码时侧重注意下<div></div>与<script></script>


    单机黑色圆圈,标题改变。
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>123</title>
    <style>
    div{
    100px;
    height: 100px;
    border-radius: 50px 50px;
    background-color: black;
    margin: auto;
    }
    </style>
    <script>
    function gaibian(){
    document.title="ABC";
    }
    </script>
    </head>
    <body>
    <div onclick="gaibian()">

    </div>

    </body>
    </html>


    单机黑色圆圈,弹出警告。
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>123</title>
    <style>
    div{
    100px;
    height: 100px;
    border-radius: 50px 50px;
    background-color: black;
    margin: auto;

    }
    </style>
    <script>
    function jinggao(){
    window.alert("警告");
    }
    </script>
    </head>
    <body>
    <div onclick="jinggao()">

    </div>

    </body>
    </html>


    单机黑色圆圈,页面跳转。
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>123</title>
    <style>
    div{
    100px;
    height: 100px;
    border-radius: 50px 50px;
    background-color: black;
    margin: auto;

    }
    </style>
    <script>
    function tiaozhuan(){
    window.location="www.baidu.com";
    }
    </script>
    </head>
    <body>
    <div onclick="tiaozhuan()">

    </div>

    </body>
    </html>


           可以看到,<div></div>标签中的含义为单机此标签,会指向一个功能。!最后的括号必须添加。!而这个功能的详细指令正是在我们的<script></script>标签中,以此来实现各种功能。

         好的。

    到目前为止,我们认识了三个语句:
    document.title="ABC"; 让页面的标题改变。
    window.alert("ABC"); 弹出警告
    window.location="网址"; 让页面跳转。

    相信大家也发现了,这些语句很复杂并没有相同的结构。这与文字,属性,语法相关,我会继续学习,把这些也呈现
    给大家,谢谢大家对我的支持。

  • 相关阅读:
    JDBC之一:JDBC快速入门
    AdapterView及其子类之四:基于ListView及SimpleAdapter实现列表
    AdapterView及其子类之三:基于ListView及ArrayAdapter实现列表
    AdapterView及其子类之二:使用ListActivity及ArrayAdapter创建列表
    AdapterView及其子类之一:基本原理(ListView、ListActivity类型)
    Fragment之一:基本原理
    Loader之二:CursorLoader基本实例
    Intent 跳转Activity
    Android 第三课 构建简单的用户界面
    android第二课:运行你的应用
  • 原文地址:https://www.cnblogs.com/799875530qq/p/5312230.html
Copyright © 2011-2022 走看看