今天学习了js的基础知识，自我归纳如下：

第一部分：js变量的声明和引入

js声明1-直接声明js代码块，使用<script></script>  2-引入外部声明，即创建一个js文件，然后利用代码<script src="..." type="text/javascript" charset="utf-8"></script>

第二部分：js的变量学习

js中所有变量的声明只有var关键字

例如：　　　var a=123;
                     var A=1234;
                     var a1=3.1415926;
                     var a2="js";
                     var a3='k';
                     var a4=true;
                     var a5=new Date();

我们需要注意：1-js的变量名是严格区分大小写

　　　　　　　2-js中的字符串可以使用双引号也可以使用单引号

　　　　　　　3-js中可以声明同名变量，系统不会报错，但是执行时候，后面的会将前面的声明覆盖

js中有几种数据类型：number、String、Boolean、Object

利用关键字typeof可以得出相关变量的数据类型

第三部分：js的变量强转

使用Number和Boolean会将相关的字符串强转为我们运算的相关数据类型的变量，容易理解

第四部分：js的运算符

运算符，一般无非我们常见的+、-、*、/、%，在此之外还有++，--，+=,-=,我们的逻辑运算符：  !  & && | || (与java中的一致)。

注意：字符串的加法将会发生字符串的拼接

还有我们重要的==和===运算符

等值运算符:==
                先判断类型，类型一致则直接比较。类型不一致，则先使用Number()进行强转后再进行比较。
等同运算符:===
                先判断类型，类型一致则再比较内容，内容一致则返回true，内容不一致则返回false。 类型不一致则直接false

第五部分：js的逻辑结构

js的逻辑结构类似于java，有：

　　　　if，if-else，switch-case, for(){}, whiel(), do{}-while();

用法几乎相同就是我们常用的是int i 但在此处我们要使用var i。

第六部分：js的数组

　　　　数组的声明：
                    var arr=new Array();//声明一个空数组对象
                    var arr=new Array(length)//声明一个指定长度的数组
                    var arr=[元素]//声明数组(最常用)
                   注意：js中的数组声明不用指定长度，js的数组长度是不固定的，会随着元素的数量改变而改变。

　　　　数组的赋值和取值，同java中的数组取值和赋值，不过java中会发生数组越界，在js中不会发生。

　　　　数组的length属性，用来返回我们数组长度，可以对长度进行赋值，动态的改变长度

　　　　如果赋的值大于length，则多出的用空填充；若小于，则进行数据的截断

　　　　数组的遍历：

　　　　　　　　第一种是利用普通for循环

　　　　　　　　第二种是类似于java中的高级for循环，不过在java中是for-each，但是在js中是for-in

今天学习的内容就是这么多，最后是做了一个简易版本的计算器。

最后的效果如下图：

代码附上：

 <html>

     <head>

         <title>模拟计算器</title>

         <meta charset="UTF-8"/>

         <style type="text/css">

             #showdiv{

                 border: solid 1px;

                 border-radius: 10px;

                 width: 300px;

                 height:350px;

                 margin: auto;

                 margin-top: 60px;

                 text-align: center;

                 background-color: khaki;

             }

             input[type=text]{

                 width:290px ;

                 height: 35px;

                 margin-left: 5px;

                 margin-right: 5px;

                 margin-top: 20px;

                 margin-bottom: 10px;

                 font-size: 20px;

             }

             input[type=button]{

                 width: 60px;

                 height: 60px;

                 margin-left: 5px;

                 margin-right: 5px;

                 margin-top: 5px;

                 font-size: 25px;

             }

         </style>

         <script type="text/javascript">

             function test(btn){

                 var num = btn.value;

                 switch (num){

                     case "=":

                         document.getElementById("inp").value = eval(document.getElementById("inp").value);

                         break;

                     case "c":

                         document.getElementById("inp").value="";

                         break;

                     default:

                     /*直接使用字符串的拼接*/

                         document.getElementById("inp").value=document.getElementById("inp").value+num;

                         break;

                 }

             }

         </script>

     </head>

     <body>

         <div id="showdiv">

             <input type="text" name="" id="inp" value="" /><br />

             <!--//onclick 点击即可触发动作-->

             <input type="button" name="" id="btn" value="1" onclick="test(this)"/>

             <input type="button" name="" id="" value="2" onclick="test(this)"/>

             <input type="button" name="" id="" value="3" onclick="test(this)"/>

             <input type="button" name="" id="" value="+" onclick="test(this)"/><br />

             <input type="button" name="" id="" value="4" onclick="test(this)"/>

             <input type="button" name="" id="" value="5" onclick="test(this)"/>

             <input type="button" name="" id="" value="6" onclick="test(this)"/>

             <input type="button" name="" id="" value="-" onclick="test(this)"/><br />

             <input type="button" name="" id="" value="7" onclick="test(this)"/>

             <input type="button" name="" id="" value="8" onclick="test(this)"/>

             <input type="button" name="" id="" value="9" onclick="test(this)"/>

             <input type="button" name="" id="" value="*" onclick="test(this)"/><br />

             <input type="button" name="" id="" value="/" onclick="test(this)"/>

             <input type="button" name="" id="" value="0" onclick="test(this)"/>

             <input type="button" name="" id="" value="c" onclick="test(this)"/>

             <input type="button" name="" id="" value="=" onclick="test(this)"/>

         </div>

     </body>

 </html>

