JavaScript学习笔记

时间：2015-06-04 15:46:51 阅读：137 评论：0 收藏：0 [点我收藏+]

Hello, JavaScript !

<!DOCTYPE HTML>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, JavaScript!</title>
</head>
<body>
  <p id="p1">我是第一段文字</p>
  <p id="p2">我是第二段文字</p>

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

  </script>
</body>
</html>

运行效果：

我是第一段文字
我是第二段文字
hello,JavaScript!

HTML引用JS：

在HTML中添加由JavaScript标签包裹的JS代码：

<script type="text/javascript">
... ...
</script>

HTML引用独立的JS文件：

<!-- index.html -->
<script src="zms.js"></script>

// zms.js
document.write("Hello, JavaScript!");

这样JS代码就直接运行了。

注意：

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

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

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

也就是说， javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

每行语句的末尾一般加上分号，也可不加。不过用分号结束的话，可以在同一行写多条语句。

注释

单行：//
多行：/* */

变量

定义变量：

var 变量名

命名规则：

变量必须使用字母、下划线(_)或者美元符($)开始。

然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

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

注意：

在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。

变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

判断语句(if…else)

<script type="text/javascript">
    var score =80; //score变量存储成绩，初值为80
    if(score>=60){
     document.write("很棒，成绩及格了。");
    } else {
     document.write("加油，成绩不及格。");
    }
  </script>

函数

基本语法：

function handleTask(){
    var number = 5;
    alert("number is" + number);
}

函数定义好，需要在对应的地方调用才会执行：

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

警告

<script type="text/javascript">
alert("hello, javascript !");
</script>

会出现一个带有确认按钮的信息提示框。
注意：

在点击对话框”确定”按钮前，不能进行任何其它操作。

消息对话框通常可以用于调试程序。

alert输出内容，可以是字符串或变量，与document.write 相似。

确认（confirm 消息对话框）

<script type="text/javascript">
    var mymessage=confirm("你喜欢JavaScript吗?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能强大，要学习噢!");   }
</script>

注意:

提问（prompt 消息对话框）

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

语法:

prompt(str1,str2);

参数说明：

str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改

返回值:

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

点击取消按钮，将返回null

示例:

var name=prompt("请输入你的姓名:","默认值");
if(name!=null)
  {   alert("你好"+name); }
else
  {  alert("你好.");  }

打开新窗口（window.open）

语法：

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

参数说明：

URL：打开窗口的网址或路径。
窗口名称：被打开窗口的名称。可以是”_top”、”_blank”、”_selft”等。
参数字符串：设置窗口参数，各参数用逗号隔开。

参数字符串：

参数	取值	说明
top	Number	窗口上边距
left	Number	窗口左边距
width	Number	窗口宽度
height	Number	窗口高度
menubar	yes,no	是否有菜单
toolbar	yes,no	是否有工具条
scrollbars	yes,no	是否有滚动条
status	yes,no	是否有状态栏

示例：

<script type="text/javascript">
  function Wopen(){
      window.open(‘http://blog.csdn.net/zhoumushui‘,‘_blank‘,‘width=600,height=400,top=100,left=0‘);

  } 
</script>

关闭窗口（window.close）

window.close();   //关闭本窗口
<窗口对象>.close();   //关闭指定的窗口

示例：

<script type="text/javascript">
// 将新打的窗口对象，存储在变量mywin中
var mywin=window.open(‘http://blog.csdn.net/zhoumushui‘); 
mywin.close();
</script>

编程练习

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript">  

  function openWindow() {
    // 通过输入对话框，确定打开的网址，默认为 http：//www.zms.com/
    var myurl = prompt("输入要打开的网址", "http://www.zms.com")
    // 新窗口打开时弹出确认框，是否打开
    var wantopen = confirm("确认打开" + myurl + "?");
    if (wantopen) {
        //打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
        window.open(myurl, ‘_blank‘, ‘width=400,height=500,menubar=no,toolbar=no‘);
    }
}
 </script> 
 </head> 
 <body> 
      <input type="button" value="新窗口打开网站" onclick="openWindow()" /> 
 </body>
</html>

···················· 低调的分割线 ····················

DOM

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

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.zms.com"。

通过ID获取元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar=   document.getElementById("con");        ;
  document.write("结果:"+mychar); //输出获取的P标签。 
</script>
</body>
</html>

运行结果：

JavaScript
结果:[object HTMLParagraphElement]

innerHTML 属性

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

语法：

Object.innerHTML

示例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<script type="text/javascript">
  var mychar=   document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML= "Hello world!";
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

改变 HTML 样式

语法：

Object.style.property=new style;

基本属性表（property）:

属性	描述
backgroundColor	背景颜色
height	高度
width	宽度
color	文本颜色
font	字体
fontFamily	字体系列
fontSize	字体大小

示例代码：

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

显示和隐藏（display属性）

语法：

Object.style.display = value

value取值：

取值	说明
none	隐藏
block	显示（块级元素）

示例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display = "none";

        }  
        function showtext()  
        {  
        var mychar = document.getElementById("con");
         mychar.style.display = "block";
        }
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

控制类名（className 属性）

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

语法：

object.className = classname

作用:

1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观

示例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
        border:1px solid #eee;
        width:230px;
        height:50px;
        background:#ccc;
        color:red;
    }
    .two{
        border:1px solid #ccc;
        width:230px;
        height:50px;
        background:#9CF;
        color:blue;
    }
    </style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
        p1.className="one";  
       }
       function modify(){
          var p2 = document.getElementById("p2");
         p2.className="two"; 
       }
    </script>
</body>
</html>

编程练习

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
    border:#333 solid 1px;
    padding:5px;}
p{
    line-height:18px;
    text-indent:2em;}
</style>
</head>
<body>
  <h2 id="con">JavaScript课程</H2>
  <div id="txt"> 
     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
        <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
        <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  </div>
  <form>
  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" value="改变颜色" onclick="changeColor()">  
    <input type="button" value="改变宽高" onclick="changeSize()">
    <input type="button" value="隐藏内容" onclick="hideContent()">
    <input type="button" value="显示内容" onclick="showContent()">
    <input type="button" value="取消设置" onclick="resetStyle()">
  </form>
  <script type="text/javascript">
   var txtObject = document.getElementById("txt");
//定义"改变颜色"的函数
function changeColor(){
    txtObject.style.color="#00bb77";
}

//定义"改变宽高"的函数
function changeSize(){
    txtObject.style.width="255px";
    txtObject.style.height="255px";
}

//定义"隐藏内容"的函数
function hideContent(){
    txtObject.style.display="none";
}

//定义"显示内容"的函数
function showContent(){
    txtObject.style.display="block";
}

//定义"取消设置"的函数
function resetStyle(){
    var isconfirm = confirm("取消设置？");
    if(isconfirm){
    txt.removeAttribute(‘style‘);
    }
}
  </script>
</body>
</html>

JavaScript学习笔记

标签：javascript 学习笔记

原文地址：http://blog.csdn.net/zhoumushui/article/details/46361605

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行