初探JavaScript----忍者秘籍一

本文为JavaScript初级入门篇，最近根据慕课网初级教程所作的笔记，适合零基础的小白。

认识JavaScript

一、基础中的基础

插入script，< script type=“text/javascript”>表示在script之间的是文本类型。

1、引入js外部文件

script可以在html中加js代码，同时js和html可以分开。在.js文件中，不需要script标签，直接写代码即可

只需引入就行，< script src=“文件名” >< /script >

2、js位置

可放在head中，亦可在body内。

放在head中，会先执行，后解析页面内容。

放在body中，只有等待程序执行到这一步才运行。

3、语句和符号

分号结束 document.write("");

4、变量

var 变量名

• 变量可由字母、数字、下划线、$组成。
• 开头不能是数字。
• 不能用关键字和保留字。
• 要先声明后赋值。var a=3； var b；b=2；
• JS区分大小写
• 变量虽然可不声明，直接用，但不规范。

5、判断语句

if–else

6、函数

function 函数名(){							//如  function add2(){
函数代码;											var sum=3+2; alert(sum);			
}													}
调用直接	 函数名();								add2();

function 是关键字

二、互动

1、输出

• 括号直接输出 document.write(“hello”);
• 通过变量输出 documen.write(a);
• 多项输出加号连接 doucument.write(a+“11111”);
• 输出html标签，标签要起作用，标签用"“括起来 document.write(a+”< br/ >");

2、弹出对话框

• alert警告对话框

alert(字符串或变量);

按顺序弹出对话框

• confirm消息对话框

  • 允许用户做选择，一个确定，一个取消。
  • confirm(str); 返回值为Boolean 。通过布尔值判断用户点击了什么按钮。

• prompt消息对话框

  • 用于询问用户交互的信息，包含一个确认一个取消按钮，一个文本输入框。
  • prompt(str1,str2);
    • str1 要在对话框显示的文本不可修改。 一个文本框，最上面的文字，相当于标题。
    • str2 文本框中的内容，可修改。 提示信息。
  • 点确认，文本框的内容作为返回值，点取消，返回null。

3、打开窗口

open()方法可查一个已存在或新建的窗口。

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

窗口名称由字母、数字、下划线组成。

• __blank 新窗口显示目标网页。
• __self 当前窗口显示目标网页。
• __top 框架网页中在上部窗口中显示目标网页。

相同name的只能创建一个窗口，若要创建多个窗口其name值不能相同。name不能包含有空格。

参数字符串–设置窗口参数，各参数用逗号隔开。

window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
//打开网站，大小为300*200，无菜单，无工具栏，无状态栏，有滚动条窗口。

4、关闭窗口

window.close(); //关闭本窗口

【窗口对象】.close(); //关闭指定窗口

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

三、DOM

定义访问和处理HTML文档的标准方法，DOM将HTML文档呈现出带有元素、属性和文本的树结构(节点树)。

1、DOM层次

• 元素节点 html、body、p等，即标签。
• 文本节点 向用户展示的内容，如li中的JavaScript、DOM、CSS等文本。
• 属性节点 元素属性 如a中的链接属性href

2、通过ID获取元素

标签的id属性值是唯一的。

document.getElementById("id")

获取的元素是一个对象，如果对元素进行操作，我们要通过他的属性或方法。

3、innerHTML属性

用于替换或获取HTML元素内容。

object.innerHTML

• object是获取的元素对象，如通过documen.getElementById(“ID”)获取的元素。
• innerHTML区分大小写。

var mycon=document.getElementById("con");
mycon.innerHTML="yes";

4、改变HTML样式

object.style.property=new style;

object是获取的元素对象，比如通过getElementById(“ID”)获取。

mychar.style.color="red";
mychar.style.font-size="20";
mychar.style.backgroundcolor="blue";

5、显示和隐藏

display属性设置。

object.style.display="value";

value可取none/block

• none元素被隐藏。
• block元素显示为块级元素。

6、控制类名

className属性设置或返回元素的class属性。

object.className=classname;

• 作用：获取元素的class属性。
• 为网页内的某个元素指定一个css样式来更改该元素的外观。

mychar.className="two";

object.removeAttribute("style");  //改变修改的style属性