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声明的变量 |
没有声明就使用的变量 | 默认为全局变量,不论这个变量在哪被使用(不推荐) |
几种点击显示
- 直接在标签中添加οnclick=“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"; });
- 在script中:
ele.onclick = function() {//function body}
效果如下:
常见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等。
更多骚气变换
===
表示绝对相等,即数据类型与值都相等。
不包含类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);
没有重载
- 没有函数签名,真正的重载是不可能实现的。
- 如果定义了两个名字相同的函数,则该名字只属于后定义的函数。后定义的函数覆盖了先定义的函数。
传递参数
基本类型
Undefined/Null/Boolean/Number/String
引用类型
是保存在内存中的对象,变量对象中的值实际上为一个指针,指向内存的地址。
<script>var ob1 = new Object;var ob2 = ob1;ob1.name="zhuang";ob2 = new Object;alert(ob1.name);//alert结果为“zhuang”,可知,对象名保存的是地址指针。</script>
setInterval()和clearInterval()
var myInterval = setInterval(function(){ funcname() }, interval_time);
or = setInterval(funcname, interval_time);
clearInterval(myInterval);
实例
- 点击控制灯泡亮暗&点击改变字体颜色
<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"> <button onclick="add()">+</button> <button onclick="subtract()">-</button> <button onclick="multiple()">×</button> <button onclick="devide()">÷</button></td></tr><tr><td>结果:</td><td><p id="result"></p></td></tr></table><script>var result=new Number; //static valuefunction 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!");elsedocument.getElementById("result").innerHTML=re;}</script>
</body>
</html>
- 改进界面的计算器
源代码上传github
CSS、JavaScript学习过程相关推荐
- HTML期末学生作业 HTML+CSS+JavaScript仿猫眼电影在线网站 Hbuilder网页制作
❤ HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) web期末结课大作业 html+css+javascript网页.电影.仿京东.天猫.服装. 企业网站制 ...
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
- Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...
- html,css,javascript之间的关系是什么?各是负责哪方面工作的?
html,css,javascript之间的关系是什么?各是负责哪方面工作的? html是xml的前身,你说的html是指单纯的静态页面,也就是写什么就是什么. css就是美化html,女人再漂亮也要 ...
- HTML CSS JavaScript 从一个表格到一个灰阶颜色表(目录)
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
- 生日祝福(HTML+CSS+JavaScript+jQuery)
生日倒计时 下载地址:[生日祝福(HTML+CSS+JavaScript+jQuery).zip-教育文档类资源-CSDN下载]
- Django 模板中使用css, javascript
Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...
- 张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc <课程案例 --案例 图3-1 网站div结构布局示意图 3.2界 ...
- app登录界面背景 css_计算机毕业设计中Java web实现简登录页面(MyBatis+jsp+servlet+html+css+javascript)...
点击上方"蓝字",关注我们. 本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面.对用户输入的用户名和密码就行校验,校验 ...
- HTML期末学生大作业-奶茶网页作业html+css+javascript
html网页制作期末大作业--奶茶网站html+css+javascript 5个页面适用学生作业 课程设计奶茶.期末作业奶茶网.毕业设计奶茶网页 部分网页截图 部分网页源码 <!DOCTYP ...
最新文章
- 美国防部报告传指联想产品带来网络威胁
- linux c select 设置超时
- RTL8111H-CG规格书 DATASHEET
- SAP的这三款CRM解决方案,您能区分清楚么
- Python爬虫_正则表达式小例子
- 【最佳实践】【Blend】Triggers、Actions 和 Behaviors
- 2017 Multi-University Training Contest - Team 4:1004. Dirt Ratio
- java连接hive类找不着_JDBC 连接 hive2 遇到的java.lang.ClassNotFoundException: org.apache.hive.jdbc.HiveDriver...
- iTerm2 + Fish 打造高效终端
- java md5加密源码_javaMD5加密源码
- 扫雷游戏网页版_借“买量”造爆款,《梦幻西游网页版》击穿H5游戏天花板
- CMMB手机电视入网咋就这么难?
- 泛微OA 任意文件上传漏洞
- java frappuccino_星巴克的“十二星座代表饮品” 你是星冰乐还是特浓咖啡?
- SourceTree提交代码报错git -c diff.mnemonicprefix=false -c core.quotepath=false commit -q -F C:\Users\honry
- 【Pygame实战】风靡全球的切水果游戏升级版“水果忍者”上线啦,你敢来PK嘛?
- Algorithms, 4th Edition 算法4精华笔记,通俗理解,算法收集与强化
- 微服务架构之:Redis的分布式锁---搭建生产可用的Redis分布式锁
- Gulp折腾记 - (2)常用任务构建的demo
- 迭代加权多元变化检测(IRMAD) python实现
热门文章
- 锯齿数独 cocos2d-x 开发 (一)
- 运筹学实验4 运输问题的求解(二)
- 矩阵分析 第3版 史荣昌 课后习题答案
- 物理量子计算机论文,冷槽离子量子计算机中的温度效应-理论物理专业毕业论文.docx...
- 【物联网(IoT)开发】Arduino IDE的工具开发板菜单中找到我的开发板型号怎么办?
- 隐藏在QQ2000当中的大秘密 !!!
- 低配置高自由度游戏_高/低游戏
- [附源码]java毕业设计宠物店管理系统
- 配电室环境远程监控物联网方案
- Linux中使用iOStream头文件,在Linux中使用gcc链接iostream.h