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