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( ...
随机推荐
- sourceTree"重置提交"和"提交回滚"的区别
相信用过sourceTree的伙伴们都认识这两,但是不一定用过这两个功能,甚至是不能很好的把握它两的区别,根据自己最近亲身测试,总算是能小小的总结一下了 首先这儿假如,历史版本已经出现了1.2.3.4 ...
- 2016级算法第六次上机-F.AlvinZH的学霸养成记VI
1082 AlvinZH的学霸养成记VI 思路 难题,凸包. 分析问题,平面上给出两类点,问能否用一条直线将二者分离. 首先应该联想到这是一个凸包问题,分别计算两类点的凸包,如果存在符合题意的直线,那 ...
- FlowPortal-BPM——基础知识
BPM(业务流程管理) ERP:企业资源规划(Enterprise Resource Planning) HR:人力资源规划(Human Resources Planning) CRM:客户关系管理( ...
- ZJOI2019 day2 游记
应该是打的最没有信仰的一次比赛了 然后这个垃圾水平居然还拿了170,真是有毒 我的语文并不好所以还是写流水账吧 day-2 到了余姚,发现附近并没有什么好吃的,于是直接去kfc了 另外潮湿的空气对呼吸 ...
- 让 Linux grep 的输出不换行
在Redhat中亲测. 本来ps -ef的输出是不会换行的,但是 ps -ef | grep java 就换行了. 如果想让grep完的结果不要换行,找到两种方法. 1. 在后面拼接 less -S: ...
- gerapy的初步使用（管理分布式爬虫）
一.简介与安装 Gerapy 是一款分布式爬虫管理框架,支持 Python 3,基于 Scrapy.Scrapyd.Scrapyd-Client.Scrapy-Redis.Scrapyd-API.Sc ...
- (转)OpenStack之服务端口号
原文:https://blog.csdn.net/henulwj/article/details/47276391 在部署openstack的过程中,你会遇到配置各种服务的endpoint,opens ...
- 如何对react进行性能优化
React本身就非常关注性能,其提供的虚拟DOM搭配上DIff算法,实现对DOM操作最小粒度的改变也是非常高效的,然而其组件的渲染机制,也决定了在对组件更新时还可以进行更细致的优化. react组件 ...
- Linux网络编程服务器模型选择之IO复用循环并发服务器
在前面我们介绍了循环服务器,并发服务器模型.简单的循环服务器每次只能处理一个请求,即处理的请求是串行的,效率过低:并发服务器可以通过创建多个进程或者是线程来并发的处理多个请求.但是当客户端增加时,就需 ...
- C++11 实现生产者消费者双缓冲
基础的生产者消费者模型,生产者向公共缓存区写入数据,消费者从公共缓存区读取数据进行处理,两个线程访问公共资源,加锁实现数据的一致性. 通过加锁来实现 class Produce_1 { public: ...