js学习

作者: 刘佳阔 | 来源:发表于2018-04-14 15:27 被阅读0次

JS 学习网址
2018-08-20
JS基础和WebAPIs的关联性
原生js
【译】从 JS 学习 Lua
暑假过半总结及后半段计划
Java EE之旅03-JS基础（上）
Js高级程序设计你不知道的那些事儿
Node.js学习express框架
浅谈JS原型和原型链

js语法写在<script>中,脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中

<script>
document.write("<h1>This is a heading</h1>"); //这行代码会在h5页面写入内容,
</script>

或者写一个函数,通过方法名调用
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

JavaScript 使用 document.getElementById(id) 方法访问某个 HTML 元素

<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script> //修改 p标签里边的文字内容

写入内容

<h1>我的第一张网页</h1>
<script>
document.write("<p>我的第一段 JavaScript</p>");
</script> //文字会追加在<h1>标签下

js区别大小写

函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的

JS变量

var pi=3.14; //数值不能使用引号
var name="Bill Gates"; // 单引号或双引号表示字符串.

JavaScript 拥有动态类型

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义
var person={firstname:"Bill", lastname:"Gates", id:5566};
//引用方式
name=person.lastname;
name=person["lastname"];

创建 JavaScript 对象

JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。
<script>
person=new Object(); //创建对象并定义了四个属性并赋值。
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
<html><head><script>
function myFunction(var1,var2)
  {    alert("Hello World!"+var1 + var2);   } //函数使用function修饰,function 
//必须小写,第一个变量就是第一个被传递的参数的给定的值，以此类推。
</script></head>
<body>
<button onclick="myFunction("hello","js">点击这里</button>
</body></html>

函数返回值

//在使用 return 语句时，函数会停止执行，并返回指定的值
//整个 JavaScript 并不会停止执行，仅仅是函数
function myFunction()
{var x=5;
return x;}

变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除
把值赋给尚未声明的变量，该变量将被自动作为全局变量声明

错误语法

1. try/catch写法
try
  {
  //在这里运行代码}
catch(err)
  {
  //在这里处理错误}
2. 抛出异常写法
throw exception   创建或抛出异常（exception）
3. 结合起来,把 throw 与 try 和 catch 一起使用，能够控制程序流，生成自定义的错误消息
<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + "."; //err 就是throw 后的值
  }
} 
</script>

HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

1.png

1. 如何找到页面中元素
通过 id 找到 HTML 元素 
var x=document.getElementById("intro");
通过标签名找到 HTML 元素
//本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过类名找到 HTML 元素
2. 改变HTML元素属性
document.getElementById(id).attribute=new value
例子:
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
3. 改变元素样式
document.getElementById(id).style.property=new style
例子
<body><p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script></body>
4. 对事件作出反应
onclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> 
等同于
<head><script>
function changetext(id) {
    id.innerHTML="谢谢!";  }
</script></head>
<body><h1 onclick="changetext(this)">请点击该文本</h1></body>

使用 JavaScript 来向 HTML 元素分配事件：
<script> //给id为myBtn的元素分配点击事件,调用 displayDate 函数
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

onload 和 onunload 事件会在用户进入或离开页面时被触发。
<body onload="checkCookies()">  <script>//onload 事件可用于检测浏览器类型和版本,在页面加载时触发
function checkCookies()
{
if (navigator.cookieEnabled==true){
    alert("已启用 cookie")}
else{
    alert("未启用 cookie") }
}</script>
<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>

onchange 事件常结合对输入字段的验证来使用,当用户改变输入字段的内容时触发.
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数</p>
</body>

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，
会触发 onmousedown 事件，当释放鼠标按钮时，
会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

向 HTML DOM 添加新元素，首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");//创建新元素
var node=document.createTextNode("这是新段落。");//创建新节点
para.appendChild(node);向 <p> 元素追加这个文本节点
var element=document.getElementById("div1");
element.appendChild(para);向这个已有的元素追加新元素
</script>
</body>

删除 HTML 元素，您必须首先获得该元素的父元素,再用父元素删除子元素
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1"); //找到父子节点
var child=document.getElementById("p1");
parent.removeChild(child); //父节点删除子节点
//也可以这样写parentNode 就是找到该节点的父节点
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
</script>
</body>

JavaScript 对象

1.JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
此外，JavaScript 允许自定义对象
 objectName.propertyName 访问对象的属性  
