JavaScript基础2

2018-11-27  本文已影响0人  Harper324
1、条件分支语句
（1）else-if语句
if (condition1){
  // 当 condition1==true 时执行的语句块1
} else if (condition2){
  // 当 condition2==true 时执行的语句块2
} else {
  // 当 condition1==false && condition2==false 时执行的语句块3
}
（2）switch语句
switch(n){ 
    case n1: 
      执行代码块 1
      break; 
    case n2: 
      执行代码块 2 
      break; 
    default: 
      与 case n1 和 case n2 不同时执行的代码块3 
}
2、循环语句
（1）for语句
for (循环变量初始化;循环终止条件;增量){
  循环体;
}
（2）While 循环
while(循环终止条件){
  循环体
}
（3）do-while循环(后测试循环)
do{
循环体
}while(循环终止条件)
3、函数

函数是一个执行特定功能的可重用的代码块。

（1）函数定义

在JavaScript中，我们使用function关键字来定义函数，后面跟一组参数以及函数体。

function functionName(arg0, arg1, arg2 ... argn){
    statements;
}//无返回值
function add(num1, num2){
    return num1 + num2;
}//有返回值
（2）函数调用

如下面例子，可用变量来接收函数的返回值


function add(num1, num2){
    return num1 + num2;
}
var result = add(3, 5);
alert(result); // 8
4、DOM

DOM是 W3C（万维网联盟）的标准。定义了访问 HTML 和 XML 文档的标准：W3C 文档对象模型Document Object Model（DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

（1） DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

（2）DOM方法

方法是我们可以在节点（HTML 元素）上执行的动作。

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>


<script>
x=document.getElementById("intro");
document.write(x.innerHTML);//输出Hello World！
</script>

</body>
</html>
（3）DOM属性

属性是节点（HTML 元素）的值，能够获取或设置。

<!DOCTYPE html>
<html>
<body>

<p id="intro" class="intr">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.nodeValue);//Hello World!
document.write(x.nodeName);//null
document.write(x.nodeType);//P
document.write(x.id);//intro
document.write(x.className);//intr
document.write(x.tagName);//P
</script>

</body>
</html>
5、HTLM DOM事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

<!DOCTYPE html>
<html>
<body>

<div 
onmouseover="mOver(this)" 
onmouseout="mOut(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}

function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>

</body>
</html>

<div 
onmousedown="mDown(this)" 
onmouseup="mUp(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开鼠标"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
</script>

</body>
</html>
6、JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 2个程序（或服务器、语言等）需要交互通信的时候，他们倾向于使用string字符串因为string在很多语言里解析的方式都差不多。为了描述这些复杂的数据结构作为一个string字符串，制定了标准的规则和语法。JSON只是其中一种语法，它可以在string上下文里描述对象，数组，字符串，数字，布尔型和null，然后通过程序间传输，并且反序列化成所需要的格式。易于人阅读和编写。同时也易于机器解析和生成。

let code = '"\u2028\u2029"';
JSON.parse(code);  // 正常
eval(code);  // 错误

var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

//布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
JSON.stringify({x: 5, y: 6});              
// "{"x":5,"y":6}"  

//undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]); 
// '[1,"false",false]'  
JSON.stringify({x: undefined, y: Object, z: Symbol("")}); 
// '{}'

JSON.stringify([undefined, Object, Symbol("")]);          
// '[null,null,null]'   

JSON.stringify({[Symbol("foo")]: "foo"});                 
// '{}'
7、Ajax

Ajax 是 Asynchronous JavaScript And XML 的首字母缩写。Ajax并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。Ajax 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。通过与 web 服务器交换数据，而不是每当用户作出改变时重载整个 web 页面，Ajax 技术可以使网页更迅速地响应。

// 1. 创建连接 
var xhr = null; 
xhr = new XMLHttpRequest() 
// 2. 连接服务器 
xhr.open('get', url, true) 
// 3. 发送请求 
xhr.send(null); 
// 4. 接受请求 
xhr.onreadystatechange = function(){ 
  if(xhr.readyState == 4){ 
    if(xhr.status == 200){ 
      success(xhr.responseText); //执行success回调函数
    } else { 
    // fail fail && fail(xhr.status); 
    } 
  } 
}

xhr = new XMLHttpRequest()
8 、LocalStorage

localStorage特性，这个特性主要是用来作为本地存储来使用的。在localStorage下一般浏览器支持的是5M大小，这个在不同的浏览器中会有所不同。localStorage只支持String类型的存储。

上一篇 下一篇

猜你喜欢

热点阅读