首页 > 代码库 > JavaScript入门笔记1

JavaScript入门笔记1

  JavaScript是一种直译式脚本语言,为HTML网页增加动态功能。

  <script type="text/javascript">(text表示两个标签之间的文本类型,javascript表示的是浏览器的文本是属于JavaScript语言)

    document.write("...");

    .....

  </script>

     1、在写javaScript代码的时候我们拥有两种方式:

    第一种是写在HTML的文件中,通常这时候我们会用 上面的方式,来标注HTML文件中的JavaScript代码。我们可以把上面的代码放在HTML文件中任意一个位置,但通常我们会选择放在head和body标签中。需要注意的是浏览器解释HTML文件的时候是按先后顺序的,所以前面的SCRIPT就先被执行。举个例子:进行页面初始化的JS必须放在HEAD里面,因为初始化都要求提前进行。

    第二种是,把JS代码与HTML文件分开,单独创建一个JavaScript文件,文件名为XXX.js;然后我们可以通过<script src="http://www.mamicode.com/XXX.js"></script>把JS文件嵌入HTML文件中。这种方式更加的灵活,易于程序后续的维护修改工作。

  2、JAVAscript的注释方法:

    单行注释://;多行注释/*注释内容*/

  3、javaScript的变量(用于存储某些数值的存储器):

    定义变量的关键字 var 变量名

    变量名需要遵守以下命名规则:

      1、必须使用字母、下划线、或者美元符号作为开始

      2、可以使用任意多个英文字母、数字、下划线、美元符号组成

      3、不能使用JavaScript关键词与保留字、

    在JS中区分大小写,变量需要先声明后使用这样才比较规范

  4、消息对话框:

    alert(str)警告对话框,只有确定选项

    技术分享

 

    confirm(str)选择对话框,按确认返回TRUE,按取消返回FALSE;

    技术分享

 

    prompt(str1,str2)提问对话框;技术分享

 

      str1:要显示在消息对话框中的文本,不可修改;

      STR2: 文本框中的内容,可以修改;

      点击确认,返回文本框中的值。点击取消返回NULL值

        例子:var sc=prompt("请输入你的名字","小红");

        这样 sc的默认值就是小红。

  5、打开新窗口window.open([URL],[窗口名称],[参数字符串])

    关闭窗口: window.close();(关闭本窗口) <窗口对象>.close();

    URL:在窗口中要显示的网页的网址或路径

    窗口名称:被打开的窗口的名称。

      1、该名称由字母、数字、下划线字符组成

      2、_top _blank _self 具有特殊意义的名称

      3、相同NAME的窗口只能创建一个

      4、Name不能包含有空格

    参数字符串:设置窗口参数,用逗号隔开

      top:  上距离

      left:  左距离

      width:  宽度

      height:  高度

      menubar:  窗口有没有菜单(yes/no)

      toolbar:  窗口有没有工具条(yes/no)

      scrollbars:  窗口有没有滚动条(yes/no)

      status:  窗口有没有状态栏(yes/no)

  6、文档对象模型DOM Document Object Model

      定义访问和处理HTML文档的标准方法,将HTML文档呈现为带有元素,属性和文本的数结构;

技术分享

 

    HTML文档是由节点构成的一个集合,常见的DOM节点有:

      1、元素节点:<html>,<body>,<p>等都是元素节点(标签)

      2、文本节点:向用户展示的内容。

      3、属性节点:元素属性,比如<a>标签中的href属性

  7、Document.getElementById():通过ID获取元素。结果:null或者[object HTMLParagraphElement]

      获取的元素是一个对象,要对元素进行操作,需要通过他的属性或者方法

    属性:

    1、innerHTML:用于获取或替换HTML元素的内容;object.innerHTML

      区分大小写,Object是获取的元素对象 比如 mychar.innerHTML="hello world"

    2、改变HTML样式:Object.style.property=new style;(起到CSS表的作用)

        backgroundColor 设置背景颜色

        height/width 设置元素高/宽度

        color 设置文本颜色

        font 设置字体属性

        fontFamily 设置字体系列

        fontSize 设置元素的字体大小

        .......

        例如:con.style.color="red";

           con.style.backgroundColor="#CCC";

           con.style.width="300";

    3、display属性 :显示和隐藏  Object.style.display=value;

      none:此元素不会被显示;  block:此元素显示为块级元素

    4、控制类名className:object.className=className;

      获取元素的CLASS属性;为网页的某个元素指定一个CSS样式(用样式名来表示)来更改元素的外观.

      

JavaScript入门笔记1