按照W3C上一点点练习的
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { margin: 10px; background-color: lightslategrey; padding: 10px; } </style> </head> <body> <!-- 跳转到某个位置 --> <a href="#isHere"></a> <!-- 写入 HTML 输出 --> <div> <script> document.write("<h2>JavaScript 能够直接写入 HTML 输出流中：</h2>"); document.write("<p>只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p>"); </script> </div> <!-- 对事件作出反应 --> <div> <button type="button" onclick="alert('欢迎!')">对事件作出反应 点我</button> </div> <!-- 改变 HTML 内容 --> <div> <p id="test">JavaScript 能改变 HTML 元素的内容。</p> <script> function changeTitle() { x = document.getElementById('test'); x.innerHTML = "变了吧，哈哈"; } </script> <button type="button" onclick="changeTitle()">点击改变上面的文字</button> </div> <!-- 改变 HTML 图片 --> <div> <script> function changeImage() { element = document.getElementById('myimage'); if (element.src.match("bulbon")) { element.src = "images/eg_bulboff.gif"; } else { element.src = "images/eg_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="images/eg_bulboff.gif"> <p>点击灯泡</p> </div> <!-- JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片 --> <div> <script> function changeColor() { x = document.getElementById('test'); x.style.color = "#ff0000"; } </script> <button type="button" onclick="changeColor()">JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。</button> </div> <!-- 验证输入 --> <div> <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p> <input id="myInput" type="text"> <script> function checkInfo() { var x = document.getElementById("myInput").value; if (x == "" || isNaN(x)) { alert("不是数字"); } } </script> <button type="button" onclick="checkInfo()">check</button> </div> <!-- JavaScript 输出 --> <div> <a id="isHere"></a> <h2>JavaScript 输出</h2> <p>1、把它的内容（innerHTML）My First Paragraph 替换为 "My First JavaScript"。</p> <p id="myTest">My First Paragraph.</p> <script> document.getElementById('myTest').innerHTML = "My First JavaScript"; </script> </br> <p>2、直接把 "p" 元素写到 HTML 文档输出中：</p> <script> document.write("<p>我是使用jS直接写入的</p>"); </script> </div> <a href="#isHere"></a> <!-- 警告 请使用 document.write() 仅仅向文档输出写内容。 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖： --> <div> <button onclick="myFunction()">点击这里</button> <script> function myFunction() { document.write("糟糕！文档消失了。"); } </script> </div>
</body> </html>
JS变量
- var 变量名 = 变量值；//自己会判断什么类型
- 一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
- var name = “xiaosan”, age = 22, address = “owrhohfw”;
- var a = 10;
- var b; // 当一个变量没有被赋值的时候，是undefined
console.log(typeof b); //打印a的类型
- 重新声明JS变量，改变量的值不会丢失
- var name = “Siri”;
- var name; // 依然是Siri
数据类型
- 不能写数据类型，只能用var，也可以省去var 直接写
- number：所有数字，比如小数整数
- object：对象类型
- string：字符串类型，用双引号“aaa”或者单引号‘ aaa’, 建议单引号
- function：函数类型 var msg = '我是 '
- boolean : true / false
- var age = 20;
var name = 'xiaosan';
height = 1.88;
var msg = '我是' + name + '，' + age + '岁，身高是' + height;
运算符从左到右
- 其他数据类型和字符串相加，会变成一个新的字符串
- var str1 = 10+10+'10'; //2010
var str2 = '10'+10+10; //101010
var str3 = '10'+(10+10); //1020
数组
// 写法一 var cars = new Array(); cars[0] = "Audi"; cars[1] = "BMW"; // 写法二 var names = new Array("jack", "rose", "dd");
Undefined和Null
- Undefined这个值标示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
- cars = null;
对象
- 在JS中，对象是数据（变量），拥有属性和方法。
- JS中所有事物都是对象：字符串、数字、数组、日期等。
- 对象拥有属性和方法的数据。
- 属性是与对象相关的值。
- 方法是能够在对象上执行的动作。
// 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔 var myDog = { age : 20, //也可以这样写 'age' : 20 "age" : 20 name : 'rose' }; // 对象属性有两种寻址方式 console.log(myDog.name); console.log(myDog['name']); // 这种方括号里面只能传字符串，不加引号系统会认为是一个变量
对象调用方法
function temp(){ console.log('跑起来'); } var dog = { age : 5, run : temp, // 一般都是把函数封装到对象的里面 run2 : function () { console.log(this.age + '岁的狗跑起来'); //this == self } }; dog.run(); // JS里的对象是这样调用方法的 跑起来 dog.run2(); // 5岁的狗跑起来 dog.age = 100; //age变为100 dog.run = function () { console.log(this.age + '岁的狗叫了'); }; dog.run(); // 100岁的狗叫了 var dog2 = { age : 1 }; dog2.run = dog.run; dog2.run(); //1岁的狗叫了