CSS、JavaScript学习过程

初学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声明的变量
没有声明就使用的变量 默认为全局变量，不论这个变量在哪被使用

几种点击显示

  1. 直接在标签中添加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";
}
  2. 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类型

  1. 浮点数
    保存浮点数值需要的内存空间是整数值的两倍，所以ECMAScript会不失时机地将浮点数值转换为整数值。
    浮点数值计算会产生舍入误差的问题。最高精度为17为小数，但是在算数计算时精确度远远不如整数。例如，0.1+0.2的结果不是0.3，而是0.30000000000000004，这个小误差会导致无法测试特定的浮点数值。

    if (a+b==0.3) {
	alert("you got 0.3.");
}

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

  2. 数值范围
    ECMAScript能够表示的最小数值保存在Number.MIN_VALUE中；
    最大数值保存在Number.MAX_VALUE中。
    若超过了JavaScript数值范围的值，就自动转换成特殊的Infinity值，负数为-Infinity，正数为Infinity。
    如果某次计算返回了正或负的无穷值，就无法继续下一步计算，因为Infinity不是能够参与计算的值。
    isFinite()函数用来确定参数位于最小和最大数值之间，返回true/false。

  3. NaN
    NaN是一个特殊的数值。（infinity和NaN都是number类型）
    任何涉及NaN的操作都会返回NaN。
    NaN与任何值都不相等，包括NaN本身。

    alert(NaN==NaN) //false

    isNaN()函数将不是数值的参数转换为数值，不能转换的返回true，帮助我们判断这个值是否“不是数值”。

  4. 数值转换

函数 含义 不同
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);
没有重载
  • 没有函数签名，真正的重载是不可能实现的。
  • 如果定义了两个名字相同的函数，则该名字只属于后定义的函数。后定义的函数覆盖了先定义的函数。

实例

  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>

效果图：
效果图

  1. 实现简单计算器
//完整代码
<!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>

calculator

  1. 改进界面的计算器
    源代码上传github
    在这里插入图片描述
posted @ 2019-04-09 12:35  绣花  阅读(339)  评论(0)  编辑  收藏  举报