初学JavaScript，通过博客记录自己学习过程中遇到的问题。（包含少量CSS）

零碎记录

JavaScript 输出

type="text/javascript"

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
脚本位置

在 <head> 或者 <body> 的JavaScript外部脚本不能包含 <script> 标签。
输出数据

window.alert() 弹出警告框。

document.write() 方法将内容写到 HTML 文档中。

innerHTML 写入到 HTML 元素。

console.log() 写入到浏览器的控制台。
输出内容

使用 document.write() 向文档输出写内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
写到控制台（调试模式）

使用 console.log() 方法在浏览器中显示 JavaScript 值。F12 启用调试模式，在调试窗口中点击 "Console" 菜单。

提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

局部、全局变量

变量	含义
局部变量	在函数中通过var声明的变量
全局变量	在函数外通过var声明的变量
没有声明就使用的变量	默认为全局变量，不论这个变量在哪被使用

几种点击显示

直接在标签中添加onclick="function()"

//body

<button id="demo2" onclick="demo22()">click me!</button>//两者选其一

<input type="button" id="demo2" onclick="demo22()" value="clike me!">//两者选其一

<p id="demoadd2"></p>

input和button标签的使用，input中type为button时和button的显示是一样的。

//script

function demo22() {

		document.getElementById("demoadd2").innerHTML="hhh";

}

addEventListener("click", function(){})

<input type="button" id="demo" value="clike me!">

<p id="demoadd"></p>

document.getElementById("demo").addEventListener("click", function() {

		document.getElementById("demoadd").innerHTML="hhh";

});

效果如下：

常见HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击HTML元素
onmouseover	在一个HTML元素上移动鼠标
onmouseout	在一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

shadow相关

box-shadow: 0 2px rgb(231, 106, 61);//前面的0表示了x和y的距离。即0 0 2px rgb();

outline

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，起到突出作用。

可设置如下属性（不需要按顺序）：

outline-color
outline-style
outline-width

outline:none可用于清楚input输入框点击时外围的蓝色框。

p {

border:red solid thin;

outline:#00ff00 dotted thick;

}

transform

-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
transform:rotate(7deg);
还可以特定方向旋转变换：X、Y等。

更多骚气变换

type of

type of x 获得x的类型。

===

表示绝对相等，即数据类型与值都相等。

不包含类classname的元素item选择器

p:not(.classname)

HTML使用#符合设置固定链接（不是很懂？）

有时你想要在你的网站上添加一个 a 元素，但你还不知道将它链接到哪里，这时你可以使用固定连接。

当你使用 jQuery 更改链接的行为时，这也很方便，我们稍后将会了解。

把 a 元素的 href 属性的值替换为一个 # （# 也称为哈希符号），将其转换为一个固定链接。

六个getElement函数

getElementById(); //返回指定 ID 的元素

getElementsByTagName(); //返回指定标签的元素 +s

getElementsByName(); //返回指定name的元素 +s

getElementsByClassName(); //返回指定CLASS的元素 +s

getAttribute(); //获得属性值

setAttribute(); //设置属性值

方法getElementsByxx()与 getElementById() 方法相似，但返回值不同，因为一个文档中的 name 属性或标签或类可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByxx() 方法返回的是元素的数组，而不是一个元素。

input中placeholder和value的区别

placeholder中的内容显示在输入框中，点击输入框文字消失；

value中的内容同样显示在输入框中，点击输入框文字不消失。

innerHTML

innerHTML属性设置或返回表格行的开始和结束标签之间的 HTML。

<html>

<head>

<script type="text/javascript">

function getInnerHTML()

  {

  alert(document.getElementById("tr1").innerHTML);

  }

</script>

</head>

<body>

<table border="1">

<tr id="tr1">

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr id="tr2">

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="getInnerHTML()"

value="Alert innerHTML of table row" />

</body>

</html>

Date()

var n=new Date().getDay();//获取当前日期的星期，星期天为0，类推。

循环

包括for/while/dowhile/forin，其他都比较熟悉，这里只说for/in：

For/in 循环，循环遍历对象的属性。

var person={fname:"John",lname:"Doe",age:25};

for (x in person)  // x 为属性名

{

    txt=txt + person[x];

}

break和continue

标签使用：

标记JavaScript语句，在语句前加上冒号：

label: statements

break和continue使用标号：

