码迷,mamicode.com
首页 > 编程语言 > 详细

学习JavaScript

时间:2017-02-08 15:03:41      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:javascript   浏览器   标签   网页   元素   

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

    <script>标签要成对出现,并把JavaScript代码写在<script></script>之间

    可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中

    在JS文件中,不需要<script>标签,直接编写JavaScript代码就可以了。

JS文件不能直接运行,需嵌入到HTML文件中执行,我们需在HTML中添加如下代码,就可将JS文件嵌入HTML文件中。

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

    

我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。

放在<head>部分

最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。

放在<body>部分

JavaScript代码在网页读取到该语句的时候就会执行。

    定义变量要用var。

    &nbsp表示空格

    alert()用于实现弹出警告小窗口(只有确定键) 语法:

alert(字符串或变量);

    confirm 消息对话框通常用于允许用户做选择的动作(有确定和取消按键)语法:

    confirm(字符串或变量);   //返回值为true或false

   

    prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。


语法:


prompt(str1, str2);

参数说明:


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

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

返回值:


1. 点击确定按钮,文本框中的内容将作为函数返回值

2. 点击取消按钮,将返回null


open()方法可以查找一个已经存在或者新建的浏览器窗口。

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

参数说明:

URL:可选参数,在窗口中药显示网页的网址或路径。如果省略这个参数,或者他的值是空字符串,那么窗口就不显示任何文档。

窗口名称:可选参数,被打开窗口的名称。

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

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

_top:框架网页中在上部窗口中显示目标网页

_blank:在新窗口显示目标网页

_self在当前窗口显示目标网页

3.相同name的窗口只能创建一个,要想创建多个窗口则name不能相同

4.name不能包含有空格

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


例如:打开http://www.imooc.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:

<script type="text/javascript"> window.open(‘http://www.imooc.com‘,‘_blank‘,‘width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes‘)

</script>

关闭窗口:

窗口对象.close();


简单例子:

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>  

  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   

  <script type="text/javascript">  

  function openWindow(){

    //   var result = confirm("是否要打开新网页?");

    //   if(result == true){

    //       window.open("http://www.imooc.com");

    //   }

    // 新窗口打开时弹出确认框,是否打开

    // var result = prompt("是否确定要打开下列网址","http://www.imooc.com");

    // window.open(result);

    // 通过输入对话框,确定打开的网址,默认为 http://www.imooc.com/

    var result = prompt("是否确定要打开下列网址","http://www.imooc.com");

    window.open(result,"慕课网","width=400,height=500");

    //打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。

    

    

  }

  </script> 

 </head> 

 <body> 

 <input type="button" value="新窗口打开网站"  /> 

 </body>

</html>


    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的数结构(节点树)。

    

    学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。

语法:

 document.getElementById(“id”) 

    

    innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML

    

    HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?

语法:

Object.style.property=new style;

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

    

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

语法:

Object.style.display = value;

value取值:none:隐藏;    block:此元素将显示为块级元素(即显示)

本文出自 “11828641” 博客,请务必保留此出处http://11838641.blog.51cto.com/11828641/1895998

学习JavaScript

标签:javascript   浏览器   标签   网页   元素   

原文地址:http://11838641.blog.51cto.com/11828641/1895998

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!