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( ...
随机推荐
- 46.ActiveMQ开篇（Hello World、安全认证、Connection、Session、MessageProducer、MessageConsumer）
要给有能力的人足够的发挥空间,公司可以养一些能力平平甚至是混日子的人,但绝不能让这些人妨碍有能力的人,否则这样的环境不留也罢. 一.背景介绍 CORBA\DCOM\RMI等RPC中间件技术已经广泛应用 ...
- QuantLib 金融计算——基本组件之天数计算规则详解
目录 天数计算规则详解 定义 30 / 360 法 30/360 US 30/360 Bond Basis 30E/360 30E/360 ISDA Actual 法 Actual/Actual IC ...
- SCOI2019 游记
写在前面 其实冬令营之后就有一些想说的内容,由于心情原因没有写出来.PKUWC 失误频频,唯一可能还有点价值的就是 Day2T3 计算几何推了 76 分出来.NOIWC 更是无心再谈,感觉是被提答送走 ...
- MySQL的逻辑查询语句的执行顺序
一.select语句关键字的定义顺序 二.select语句关键字的执行顺序 三.准备表和数据 四.准备SQL逻辑查询测试语句 五.执行顺序分析 一.select语句关键字的定义顺序 SELECT DI ...
- (转)Oracle与DB2在数据库高可用技术上的相同与差异探讨
原文:http://www.talkwithtrend.com/Article/178339 数据库建设过程中,高可用是每一个企业数据中心数据库建设过程中至关重要的一个关注点,直接关系到业务连续性和稳 ...
- 【转发】Webdriver使用自定义Firefox Profile运行测试
点击进入转发地址: 一般我们使用如下代码启动Firefox: 这样Selenium Server启动的Firefox将是一个全新的,不安装任何Add-On的Firefox. 如果有需要,我们可以使用我 ...
- Json＆XML比较
1.定义 1.1 XML定义 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用 ...
- 《LeetBook》leetcode题解(9):Palindrome Number[E]——回文数字
我现在在做一个叫<leetbook>的开源书项目,把解题思路都同步更新到github上了,需要的同学可以去看看 地址:https://github.com/hk029/leetcode 这 ...
- 031-CookieUtils 工具类模板
模板一: package com.leo.common.utils; import java.io.UnsupportedEncodingException; import java.net.URLD ...
- MongoDB数据库及其Python用法
一 .命令行模式 mongo # 进入mongodb命令行模式 show dbs use taobao # 进入该数据库,如不存在则创建之 show tables # 条件操作符 (>) 大于 ...