今天学习了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. Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierIm Lorg/gradle/api/artifacts/ModuleIdentifier;

    今天碰到一个问题, 正常的下载gradle到本地,然后到spring官网上通过他们提供的start.spring.io创建一个demo项目, 然后在idea中打开,并配置下载的gradle到idea中 ...

  2. Git、Github、码云 笔记汇总

    从本地恢复码云的项目 把本地项目同步到码云 CBoard 基于0.4.1的旧版本的分支修改合并到0.4.2新版本里面 通过git命令行把一个分支的其中一个commit(提交)合并到另外一个分支里面去

  3. Webpack学习错误解决笔记

    错误1:在用npm install 安装模块时,时常会出现没有以下类似的错误 解决方法:右键点击node_modules文件夹,选取属性,将文件夹只读选项去除 错误2:在学习到清理/dist文件夹这块 ...

  4. Typecho V1.1反序列化导致代码执行分析

    0x00  前言     今天在Seebug的公众号看到了Typecho的一个前台getshell分析的文章,然后自己也想来学习一下.保持对行内的关注,了解最新的漏洞很重要. 0x01  什么是反序列 ...

  5. Flask中的before_request装饰器和after_request装饰器以及WTForms组件

    一.before_request装饰器和after_request装饰器 我们现在有一个Flask程序其中有3个路由和视图函数 from flask import Flask app = Flask( ...

  6. Iviews视频搜索引擎

    随着视频类型的增加和数据量的日益庞大,如何有效地组织和管理这些数据,使人们能够方便地从大量视频数据中找到自己感兴趣的相关视频片段已成为一种迫切的需求,而能够满足这一需求的技术便是目前人们普遍关注的基于 ...

  7. 写在学习Oracle之前

    好久没有更新我的博客了,主要是因为年前换了工作.新工作比较忙,很少时间来博客园了. 作为Android开发人员,我为什么要学习Oracle数据库呢?我是非计算机专业出身,大学没有学习过任何关于数据库和 ...

  8. Cloudera Manager安装之利用parcels方式安装单节点集群（包含最新稳定版本或指定版本的安装）（添加服务）（CentOS6.5）（四）

    不多说,直接上干货! 福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑          ...

  9. hr中间插入字体

    修饰CSS:hr:before { content: "??";} hr:after { content: " This is an <hr> element ...

  10. 事务实现,redo,undo,锁

    事务(Transaction)是数据库区别于文件系统的重要特性之一.在文件系统中,如果你正在写文件,但是操作系统突然崩溃了,这个文件就很有可能被破坏.当然,有一些机制可以把文件恢复到某个时间点.不过, ...