Javascript_tutorial
1.1 Javascript入门
Javascript是一门脚本语言 他的运行环境：
Firefox chrome IE
不需要安装解释器哦
<html>
<head></head>
<body>
<script>
alert("hello world!")
</script>
</body>
</html>
2.0 调用js
<html>
<head>
<h1> my javascript code in "out.js"
</head>
<body>
<script scr="out.js">
</script>
</body>
</html>
2.1 来来，我们一起玩耍一下Javascrapy的基本小语法
2.1.1 变量
var test ; // 声明了一个名为 test 的变量。
var test_2 = "van" ; // 声明一个名为 test_2 van
x = 100 ; // 变量 x 为整数
y = "hello" ; // 变量 y 为字符串
z = True ; // 变量 z 为布尔型
cars=["Audi","BMW","Volvo"]; // cars 是一个数组
2.2 data types
2.2.1 string
var stvarchar="hello word";
2.2.2 number
var x1 =34.00;
var x2=34;
2.2.3 boolean
var x=true
var y=false
2.2.4 Array():
var boys=new Array():
boys[0]="today";
boys[1]="jack";
or
var boys=new Array("tome","jack","Alex");
2.3.1 operation
- 加 x+y
- 减 x-y
- 乘 x*y / 除 x/y ++ 累加 x++ -- 累减 x-- % 取余数 x%y
2.3.1 Comparison operations < (小于)、> (大于)、<= (小于等于)、>= (大于等于)、== (等于)、!= (不等于)。
2.3.2 Logical operations
next homework
x=5+5;
document.wirte(x);
y="6"+"6";
document.wirte(y);
m=7+"7"; // 数字 + 字符串
document.write(m);
m=7+"7"; // 数字 + 字符串
document.write(m);
##JavaScript 基本语法（下）Loop
<html>
<head>
</head>
<body>
<script>
for(var i=0;i<8;i++)
{
document.write("number is "+i+"<br>");
}
</script>
</body>
</html>
###function example
<html>
<head>
</head>
<body>
<script>
for(var i=0;i<8;i++)
{
document.write("number is "+i+"<br>");
}
</script>
</body>
</html>
<script>
function my_func(){
document.write(1);
}
my_func()
document.write("<br>");
function my_func(){
document.write(2);
}
my_func()
</script>
##next event coding
<html>
<head>
<script>
function click_button() { // 事件处理程序，弹出提示窗
alert('welcome to shiyanlou');
}
</script>
</head>
<body align="center">
<br></br>
<button onclick="click_button()">click me</button> <!--发生事件 onclick 的时候，执行 click_button()-->
</body>
</html>
#event code list
除了刚才提到的 onclick 事件，还有这些常用的事件：
onclick 单击 ondblclick 双击 onfocus 元素获得焦点 onblur 元素失去焦点 onmouseover 鼠标移到某元素之上 onmouseout 鼠标从某元素移开 onmousedown 鼠标按钮被按下 onmouseup 鼠标按键被松开 onkeydown 某个键盘按键被按下 onkeyup 某个键盘按键被松开 onkeypress 某个键盘按键被按下并松开
##再来一波例子
<html>
<head></head>
<body>
<div style="background-color:green;width:200px;height:50px;margin:20px;padding-top:10px;color:#ffffff;font-weight:bold;font-size:18px;text-align:center;"
onmouseover="this.innerHTML='good'"
onmouseout="this.innerHTML='you have moved out'"
>move your mouse to here</div>
</body>
</html>
##再来一波class
student= new Object():
student.name = "Tom";
student.age = "19";
student.study = function():{
alert("studying");
};
student.eat =function():{
alert("eating");
}
var student1 = new student('Tom','19');
<script>
var x = student1.name; // 访问对象的属性
var y = student1.age;
document.write(x);
document.write(y);
student1.study(); // 调用对象的方法
</script>
把上面的对象代码过一次（class）
##关于DOM
DOM is changer structure document
DOM 不属于javascript
#DOM come baby
<html>
<body>
<div id="my_div"></div>
<script>
document.getElementById("my_div").style.height="100px"; // 设置 my_div 高度为 100px
document.getElementById("my_div").style.background="red"; // 设置 my_div 颜色为 红色
</script>
</body>
</html>
#DOM come baby to
<html>
<body>
<input type="text" />
<input type="text" />
<script>
document.getElementsByTagName("input")[0].value="hello"; // 下标为 [0] 表示选取第 1 个 input 标签
document.getElementsByTagName("input")[1].value="shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签
</script>
</body>
</html>
#DOM remote
<html>
<head>
</head>
<body>
<div>
<div id="div_red" style="background:#F00; height:100px"></div>
<div id="div_blue" style="background:#00F; height:100px"></div>
</div>
<script>
function remove_red(){
var obj = document.getElementById("div_red");
obj.parentNode.removeChild(obj);
}
</script>
<button onclick="remove_red()">remove red div</button>
</body>
</html>