《JavaScript入门篇》摘要

0.课程链接

http://www.imooc.com/learn/36

1.在HTML中加入JS的方法

 <script type="text/javascript">
     document.write("hello");
     document.getElementById("p1").style.color="blue"
 </script>

<script type="text/javascript">
表示在<script></script>之间的是文本类型(text)
javascript是为了告诉浏览器里面的文本是属于JavaScript语言

2.也可以引入外部文件

 <script src="script.js"></script>

JS代码单独写在*.js文件中，如

 //请写入JS代码
 document.write("hello")
 alert("JS")

3.<script>标签的位置

理论上可以放在head或body，建议放在head，原因是HTML是顺序执行，有些初始化（如给页面body设置css）必须在一开始就完成

4.什么是变量？

 var mynum = 8;

5.什么是函数？

函数的声明和定义

 function contxt() //定义函数
 {
     alert("哈哈，调用函数了!");
 }

函数的调用

 <form>
     <input type="button"  value="点击我" onclick="contxt()" />
 </form>

6.输出内容

 document.write("Hello world!")

 mystr = "Hello world"
 document.write(mystr)

7.警告（Alert）

 alert("alert")

8.确认（Confirm）

 var mymessage= confirm("你是女士么？");
 if(mymessage==true){
     document.write("你是女士!");
 }
 else{
     document.write("你是男士!");
 }

9.提问（Prompt）

 var myname=prompt("请输入你的姓名:");
 if(myname!=null)
   {   alert("你好"+myname); }
 else
   {  alert("你好 my friend.");  }

prompt(str1, str2)

str1是显示消息对话框中的文本，不可修改

str2是显示在文本框中，可修改

10.打开新窗口（window.open）

 window.open('http://www.imooc.com','_blank','width=600,height=400,top=100,left=0');

window.open([URL], [窗口名称], [参数字符串])

窗口名称：可以自定义，也可以用几个具有特殊意义的：_top, _blank, _self

参数字符串：width、height、top、left、menubar、toolbar、scrollbar、status

11.关闭窗口（window.close）

 var mywin=window.open("http://www.imooc.com");
 mywin.close();

可以window.close() 或者 <窗口对象>.close()

12.认识DOM

DOM将HTML变为带有元素、文本、属性的节点树

13.通过ID获取元素

document.getElementById(“id”)
结果:null或[object HTMLParagraphElement]
注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法

14.改变HTML元素的内容 --- innerHTML

 var mychar=document.getElementById('con');
 mychar.innerHTML = 'Hello world!';

用来获取和替换HTML元素的内容

15.改变HTML元素的样式

 var mychar= document.getElementById("con");
 mychar.style.color = 'red';
 mychar.style.backgroundColor = '#CCC'
 mychar.style.width = '300px'

Object.style.property=new style;

16.显示和隐藏

 mychar.style.display = "none";
 mychar.style.display = "block";

是15的一个特例

17.控制类名（className属性）

 object.className = classname;