js学习笔记

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

JavaScript：直接写入 HTML 输出流
写在body里面
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

JavaScript：对事件的反应
通过对按钮的点击
alert()是一个自带的函数
<button type="button" οnclick="alert('欢迎!')">点我!</button>

JavaScript：改变 HTML 内容
x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容
查找元素的方法是在DOM（文档对象模型）定义的，是用于访问HTML的正式问w3c标准

您将在本教程的多个章节中学到有关 HTML DOM 的知识。
element.src.match("str") str只要在src中有这个字段就可以
<script>

function changeImage()
{
   
element=document.getElementById('myimage')
   
if (element.src.match("bulbon"))
    
{
          element.src="/statics/images/course/pic_bulboff.gif";
      }

    else
  
{
          element.src="/statics/images/course/pic_bulbon.gif";
   }

}

</script>

<img id="myimage" οnclick="changeImage()"
src="/statics/images/course/pic_bulboff.gif" width="100" height="180">

<p>点击灯泡就可以打开或关闭这盏灯</p>
element.src="str" str:改变元素的路径，不是简单改变文字

改变样式函数：element.style.color="str"; str是新的颜色号
x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";           //改变样式

JavaScript：验证输入
定义变量需要用var
IsNaN（）检验是否是数字
if isNaN(x) {alert("不是数字")};
js 里面写函数的时候要先写上function
function myFunction(){ }

如需要在html中添加js代码，必须要加上script标签
浏览器会解释并且执行script里面的代码
脚本既可以写在body里面也可以写在head里面

外部的 JavaScript
我们也可以把脚本保存到外部文件里面

外部文件的文件扩展名是.js
如果需要使用外部文件，需要在script标签的src中
<script src="/statics/demosource/myscript.js"></script>

弹窗的话
window.alert(5+6);

js函数
函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块
调用带参数的函数
function myfunction(var1,var2){
  代码
}

有时我们希望函数 将值返回给调用它的地方
function myfunction（）
{
    var x=5;
    return x;
}

局部变量、全局变量、
变量的生存周期（局部变量会在函数运行之后被删除、全局变量会在页面关闭之后被删除）
向未声明的js变量分配值（将声明一个全局变量carname，即使它在函数内执行）

作用域

js事件
事件是可以被js侦测到的行为
注意点：在事件触发的时候js可以执行一些代码
HTML元素中可以添加事件属性 单引号和双引号都可以
<button οnclick='getElementById（“demo”）.innerHTML=Date()'>the time is?</button>
修改id=“demo”元素的内容
也可以修改自身元素的内容“this.innerHTML=Date()”

js字符串
js字符用于存储和处理文本
字符串可以是插入到引号中的任何字符，可以使用单引号，或者双引号

可以使用索引位置来访问字符串中的每个字符
var character[7];//索引位置从0开始，可以在字符串中使用引号
也可以使用转义字符

字符串长度
var txt = "ADB"；
var sin = txt.length;
字符串可以是对象
var x = "Jon";//x 是String类型
var y = new String(Jon);//y是Object类型

js运算符
算术运算符、赋值运算符 = 、字符串连接运算符加号 +
字符串和数字相加，返回字符串（实际上是把数字看成是字符串连接起来）

js比较和逻辑运算符
---------------------
js for循环
for(var i=0;i<cars.length;i++)
{
    document.write(cars[i]+"<br>");
}

js类型转换

typedef操作符
例如：
typedef "Jon";//返回string

constructor 属性返回所有js变量的构造函数

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

其中indexof（string） 返回string字符串在父串中首次出现的位置（从0开始）
便于判断和截取字符串没有就返回-1；

String（x）//将变量x转换为字符串并返回
将日期转换为字符串（Date（）)
Date方法使用tostring() 也有同样的效果

将字符串转换为数字
Number（“3.14”）；//返回3.14
Number（“ ”） //返回0
Number（“”）//返回0
Number（“98 88”）//返回NaN
//NaN不是因为为空，而是因为不能执行

一元运算符+
var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字
变量不能转换，他仍然会是一个数字，但NaN（不是一个数字）

全局方法 Number() 可将布尔值转换为数字。

JavaScript 正则表达式
search()方法用于检索和模式匹配的子字符串的起始位置
replace()方法用于在字符串中用一些字符替换另一些字符，或者替换一个和正则表达式相匹配的子字符串
var str = "Visit w3cschool";
var n = str.search(/w3cschool/i);
输出结果6

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "w3cschool");
输出结果为Visit w3cschool!

js错误处理|Throw、try和catch
js抛出错误（throw）当错误发生时，js引擎通常会停止，并且生成一个错误的消息
js try和catch
 try
   {
   //在这里运行代码//代码可能有错误
   }
 catch(err)
   {
   //在这里处理错误
   }
throw 语句允许我们自己创建自定义错误
三者结合起来用可以控制程序流，并且生成自定义的错误

<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>

js调试
浏览器内置调试工具
内置的调试工具可以开启或者关闭，严重的错误会发给用户
有了调试工具就可以设置断点（代码停止执行的位置）
且可以在代码执行的时候检测变量
浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
json语法规则

数据为 键/值 对
数据用逗号分隔
大括号保存对象
方括号保存数组
json数据
"firstName":"John" // 键/值 对
JSON 对象
{"firstName":"John", "lastName":"Doe"}//json对象保存在大括号里面
json数组
json数组保存在中括号内
就像js中，数组可以包含对象
"employees":[       
    {"firstName":"John", "lastName":"Doe"},       
    {"firstName":"Anna", "lastName":"Smith"},    
    {"firstName":"Peter", "lastName":"Jones"}       
]
以上实例中employees是一个数组。包含了三个对象
每个对象是员工的记录（姓和名）

通常我们从服务器中读取JSon数据，并在网页中显示数据

首先
先创建js字符串
var txt = '{"employees":[{"firstName":"John", "lastName":"Doe"},       
    {"firstName":"Anna", "lastName":"Smith"},    
    {"firstName":"Peter", "lastName":"Jones"}    ]}'
然后使用js内置函数JSON.parse()将字符串转换为js对象
var obj = JSON.parse(txt);
最后在你的页面中使用新的js对象
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
运行结果：
Anna Smith

javascript:void(0) 含义
最关键的是 void关键字，该操作符计算一个表达式的值，但是不返回值