objectName.methodName() 访问对象的方法
var message="Hello world!"; 
var x=message.toUpperCase(); 对象方法
var y=message.length;  对象属性
直接创建对象并定义属性
person=new Object();
person.firstname="Bill";
person.lastname="Gates";或者
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
使用对象构造器
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
}
bill=new person("Bill","Gates",56,"blue");

通过为对象赋值，向已有对象添加新属性：
假设  personObj 已存在 - 您可以为其添加这些新属性：firstname
person.firstname="Bill";
person.lastname="Gates";

方法添加到 JavaScript 对象
unction person(firstname,lastname,age,eyecolor)
{
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
  {
    this.lastname=name;
  }
}
person1.changeName("Ballmer"); //这样调用方法.

 for...in 语句循环遍历对象的属性。
<script>
function myFunction()
{
var x;  var txt="";
var person={fname:"Bill",lname:"Gates",age:56}; 
for (x in person){  //循环遍历person的属性,赋值给x,
  txt=txt +" "+ person[x]+" "+x;  } //循环中的代码块将针对每个属性执行一次。
document.getElementById("demo").innerHTML=txt;
}
</script>

JavaScript 中的所有数字都存储为根为 10 的 64 位（8 字节），浮点数。
创建日期
var myDate=new Date() 
myDate.setFullYear(2008,7,9)//设定时间为(2008 年 8 月 9 日) 月份从0-11

创建数组
var mycars=new Array("Saab","Volvo","BMW")
或者
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"

循环输出数组中元素
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}

布尔值
<script type="text/javascript">
var b1=new Boolean( 0) //false
var b2=new Boolean(1) //true
var b3=new Boolean("") //false
var b4=new Boolean(null) //false
var b5=new Boolean(NaN)//false
var b6=new Boolean("false") //true
</script>

RegExp 对象是正则表达式的缩写,用于规定在文本中检索的内容
var patt1=new RegExp("e"); //用于检索字符e
test() 方法检索字符串中的指定值。返回值是 true 或 false。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));  //输出true
exec() 方法检索字符串中的指定值。返回值是被找到的值
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));//输出e
compile() 方法用于改变 RegExp。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));//输出 true
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));//输出 false

Window - 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、全局函数以及全局变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法

window 方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

window.screen 对象包含有关用户屏幕的信息
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.href 属性返回当前页面的 URL
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

window.history 对象包含浏览器的历史
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

js弹出框
警告框 alert("文本")
确认框 confirm("文本") 
提示框 prompt("文本","默认值") 如果用户点击确认，那么返回值为输入的值。
  如果用户点击取消，那么返回值为 null。

js 计时事件
setTimeout()       未来的某时执行代码
clearTimeout()    取消setTimeout()
<script type="text/javascript">
function timedMsg(){
 var t=setTimeout("alert('5 seconds!')",5000)} //5s后悔弹框
</script>

JS 学习网址
JS学习 JS标准参考教程 JS秘密花园
2018-08-20
今天学习了JS 运算符 JS 比较 JS If...Else JS Switch JS For JS While ...
JS基础和WebAPIs的关联性
学习ECMAscript标准规定的基本语法掌握JS基础语法只学习JS基础做不了网页交互效果学习JS基础语法是为了后...
原生js
原生JS学习笔记1——基本数据类型和运算符 js的背景知识介绍，js的引入方式，js的变量及运算符原生JS学习笔...
【译】从 JS 学习 Lua
原文：Learning Lua/From JS 从 JS 学习 Lua 对 JavaScript 已经了解，想学习...
暑假过半总结及后半段计划
总结学习 7.6号开始小组学习，温习闭组前学到的js知识，明确未学习的js知识，7.21号完成js阶段作品，7....
Java EE之旅03-JS基础（上）
JS学习大纲 JS简介 1、js是什么 2、js能做什么 3、js历史及组成 4、js被引入的方式 js基本语法 ...
Js高级程序设计你不知道的那些事儿
写在开头：为了学习方便，js程序分成两个阶段学习，JS初级和js高级阶段，js高级有很多需要理解的概念，重在理解...
Node.js学习express框架
Node.js框架学习 express.js express.js是什么 Express基于Node.js平台，快...
浅谈JS原型和原型链
学习使用过js的人一开始都会觉得js简单，这是因为js语法简单，学习过编程语言的人，很容易掌握js的基本语法并按要...