今天学习了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. Ubuntu下解决apt update时签名无效问题

    Ubuntu 18.04在执行apt-get update时出现一下报错: W: GPG 错误:http://repo.mysql.com/apt/ubuntu bionic InRelease: 下 ...

  2. 【Quartz】基本原理

    1 核心概念 1.1    核心元素 (1)Scheduler 任务调度器,是Quartz框架的核心,负责管理其他组件. (2)Trigger 触发器,用于定义任务调度的时间规则,有SimpleTri ...

  3. 2016级算法期末上机-G.中等·Bamboo's Fight with DDLs II

    中等·Bamboo's Fight with DDLs II 分析 一句话:给定字符串,求最长回文子序列长度,动态规划LCS思想的进阶应用 具体思路如下: 对于任意字符串,如果头尾字符相同,那么字符串 ...

  4. FPGA实战操作(2) -- PCIe总线（协议简述）

    目录 1. PCIe基础知识 2. 事务层协议 2.1 数据包结构 2.2 帧头含义详述 3. 报文举例 3.1 寄存器读报文 3.2 完成报文 4. 机制简述 4.1 Non-Posted和Post ...

  5. docker 限制 容器内存 使用

    转载 : https://www.cnblogs.com/sparkdev/p/8032330.html 默认情况下容器使用的资源是不受限制的.也就是可以使用主机内核调度器所允许的最大资源.但是在容器 ...

  6. hibernate关联关系的crud之级联

    cascade级联,只会影响CRUD的CUD,不会影响读取.不设置级联,从多的一方能读出一的一方,设了级联,从一的一方,默认也不能读出多的一方. 如果两个对象之间有关联,不管是一对多,多对一,单向还是 ...

  7. 【html5】cookie、sessionStorage、localStorage

    第四条补充:      cookie中包含domain和path,所有向该域下该路径发送的请求头部都会包含这个cookie:      session浏览器关闭后消失,只能由最初给对象存储数据的页面访 ...

  8. python-FTP模块

    #!/user/bin/python #coding=utf-8 import ftplib import os import socket HOST = 'ftp.kernel.org' DIRN ...

  9. Java新特性之Nashorn的实例详解

    Nashorn是什么 Nashorn,发音“nass-horn”,是德国二战时一个坦克的命名,同时也是java8新一代的javascript引擎--替代老旧,缓慢的Rhino,符合 ECMAScrip ...

  10. jQueryEasyUI 学习笔记

    jQuery EasyUI是什么? jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开 ...