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";

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 ![img](

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>

20170602149639130764580.png

#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>

Javascript_tutorial