自勉，继续加油！

JavaScript初学的更多相关文章

  1. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  2. Javascript初学篇章_4(循环与函数)

    七.循环语句 1.While 语法: while (exp){ //statements; } 说明: while (变量<=结束值){ 需执行的代码 } 例: var i=0; while(i ...

  3. Javascript初学篇章_3(注释/if/switch)

    五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 el ...

  4. Javascript初学篇章_1（概念/数据类型）

    Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...

  5. JavaScript 初学备忘录

    JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现 ...

  6. javascript初学笔记

    基本语句 赋值条件循环语句 javascript异常处理语句 trycatchfinally语句 Error对象 throw语句 函数 定义 调用 嵌套函数 函数的嵌套定义 内置函数 匿名函数和Fun ...

  7. 19 01 08 javascript 初学

    变量 JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. 定义变量需要用关键字 'var' 变量类型 5种基本数据类型:1.number 数字类型2.string ...

  8. Javascript初学篇章_8（事件）

    事件 HTML 事件是发生在 HTML 元素上的事情.例如用户点击按钮时,点击也是一个事件.事件可以用于处理表单验证,用户输入,用户行为及浏览器动作,如: 页面加载时触发事件 页面关闭时触发事件 用户 ...

  9. Javascript初学篇章_7（DOM）

    DOM 文档对象模型DOM (document object model) 文档对象模型,它定义了操作文档对象的接口.DOM 把一份html文档表示为一棵家谱树,使用parent(父), child( ...

随机推荐

  1. 设计简单登录界面（Java web）

    程序设计思想: 在Input.jsp中创建一个表格里边分别是课程名称,任课老师,教学地点,并分别用三个文本框来接受输入的三个属性, 并传到另外的Jsp页面中,又来接受三个数据,并判断传来的教师,与教室 ...

  2. ubuntu16.04 安装 mysql-level

    ubuntu16.04 安装 mysql-level 1.下载 mysql-level(直接去官网下载rpm包,我的mysql-server是5.7.9.你下载自己对应的就可以了) 下载连接 2.rp ...

  3. QuantLib 金融计算——数学工具之求解器

    目录 QuantLib 金融计算--数学工具之求解器 概述 调用方式 非 Newton 算法(不需要导数) Newton 算法(需要导数) 如果未做特别说明,文中的程序都是 Python3 代码. Q ...

  4. 【实战】某项目SQL注入引发的思考

    数据包: 测试参数:username,测试payload: ' ' or '1'='1 ' or '1'='2 响应结果都未发生任何变化,借助sqlmap测试,结果一样: 尝试在or前面进行简单的fu ...

  5. 在国内运行Flutter配置的正确姿势--如出现Oops; flutter has exited unexpectedly.

    如果根据flutter的官网教程,在运行flutter doctor时无法下载依赖,请根据以下步骤 export PUB_HOSTED_URL=https://pub.flutter-io.cn ex ...

  6. (转)Python 字符串格式化 str.format 简介

    原文:https://www.cnblogs.com/wilber2013/p/4641616.html http://blog.konghy.cn/2016/11/25/python-str-for ...

  7. (转)OpenStack之服务端口号

    原文:https://blog.csdn.net/henulwj/article/details/47276391 在部署openstack的过程中,你会遇到配置各种服务的endpoint,opens ...

  8. 《LeetBook》leetcode题解(14):Longest Common Prefix[E]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  9. Idea中找不到xml配置文件问题研究以及classpath设置（转载）

    问题: 在用Idea建立一个Java Application工程的时候,应用了Spring框架,可是Spring的xml配置文件找不到.检查表明不是代码的问题.费了我好长时间才解决.   出现问题,我 ...

  10. ASP.NET Core 的启动和运行机制

    目录 ASP .NET Core 的运行机制 ASP .NET Core 的启动 ASP .NET Core 的管道和中间件 参考 ASP .NET Core 的运行机制 Web Server: AS ...