break labelname;

continue labelname;

带不带标签	出现范围
continue 语句（带有或不带标签引用）	只能用在循环中
break 语句（不带标签引用）	只能用在循环或 switch 中
break 语句（带标签引用）	可用于跳出任何 JavaScript 代码块

typeof

typeof操作符检测变量的数据类型

在JavaScript中，数组是一种特殊的对象类型。因此 typeof [1,2,3,4] 返回 object。

null和undefined

typeof undefined             // undefined

typeof null                  // object

null === undefined           // false

null == undefined            // true

均可用来清空变量。

null表空对象引用，用于清空对象。

undefined是一个没有设置值的变量，任何没有设置值的变量的类型都是undefined，故任何值都可以用undefined清空，清空之后类型为undefined。

JavaScript数据类型

类型转换

Number()
String()
Boolean()

5种数据类型：

number
string
boolean
object
function

3种对象类型

Date
Array
Object

2个不包含任何值的数据类型

null
undefined

注意

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是返回 object。但可以使用constructor判断，见下条。

constructor属性

constructor返回所有JavaScript变量的构造函数。

<p>判断是否为数组。</p>

<p id="demo"></p>

<script>

	var fruits = ["Banana", "Orange", "Apple", "Mango"];

	document.getElementById("demo").innerHTML = isArray(fruits);

	function isArray(myArray) {

    return myArray.constructor.toString().indexOf("Array") > -1;

    //toString()方法将构造函数强制转换成string，indexOf("Array")查找字串中"Array"。

	}

</script>

<p>判断是否为日期。</p>

<p id="demo"></p>

<script>

	var myDate = new Date();

	document.getElementById("demo").innerHTML = isDate(myDate);

	function isDate(myDate) {

    return myDate.constructor.toString().indexOf("Date") > -1;

	}

</script>

Number类型

浮点数

保存浮点数值需要的内存空间是整数值的两倍，所以ECMAScript会不失时机地将浮点数值转换为整数值。

浮点数值计算会产生舍入误差的问题。最高精度为17为小数，但是在算数计算时精确度远远不如整数。例如，0.1+0.2的结果不是0.3，而是0.30000000000000004，这个小误差会导致无法测试特定的浮点数值。
```
if (a+b==0.3) {

	alert("you got 0.3.");

}
```
测试将无法通过。因此，永远不要测试某个特定的浮点数值。
数值范围

ECMAScript能够表示的最小数值保存在Number.MIN_VALUE中；

最大数值保存在Number.MAX_VALUE中。

若超过了JavaScript数值范围的值，就自动转换成特殊的Infinity值，负数为-Infinity，正数为Infinity。

如果某次计算返回了正或负的无穷值，就无法继续下一步计算，因为Infinity不是能够参与计算的值。

isFinite()函数用来确定参数位于最小和最大数值之间，返回true/false。
NaN

NaN是一个特殊的数值。（infinity和NaN都是number类型）

任何涉及NaN的操作都会返回NaN。

NaN与任何值都不相等，包括NaN本身。
```
alert(NaN==NaN) //false
```
isNaN()函数将不是数值的参数转换为数值，不能转换的返回true，帮助我们判断这个值是否“不是数值”。
数值转换

函数	含义	不同
Number()	将任何类型转换为十进制数值	字符串包含非数字，则返回NaN；空字串返回0
parseInt()	将字符串转换为数值	空子串->NaN，第二参数为进制数；返回字符串前面数字部分
parseFloat()	将字符串转换为数值	没有第二参数，只能解析十进制数；返回字符串前面浮点数字部分

switch语句

switch语句中可以使用任何数据类型，包括字符串、对象等，case值也不一定是常量，可以是变量、表达式。

		switch("hello world!") {

			case "haha":

				alert("haha");

				break;

			case "hello" + "world!":

				alert("bingo!");

				break;

		}

		var num=25;

		switch(true) { //每个case值都是一个布尔值，与true比较

			case num<0:

				alert("num<0");

				break;

			case num>25:

				alert("num>25");

				break;

			case num==25:

				alert("num=25");

		}

switch语句在比较值时使用的是全等操作符===，即类型和数值都要比较。

函数

理解参数

