javaScript的简单学习
JavaScript介绍
- JavaScript跟java没半毛钱关系
- JavaScript有三部分组成:ECMAScript,document object model,broswer object model
- 两种引入方式,直接在body后<script></script>或者文件导入<script src=""></script>
JavaScript基础知识
变量
var iMyValue = 0, sMystring = "gaga"
- 关键字var,表示声明一个局部变量,没有则是全局。
- 区分大小写
- 命名规则大致一样,推荐匈牙利类型。前一个是类型后面是驼峰。
关键字
数据类型
整数:
在JavaScript中10进制的整数由数字的序列组成
精确表达的范围是
-9007199254740992 (-253) 到 9007199254740992 (253)
超出范围的整数,精确度将受影响
浮点数:
使用小数点记录数据
例如:3.4,5.6
使用指数记录数据
例如:4.3e23 = 4.3 x 1023
16进制和8进制数的表达
16进制数据前面加上0x,八进制前面加0
16进制数是由0-9,A-F等16个字符组成
8进制数由0-7等8个数字组成
16进制和8进制与2进制的换算
字符串
<script> var str="\u4f60\u597d\n欢迎来到\"JavaScript世界\"";
alert(str);
</script>
常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线
布尔型
仅有两个值:true或者false。也等于用1和0表示。
null和undefined
- undefined类型只有一个值,就是undefined。当变量未定义或者函数无返回值的时候。
- null跟undefined一样,只是在该对象找不到时。
- 判断null==undefined时,为true。
数据类型转换
计算过程中一些数据类型会被自动转换,不会报错。
比如:
数字 + 字符串:数字转换为字符串
数字 + 布尔值:true转换为1,false转换为0
字符串 + 布尔值:布尔值转换为字符串true或false
有一些强行转换的关键字:parseInt,parseFloat,eval。
在强行转换成int的过程中出现了一个NaN。表示转化失败。是一种特殊类型。
NaN在比较时,只有NaN!=NaN为true。
typeof来查询数据类型。
ECMAScript运算符
- 有些时候加号+可以用在字符串的拼接。
- 减号—有时候表示负数。
- --i和i--,的区别像是c语言中。先加在赋值和先赋值再加。
- 逻辑运算符:等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < )
大于等于(>=) 、小于等于(<=)
与 (&&) 、或(||) 、非(!)
ECMAScript关系运算符
1
2
|
var bResult = "Blue" < "alpha" ; alert(bResult); //输出 true |
在上面的例子中,字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。
比较数字和字符串
另一种棘手的状况发生在比较两个字符串形式的数字时,比如:
1
2
|
var bResult = "25" < "3" ; alert(bResult); //输出 "true" |
上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串,所以比较的是它们的字符代码("2" 的字符代码是 50,"3" 的字符代码是 51)。
不过,如果把某个运算数该为数字,那么结果就有趣了:
1
2
|
var bResult = "25" < 3; alert(bResult); //输出 "false" |
这里,字符串 "25" 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料。
总结:
1
2
|
比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型. 比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较. |
Boolean运算符
var temp=new Object();// false;[];0; null; undefined;object(new Object();) if(temp){
console.log("yuan")
}else {
console.log("alex")
}
都是假!
void()
没有返回值的函数返回的都是undefined,同样被void的函数也是undefined。
控制语句
if语句
if (true) { alert("为真的时候执行")}else{ alert("为假的时候执行")}
同样中间也有else if。
switch语句
switch基本格式
switch (表达式) {
case 值1:语句1;break;
case 值2:语句2;break;
case 值3:语句3;break;
default:语句4; }
switch效率更高。
for循环
for循环一般也用于遍历操作。
但是注意循环出来的i是序列号。
for (初始化;条件;增量){
语句1;
...
}
while循环
var i=1; while (i<=7) {
document.write("<H"+i+">hello</H "+i+"> ");
document.write("<br>"); i++; }
异常处理
try {
//这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
//e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}
ECMA对象
创建一个对象
var sMyStrObj = “gaga”;
var sMyStrObj = new String("gaga");
字符串方法
var str2=str1.toLowerCase();转换成为小写
var str3=str1.toUpperCase(); 转换成为大写
var str2=str1.indexOf("l");从左到右 显示索引
var str3=str1.lastIndexOf("l");从右到左 显示索引
var str2=str1.match("world");返回一个数组都是“world”
var str3=str1.search("world");返回索引
var str2=str1.charAt(28);返回字符串
var str3=str1.charCodeAt(28);返回字符串的Unicode编码
var str2=str1.substr(2,4);从2截取4个
var str3=str1.substring(2,4);从2截取到4 包括尾部
var str2=str1.replace("cd","aaa");替换
var strArray=str1.split(",");分割 返回数组
var str2=str1.concat("efgh");拼接 或者+号
数组Array
类似于元组(),支持索引[],切片slice().
new Array(element0, element1, ..., elementn)
几个常用方法
push(value);入栈操作。
pop();出栈操作。
unshift();首端入栈。
shift();首端出栈。
reserve();反向排序。
sort();排序。
date对象
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
获取日期和时间
getDate() 获取日
getDay () 获取星期
getMonth () 获取月(0-11)
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
RegExp对象
定义一个re对象和规则。
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");
reg1.test("df14"); 返回值是true或者false。
"hello world".match(/e/g); 查找符合e规则的,g是关键字。
math对象
math是内置对象。调用:
Math.random(10);生成10以内的随机数。
Math.round();四舍五入。
其他:abs,exp,min,max等。
function对象
function 函数名 (参数){
函数体;
return 返回值;
}
//another way:
var 函数名 = new Function("参数1","参数n","function_body");
匿名函数:
(function ($) {
var num=13;
$.fn.extend({
print:function () {
console.log($(this).html())} });
}
)(jQuery);直接运行的匿名函数,其中中间的是自己的拓展函数。fn是宝石标签的拓展。没有fn是$的拓展。
作用域
js的作用域跟py的一致,在大括号{}中的是代码块有着自己的作用域。
需要注意的是js解释器在加载js文件的时候就形成了作用域链。
BOM对象
bom浏览器对象模型,使得js有能力跟浏览器对话。
Window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.
一些方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
history对象
location对象
DOM对象
dom节点
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点(NODE):
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系,用于对象的导航。
节点(自身)属性:
- attributes - 节点(元素)的属性节点
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点(元素)的文本值
导航属性:
- parentNode - 节点(元素)的父节点 (推荐)
- firstChild – 节点下第一个子元素
- lastChild – 节点下最后一个子元素
- childNodes - 节点(元素)的子节点
DOM事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。 onselect 文本被选中。
onsubmit 确认按钮被点击。
两种添加事件的方式:
<div onclick="alert(123)">点我呀</div>
<p id="abc">试一试!</p> <script>
var ele=document.getElementById("abc"); ele.onclick=function(){
alert("hi");
}; </script>
onload:
当某个标签加载完之后马上运行。这样将js代码放在了标签上面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script>
// window.onload=function(){
// var ele=document.getElementById("ppp");
// ele.onclick=function(){
// alert(123)
// };
// }; function fun1() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
} </script>
</head>
<body onload="fun1()"> <p id="ppp">hello p</p> </body>
</html>
修改HTML
- 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ,innerText。
- 改变 CSS 样式
1
2
|
<p id= "p2" >Hello world!</p> document.getElementById( "p2" ).style.color= "blue" ;<br> .style.fontSize=48px |
- 改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 创建新的 HTML 元素
createElement(name)
- 删除已有的 HTML 元素
elementNode.removeChild(node)
- 关于class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
javaScript的简单学习的更多相关文章
- django之JavaScript的简单学习2
前言:ajax预备知识:json进阶 1.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javascript对象: 请大家记住一 ...
- JavaScript 的简单学习2
AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...
- JavaScript闭包简单学习
因为实验室项目要用,所以最近在学习OpenLayers,但是从来没有做过前端呀,坑爹的,硬着头皮上吧 反正正好借这个机会学习一下JS,本来对这门语言也挺感兴趣的,多多少少写过一下JS代码了,差不多学一 ...
- [javascript] Promise简单学习使用
原文地址:http://www.cnblogs.com/dojo-lzz/p/4340897.html 解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Pr ...
- 深入浅出的javascript的正则表达式学习教程
深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...
- javaScript(2)---简单使用
javaScript(2)---简单使用 学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题 一.创建一张HTML页面 <!DOCTYPE ...
- 治愈 JavaScript 疲态的学习计划【转载】
来源:伯乐在线 - Rose Wang 像其他人一样,最近我读了 Jose Aguinaga 的文章 <How it feels to learn JavaScript in 2016>. ...
- javascript与浏览器学习(一)
待学习………… 20160421 标题:JavaScript中浏览器兼容问题 博客地址:http://www.cnblogs.com/DF-fzh/p/5408241.html 简单 ...
- javascript的ES6学习总结(第三部分)
1.ES6中的面向对象的类 1.1.定义类 在ES5中,我们写一个类,通常是这么写的 function Person(name,age){ this.name = name; this.age = a ...
随机推荐
- win10预览版9926升级10049操作步骤
文章转自:豆豆系统收藏备用 win10预览版系统安装的用户非常多,现在最新版本已经到了10049,但是之前很多装了9926版本或者10041版本的同学在通过系统自动更新的时候,且发现,微软官方提供的速 ...
- Android Studio增加NDK代码编译支持--Mac环境
Android的APP开发基本都是使用Java或者跨平台框架进行开发的,对于很多APP来说已经足够了,但是,对于提供功能给外部使用或者性能要求很高的需求下,如图像处理等,可能会需要C/C++库的支持, ...
- SignalR 2.1 简单入门项目
概述 SignalR是通讯框架,前台Web页面与后台服务实现数据的交互.ASP.NET SignalR 是一个为 ASP.NET 开发人员的库,简化了将实时 web 功能添加到应用程序的过程.实时We ...
- 2.Java异常学习
1.Java异常的概念 异常的例子 1.除法就是一个需要捕获异常的例子,除数又可能是0 异常处理的基本流程如下 一旦发生异常,就使得程序不按照原来的流程继续的运行下去 a.程序抛出异常 try{ th ...
- 微软的R语言发行版本MRO及开发工具RTVS
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:微软在收购R语言的开发商后,也独立发行或在自己的产品中集成了R语言,这里就介绍下它们包 ...
- 当年只会C# 所以写C++就成这样了!
这应该是4-5年前了. 当年之会c#敲敲代码也不会C++但深信开发这东西只要思想有了. 只是语法问题. 对于C++这貌似只有大牛才能胜任的,而对于我来说是如此困难. 所以想想办法搞了很多通用类来避免C ...
- NewBluePill源码学习
NewBluePill的源码也看的差不多了,一直说等有时间了再写学习的一些心得,拖来拖去弄到现在了,时间不是等来的,慢慢开始吧. 0x00 初识硬件虚拟化 硬件虚拟化对大数人来讲还是比较陌生. ...
- WIN32/API/SDK/MFC四者之间的联系和区别
上面大家都说Win32是一个子系统,这个当然是对的,不过我们有时候我们所说Win32通俗的就是指32位的Windows系统,从 windows95/98到NT/2000/XP都是32位Windows. ...
- Create a REST API with Attribute Routing in ASP.NET Web API 2
原文:http://www.asp.net/web-api/overview/web-api-routing-and-actions/create-a-rest-api-with-attribute- ...
- BZOJ 2431 & DP
题意:求逆序对数量为k的长度为n的排列的个数 SOL: 显然我们可以对最后一位数字进行讨论,判断其已经产生多少逆序对数量,然后对于前n-1位同样考虑---->每一个长度的排列我们都可以看做是相同 ...