今天学习了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

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

最后的效果如下图：

代码附上：

  1.  <html>
  2.      <head>
  3.          <title>模拟计算器</title>
  4.          <meta charset="UTF-8"/>
  5.          <style type="text/css">
  6.              #showdiv{
  7.                  border: solid 1px;
  8.                  border-radius: 10px;
  9.                  width: 300px;
  10.                  height:350px;
  11.                  margin: auto;
  12.                  margin-top: 60px;
  13.                  text-align: center;
  14.                  background-color: khaki;
  15.              }
  16.  
  17.              input[type=text]{
  18.                  width:290px ;
  19.                  height: 35px;
  20.                  margin-left: 5px;
  21.                  margin-right: 5px;
  22.                  margin-top: 20px;
  23.                  margin-bottom: 10px;
  24.                  font-size: 20px;
  25.              }
  26.              input[type=button]{
  27.                  width: 60px;
  28.                  height: 60px;
  29.                  margin-left: 5px;
  30.                  margin-right: 5px;
  31.                  margin-top: 5px;
  32.                  font-size: 25px;
  33.              }
  34.          </style>
  35.  
  36.          <script type="text/javascript">
  37.              function test(btn){
  38.                  var num = btn.value;
  39.                  switch (num){
  40.                      case "=":
  41.                          document.getElementById("inp").value = eval(document.getElementById("inp").value);
  42.                          break;
  43.                      case "c":
  44.                          document.getElementById("inp").value="";
  45.                          break;
  46.                      default:
  47.                      /*直接使用字符串的拼接*/
  48.                          document.getElementById("inp").value=document.getElementById("inp").value+num;
  49.                          break;
  50.                  }
  51.              }
  52.          </script>
  53.      </head>
  54.      <body>
  55.          <div id="showdiv">
  56.              <input type="text" name="" id="inp" value="" /><br />
  57.              <!--//onclick 点击即可触发动作-->
  58.              <input type="button" name="" id="btn" value="1" onclick="test(this)"/>
  59.              <input type="button" name="" id="" value="2" onclick="test(this)"/>
  60.              <input type="button" name="" id="" value="3" onclick="test(this)"/>
  61.              <input type="button" name="" id="" value="+" onclick="test(this)"/><br />
  62.              <input type="button" name="" id="" value="4" onclick="test(this)"/>
  63.              <input type="button" name="" id="" value="5" onclick="test(this)"/>
  64.              <input type="button" name="" id="" value="6" onclick="test(this)"/>
  65.              <input type="button" name="" id="" value="-" onclick="test(this)"/><br />
  66.              <input type="button" name="" id="" value="7" onclick="test(this)"/>
  67.              <input type="button" name="" id="" value="8" onclick="test(this)"/>
  68.              <input type="button" name="" id="" value="9" onclick="test(this)"/>
  69.              <input type="button" name="" id="" value="*" onclick="test(this)"/><br />
  70.              <input type="button" name="" id="" value="/" onclick="test(this)"/>
  71.              <input type="button" name="" id="" value="0" onclick="test(this)"/>
  72.              <input type="button" name="" id="" value="c" onclick="test(this)"/>
  73.              <input type="button" name="" id="" value="=" onclick="test(this)"/>
  74.          </div>
  75.      </body>
  76.  </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. 利用python 学习数据分析 (学习一)

    内容学习自: Python for Data Analysis, 2nd Edition         就是这本 纯英文学的很累,对不对取决于百度翻译了 前情提要: 各种方法贴: https://w ...

  2. 2016级算法期末上机-A.简单·Bamboo's Fight with DDLs I

    简单·Bamboo's Fight with DDLs I 分析 一句话:要装满的完全背包问题. 对比完全背包只有一点要改变:初始化为负无穷 传送门: https://buaacoding.cn/pr ...

  3. Spring+SpringMVC+Mybatis整合redis

    SSM整合redis redis是一种非关系型数据库,与mongoDB不同的是redis是内存数据库,所以访问速度很快.常用作缓存和发布-订阅式的消息队列. 这里用的是ssm框架+maven构建的项目 ...

  4. Windows下部署安装Docker

    好长时间没用Docker,最近准备部署一下,做个记录,今天早上去官网下载,发现Docker开始区分Docker Community Edition(社区版)和Docker Enterprise Edi ...

  5. python之守护进程

    主进程创建子进程,然后将该进程设置成守护自己的进程,守护进程就好比崇祯皇帝身边的老太监,崇祯皇帝已死老太监就跟着殉葬了. 关于守护进程需要强调两点: 其一:守护进程会在主进程代码执行结束后就终止 其二 ...

  6. Powershell cannot be loaded because running scripts is disabled on this system 解决办法

    问题背景 第一次跑ps时,出现了下面的提示.这是因为windows不允许执行脚本而已,不要大惊小怪. 解决办法 这个需要管理员执行,不然会出现以下的情况 正常情况

  7. Vue项目开发目录结构

    最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两 ...

  8. （转）搞个这样的APP要多久？心酸啊。

    这是一个“如有雷同,纯属巧合”的故事,外加一些废话,大家请勿对号入座.开始了…… 我有些尴尬地拿着水杯,正对面坐着来访的王总,他是在别处打拼的人,这几年据说收获颇丰,见移动互联网如火如荼,自然也想着要 ...

  9. js 数组随机排序

    仅用于个人学习记录 javascript 数组随机排序1.最简洁的方法:function randomsort(a, b) {    return Math.random()>.5 ? -1 : ...

  10. linux 安装php bz2扩展

    折腾了半天,最大的坑就是我是用lnmp一键安装php环境,php7下面没有ext文件夹,有个include下面虽然有个ext 但是里面没有需要的bz2 也尝试去pecl  和 pear 上面去找  无 ...