ECMAScript函数没有签名（参数类型和个数）。也就是说，即便定义的函数只接受两个参数，在调用这个参数时也未必一定要传递两个参数，可多可少。
参数可以在函数体内通过arguments对象来访问参数数组，从而获取传递给函数的每一个参数。
事实上，arguments对象只是与数组相似（它并不是Array的实例），因为可以通过方括号语法[num]访问每一个元素，用length属性确定传递进来多少个参数。
arguments[n]会和第n个参数的值同步，修改arguments[0]，则第一个参数的值也被修改，但它们的内存空间是独立的，读取这两个值不访问相同的内存空间。没有传递值的命名参数将自动被赋予undefined值。

开发人员可以利用length属性让函数能够接收任意个参数并分别实现适当功能（算不上完美的重载，但也足够弥补ECMAScript没有重载的遗憾了），例如：

		function getN() {

			switch(arguments.length) {

				case 0:

					alert("no arguments");

					break;

				case 1:

					alert("1 arguments");

					break;

				case 2:

					alert("2 arguments");

			}

		}

		getN(2,2);

		getN();

		getN(1);

没有重载

没有函数签名，真正的重载是不可能实现的。
如果定义了两个名字相同的函数，则该名字只属于后定义的函数。后定义的函数覆盖了先定义的函数。

实例

点击控制灯泡亮暗&点击改变字体颜色

<script type="text/javascript">

		function change() {

			image=document.getElementById("bulb");

			if (image.src.match("1")) {

				image.src="2.png";

			}

			else {

				image.src="1.png";

			}

		}

		function changeColor() {

			word=document.getElementById("demo");

			if (word.style.color=="red") {

				word.style.color="green";

			}

			else

				word.style.color="red";

		}

		function alertdemo() {

			x=document.getElementById("inputdemo").value;

			if (x==""||isNaN(x)) {

				alert("It's not a numer!");

				image.src="1.png";

			}

			else {

				// alert("right!");

				image=document.getElementById('bulb');

				image.src="2.png";

			}

		}

</script>

	<img src="1.png" onclick="change()" id="bulb">

	<p id="demo" style="color: red;" onclick="changeColor()">I can turn green or red!</p>

	<button type="button" onclick="changeColor()">click here to change word color!</button><br><br>

	<input id="inputdemo" type="text">

	<button type="button" onclick="alertdemo()">alert if what you input isn't a number.</button>

效果图：

实现简单计算器

//完整代码

<!DOCTYPE html>

<html>

<head>

	<title>简单计算器</title>

	<link rel="shortcut icon" href="../icons/project.jpg">

	<style type="text/css">

		table {

			margin: 200px auto;

			text-align: center;

			background-color: rgb(251, 249, 242);

			box-shadow: 3px 3px 10px #555;

		}

		body {

			background: url("../background/ridwhite.png");

		}

		input {

			background-color: rgb(251, 249, 242);

			text-align: center;

			vertical-align: middle;

		}

		button {

			width: 23px;

			height: 23px;

			padding: 0;

			margin: 2px;

			vertical-align: middle;

		}

	</style>

</head>

<body>

	<table border="1">

		<caption style="padding: 2px"><b>简单计算器<b></caption>

		<tr>

			<td>第一个数:</td>

			<td><input id="firstNum" placeholder="输入数字"></td>

		</tr>

		<tr>

			<td>第二个数:</td>

			<td><input id="secondNum" placeholder="输入数字"></td>

		</tr>

		<tr>

			<td colspan="2">

				&nbsp<button onclick="add()">＋</button>

				&nbsp<button onclick="subtract()">－</button>

				&nbsp<button onclick="multiple()">×</button>

				&nbsp<button onclick="devide()">÷</button>

			</td>

		</tr>

		<tr>

			<td>结果：</td>

			<td>

				<p id="result"></p>

			</td>

		</tr>

	</table>

	<script>

		var result=new Number; //static value

		function add() {

			var a=document.getElementById("firstNum").value;

			var b=document.getElementById("secondNum").value;

			if (a==""||b==""||isNaN(a)||isNaN(b)) {

				sendNum("no");

				return;

			}

			result=Number(a)+Number(b); //Number(x) turn var x into number x.

			sendNum(result);

		}

		function subtract() {

			var a=document.getElementById("firstNum").value;

			var b=document.getElementById("secondNum").value;

			if (a==""||b==""||isNaN(a)||isNaN(b)) {

				sendNum("no");

				return;

			}

			result=Number(a)-Number(b); //Number(x) turn var x into number x.

			sendNum(result);

		}

		function multiple() {

			var a=document.getElementById("firstNum").value;

			var b=document.getElementById("secondNum").value;

			if (a==""||b==""||isNaN(a)||isNaN(b)) {

				sendNum("no");

				return;

			}

			result=Number(a)*Number(b); //Number(x) turn var x into number x.

			sendNum(result);

		}

		function devide() {

			var a=document.getElementById("firstNum").value;

			var b=document.getElementById("secondNum").value;

			if (a==""||b==""||isNaN(a)||isNaN(b)) {

				sendNum("no");

				return;

			}

			else if (b=="0") {

				sendNum("no_devide");

				return;

			}

			result=Number(a)/Number(b); //Number(x) turn var x into number x.

			sendNum(result);

		}

		function sendNum(re) {

			if (re=="no")

				alert("请输入数字！");

			else if (re=="no_devide")

				alert("分母不能为0！");

			else

				document.getElementById("result").innerHTML=re;

		}

	</script>

