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( ...
随机推荐
- Jsp入门实战上
前面讲了servlet入门实践现在开始介绍jsp入门实践,开发环境的搭建请参考我前面的tomcat的文章,jsp入门教程分为上下两部分,第一部分简单讲解:jsp语法的规范,以及三大编译指令,七个动作指 ...
- Lambda入门
Lambda 来源于微积分数学中的 λ,其涵义是声明为了表达一个函数具体需要什么. Table of contents Introduction 使用 Introduction 什么是Lambda? ...
- 在eclipse中，用maven创建web项目
备注:该文档是之前学习时,根据网上其他童鞋的经验自己测试后梳理,如有侵权,请勿怪,感谢! 1.在eclipse中用maven创建项目,右键new>>Maven Project 2.点击ne ...
- Python中的匿名函数lambda的用法
一.lambda函数的简介 对lambda函数,它其实是一个类似于def的函数,只不过lambda是一个不需要定义函数名的匿名函数.当我们在有些时候,需要做一些简单的数学计算时,如果定义一个def函 ...
- P2046 [NOI2010]海拔
题目链接 题意分析 首先一看就知道这是一道最小割 这里奉上最小割的代码 #include<iostream> #include<cstdio> #include<cstr ...
- 阿里云 下载的 apache 证书 转换为 pcks8 证书
第一步: 百度 搜索 rsa 转 pcks8 将 .key 文件 转换成 pcks8.key . 第二部: 将 chain.crt 的 内容 复制到 public.crt 下方.. 新的 publi ...
- (转)【干货】MySQL 5.7 多实例（多进程）配置教程
原文:https://blog.csdn.net/zougen/article/details/79567744 https://klionsec.github.io/2017/09/20/mysql ...
- oauth2.0的授权流程详解
授权模式 1)oauth2.0 提供了四种授权模式,开发者可以根据自己的业务情况自由选择. 授权码授权模式(Authorization Code Grant) 隐式授权模式(简化模式)(Implici ...
- PHP 判断字符串 是否 包含另一个字符串
1.stristr 忽略大小写 $string = 'Hello World!'; if(stristr($string, 'earth') === FALSE) { echo '"eart ...
- accessToken的使用
1.accessToken是啥,干嘛用? 形象解释:申请调兵-->皇帝同意-->兵符-->开始调兵 拿到用户在第三方平台的唯一的标识; 获取用户的nickname,头像,邮箱等其他信 ...