JavaScript初学
今天学习了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初学的更多相关文章
- Javascript初学篇章_5(对象)
对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...
- Javascript初学篇章_4(循环与函数)
七.循环语句 1.While 语法: while (exp){ //statements; } 说明: while (变量<=结束值){ 需执行的代码 } 例: var i=0; while(i ...
- Javascript初学篇章_3(注释/if/switch)
五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 el ...
- Javascript初学篇章_1（概念/数据类型）
Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...
- JavaScript 初学备忘录
JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现 ...
- javascript初学笔记
基本语句 赋值条件循环语句 javascript异常处理语句 trycatchfinally语句 Error对象 throw语句 函数 定义 调用 嵌套函数 函数的嵌套定义 内置函数 匿名函数和Fun ...
- 19 01 08 javascript 初学
变量 JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. 定义变量需要用关键字 'var' 变量类型 5种基本数据类型:1.number 数字类型2.string ...
- Javascript初学篇章_8（事件）
事件 HTML 事件是发生在 HTML 元素上的事情.例如用户点击按钮时,点击也是一个事件.事件可以用于处理表单验证,用户输入,用户行为及浏览器动作,如: 页面加载时触发事件 页面关闭时触发事件 用户 ...
- Javascript初学篇章_7（DOM）
DOM 文档对象模型DOM (document object model) 文档对象模型,它定义了操作文档对象的接口.DOM 把一份html文档表示为一棵家谱树,使用parent(父), child( ...
随机推荐
- (转)Javascript模块化编程（二）：AMD规范
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- 让 Linux grep 的输出不换行
在Redhat中亲测. 本来ps -ef的输出是不会换行的,但是 ps -ef | grep java 就换行了. 如果想让grep完的结果不要换行,找到两种方法. 1. 在后面拼接 less -S: ...
- (转)OpenStack构架知识梳理
http://www.cnblogs.com/kevingrace/p/8459034.html-------------------Openstack架构概念图-简单汇总 原文:http://www ...
- spring boot快速入门 1 ：创建项目、 三种启动项目方式
准备工作: (转载)IDEA新建项目时,没有Spring Initializr选项 最近开始使用IDEA作为开发工具,然后也是打算开始学习使用spring boot. 看着博客来进行操作上手sprin ...
- IE8下不识别indexOf的问题
1.为Array原型添加indexOf方法(如果学过面向对象,相当于给Array类添加实例方法),方法体如下: //添加数组IndexOf方法 if (!Array.prototype.indexOf ...
- yaf视图
Yaf默认是开启了自动渲染,所以建了action后,他就会自己找模板!在测试的时候,如果不想让他寻找模板可以在action中return false 或者在bootstrap.php中关闭渲染 Yaf ...
- InnoDB的B+树索引使用
何时使用索引 并不是在所有的查询条件下出现的列都需要添加索引.对于什么时候添加B+树索引,我的经验是访问表中很少一部分行时,使用B+树索引才有意义.对于性别字段.地区字段.类型字段,它们可取值的范围很 ...
- STL中deque 解析
一.deque的中控器 deque是连续空间(至少逻辑上看来如此),连续线性空间总令我们联想到array或vector.array无法成长,vector虽可成长,却只能向尾端成长,而且其所谓的成长原是 ...
- Go RabbitMQ（三）发布订阅模式
RabbitMQ 在上一节中我们创建了工作队列,并且假设每一个任务都能够准确的到达对应的worker.在本节中我们将介绍如何将一个消息传递到多个消费者,这也就是所说的发布订阅模式 为了验证该模式我们使 ...
- 《高质量c++/c编程指南》学习摘要
1. 尽可能在定义变量的同时初始化该变量(就近原则)——防止忘记初始化,引用未被初始化的变量,可能导致程序错误 2. 代码行最大长度宜控制在70~80个字符以内(长行拆分)——否则眼睛看不过来,也不便 ...