</body>

</html>

改进界面的计算器

源代码上传github

CSS、JavaScript学习过程的更多相关文章

html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]
今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...
html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
HTML/CSS的学习过程一览
HTML/CSS的学习过程一览说明调试工具使用的是Google Chrome浏览器,其余浏览器出现的问题,这锅我不背[傲娇脸可以使用浏览器查看源代码网页列表 HTML_CSS_1 HTML基本 ...
HTML+CSS+JAVASCRIPT 总结
1. HTML 1: <!doctype html> 2:  3: ...
Umbraco（3） - CSS & Javascript（翻译文档）
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...
原创的基于HTML/CSS/JavaScript的层级目录树
之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...
MiniCodeEditor：只有168字节的在线Html/CSS/JavaScript编辑器
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:MiniCodeEditor:只有168字节的在线Html/CSS/JavaScript编辑器.
CSS+Javascript的那些框架
CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint http://www.oschina.net/p/blueprintcss Ela ...
3 Ways to Preload Images with CSS, JavaScript, or Ajax---reference
Preloading images is a great way to improve the user experience. When images are preloaded in the br ...

随机推荐

Python基础-月考
1. 8<<2等于? # 解释:将8按位左移2位 # 8 0 0 0 0 1 0 0 0 # 32 0 0 1 0 0 0 0 0 2. 通过内置函数计算5除以2的余数 print(div ...
Linux基础之-网络配置，主机名设置，ssh登陆，scp传输
一. 网络配置修改 1.临时修改(ip,dns,netmask,gateway) 临时修改网络配置,只要没有涉及到修改配置文件的,在network服务重启后,所有设置失效 2.永久修改(ip,dns, ...
关于ES7里面的async和await
async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享asy ...
C#链接数据库：SQL Server 2008
自己学习C#编程,在WinForm编程中,代码测试连接数据库. 现在sqlserver中测试使用的数据库能否以指定的用户名和密码登录. 如图所示,计算机名为administrator,数据库实例为sq ...
WinAPI: GetModuleFileName、GetModuleHandle
原文:http://www.cnblogs.com/del/archive/2008/06/17/1223681.html unit Unit1; interface uses Windows, ...
制作rpm安装包
1.安装rpmbuild软件 sudo apt-get install rpmbuild2.配置工作路径在制作 rpm 包之前,首先要配置工作路径,也就是制作 rpm 包所在的目录.制作 rpm 包 ...
JDBC mysql驱动
在用JDBC连接MySQL数据库时,需要使用驱动 mysql-connector-java-5.1.41-bin.jar 在本地java应用程序中,只需将jar包导入到项目library中即可, 而在 ...
一张图看懂CSS cascade, specific, importance, inheritance
http://www.w3.org/TR/CSS21/cascade.html#inheritance http://www.w3.org/TR/CSS21/cascade.html#cascade ...
c#编程指南(五) 扩展方法（Extension Method）
C# 3.0就引入的新特性,扩展方法可以很大的增加你代码的优美度,扩展方法提供你扩展.NET Framewoke类的扩展途径,书写和规则也简单的要命. 编写扩展方法有下面几个要求: 第一:扩展方法所在 ...
C++中虚继承的作用及底层实现原理
http://blog.csdn.net/bxw1992/article/details/77726390

CSS、JavaScript学习过程