• 欢迎访问荏苒,IT教程免费下载,资源免费共享,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站

JavaScript学习笔记

学习笔记 倒转流年 488次浏览 3个评论

JavaScript学习笔记

如何插入JS

1. <script type=”text/javascript”>  </script>

2. 引入外部JS文件:<script src=”script.js”>  </script>

JS在页面中的位置

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

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

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

注意:进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(例如给页面body设置css等)。

认识JavaScript语句和符号

alert(“hello!”);   //这就是一个JavaScript语句,一行的结束就被认定为语句的结束,通常在结尾加上一个分号(;)来表示语句的结束。

JavaScript注释很重要

注释的作用是提高代码可读性,帮助自己和别人阅读和理解你所编写的JavaScript代码。注释的内容不会在网页中显示,注释可分为单行注释与多行注释两种。

1. 单行注释:在注释内容前加符号“//”。

例如:document.write(“单行注释使用‘//’”);   //这里是注释,在网页中不显示

2. 多行注释:以“/*”开始,以“*/”结束。

例如:/*

多行注释

养成书写注释的好习惯

*/

JavaScript变量

1. 什么是变量?

2. 定义变量:var 变量名

3. 命名规则:

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

– 然后可以使用任意多个字母、数字、下划线或者美元符组成。

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

4. 要先声明再赋值。

5. 变量可重复赋值。

6. JavaScript区分大小写。

JavaScript 判断语句 (if…else)

语法:

if(条件)

{条件成立时执行的代码}

else

{条件不成立时执行的代码}

JavaScript 函数

定义:函数是完成某个特定功能的一组语句。

例如:function 函数名()

{

函数代码;

}

说明:

1. function定义函数的关键字。

2. “函数名”是你为函数取的名字。

3. “函数代码”是你为完成特定功能写的代码。

函数调用:函数定义好之后是不能自动执行的,所以需要调用他,只需要直接在需要的位置写函数就ok。

例如:add2();//调用函数,直接写函数名,add2是函数名。

JavaScript 输出内容

document.write(str);

JavaScript 警告(alert消息对话框)

语法:alert(字符串或变量);

JavaScript 确认(confirm消息对话框)

语法:confirm(str);

说明:

1. str是在消息对话框中显示的文本。

2. 返回值类型:Boolean值。

3. 当点击确定按钮时,返回true。

4. 当点击取消按钮时,返回false。

JavaScript 提问(prompt消息对话框)

语法:prompt(str1,str2);

说明:

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

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

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

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

JavaScript 打开新窗口(window.open)

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

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

说明:

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

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

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

– 具有特殊意义的名称,“_top”框架网页中在上部窗口中显示目标网页、”_blank”在新窗口显示目标网页、”_self”在当前窗口显示目标网页。

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

– name不能包含有空格。

参数表:

参数            值                说明

top            Number        窗口顶部离开屏幕顶部的像素数

left            Number        窗口左端离开屏幕左端的像素数

width        Number        窗口的宽度

height       Number        窗口的高度

menubar   yes,no        窗口有没有菜单

toolbar      yes,no        窗口有没有工具条

scrollbars  yes,no        窗口有没有滚动条

status        yes,no        窗口有没有状态栏

JavaScript 关闭窗口

语法:window.close();或 <窗口对象>.close();

认识DOM

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

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

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>…</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href=“http://www.imooc.com“ 。

通过ID获取元素

语法:document.getElementById(“id”);

innerHTML 属性

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

语法:Object.innerHTML

注意:

1. Object 是获取的元素对象,如通过document.getElementByld(“ID”)获取的元素。

2. 注意书写,innerHTML区分大小写。

改变HTML样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

语法:Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById(“id”)获取的元素。

显示和隐藏(display)

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

语法:Object.style.display = value

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

控制类名(className 属性)

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

语法:object.className = classname

编程挑战

<!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" onclick="rec()"  value="改变颜色" >  
    <input type="button" onclick="abc()" value="改变宽高" >
    <input type="button" onclick="bva()" value="隐藏内容" >
    <input type="button" onclick="xsnr()" value="显示内容" >
    <input type="button" onclick="quxiao()" value="取消设置" >
  </form>
  <script type="text/javascript">
//定义"改变颜色"的函数
    function rec()
    {
        var jieguo;
        jieguo=confirm("是否要改变颜色?");
        if(jieguo==true)
         {
            var yanse;
            yanse=document.getElementById("txt");
            yanse.style.color="red";
         }
         else
         {
        
         }
    }
    
//定义"改变宽高"的函数
    function abc()
    {
        var jieguo;
        jieguo=confirm("是否要改变宽度?");
        if(jieguo==true)
        {
            var kuandu;
            kuandu=document.getElementById("txt");
            kuandu.style.width="30px";
            kuandu.style.height="1000px";
        }
        else
        {
            
        }
    }
//定义"隐藏内容"的函数
    function bva()
    {
         var ycys;
         ycys=confirm("是否要隐藏内容?");
         if(ycys==true)
         {
             var ycys;
             ycys=document.getElementById("txt");
             ycys.style.display="none";
             
         }
         else
         {
        
         }
    }
//定义"显示内容"的函数
    function xsnr()
    {
        var zhi;
        zhi=confirm("是否要显示内容?");
        if(zhi==true)
        {
            zhi=document.getElementById("txt");
            zhi.style.display="block";
        }
        else
        {
            
        }
    }
//定义"取消设置"的函数
    function quxiao()
    {
        var zhi;
        zhi=confirm("是否要取消所有设置?");
        if(zhi==true)
        {
            zhi=document.getElementById("txt");
            zhi.removeAttribute('style');
        }
        else
        {
            
        }
    }
  </script>
</body>
</html>

学习网址:http://www.imooc.com/code/473


荏苒博客 , 版权所有丨如未注明 , 均为原创丨转载请注明!
喜欢 (0)
[523231929@qq.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 你的博客让人流连忘返!
    增达网2017-04-27 10:55 Reply
  2. 卢松松博客大全进来的,网站内容还不错,大学时学习过一段时间前端,支持下博主大大,哈哈
    基因敲除小鼠2017-05-25 16:21 Reply
    • 感谢支持!
      倒转流年2017-06-13 13:20 Reply