初学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 ...

随机推荐

autocomplete 属性清除input框输入存留历史值,防止下拉历史值显示
autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项. 注释:aut ...
Python代码变量None的使用
代码中经常会有变量是否为None的判断,有三种主要的写法: 第一种是'if x is None': 第二种是 'if not x:': 第三种是'if not x is None'(这句这样理解更清晰 ...
File中mkdir()和mkdirs()的区别
mkdir() 创建此抽象路径名指定的目录.只能在已经存在的目录中创建文件夹如: File folder = new File("d:\\test1\\test2"); fold ...
MSSQLServer——全国省份城市SQL语句
use hr create table dbo.province ( proID int primary key, proName ), keys ) ) ,'北京市','B'); ,'天津市','T ...
Logistic Regression 之错误翻译
根据周志华老师的讲法,这里 logistic 是对数几率的意思,所以正确的翻译方法应该叫对数几率回归, 所以不要以为这个东西叫逻辑回归,逻辑回归是错误的翻译.
restful知识点之一CBV
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^FBVTEST/', views.FBV_Test.as_view()), ] url ...
4.Linux文件系统层次体系标准
这是不完整的linux文件系统层次体系标准,不是所有Linux发行版都根据这个标准,但大多数都是: 目录评论 / 根目录,万物起源. /bin 包含系统启动和运行所必须的二进制程序. /boot 包 ...
Android Studio 2.3.2 下载 - 百度网盘
Android Studio是一个为Android平台开发程序的集成开发环境,其包含用于构建Android应用所需的所有工具. Android Studio 2.3.2为最新的稳定版(截止到2017年 ...
python 案例一（电话铺）
经过自己努力,做了一个简单的电话铺的录入和查询小程序,比较简单,喜欢的朋友可以练练手. 题目: 创建你自己的命令行地址簿程序.在这个程序中,你可以添加.修改.删除和搜索你的联系人(朋友.家人和同事 ...
classifier.cc-recv() [ns2.35]
//without comments int chooseECNSlot() { ; ;i<=nslot_;i++) { *count) { *count); )*ti; ;j<=nslo ...

CSS、JavaScript学习过程