【JavaScript】学习笔记

第1章 准备

  • 1-1 为什么学习JavaScript

1）所有主流浏览器都支持JavaScript。
2）全世界大部分网页都使用JavaScript。
3）它可以让网页呈现各种动态效果。
4）做为一个Web开发师，如果你想提供漂亮的网页，令用户满意的上网体验，JavaScript是必不可少的工具。

模板

<!DOCTYPE HTML>
<html> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>（标题）</title>
    </head>
    <body>
    （html代码）
        <script type="text/javascript">
        （js代码）
        </script>
    </body>
</html>

test.html

<body>
  <p id="p1">我是第一段文字</p>
  <p id="p2">我是第二段文字</p>
  
  <script type="text/javascript">
  document.write("hello");  
  document.getElementById("p1").style.color="blue";
  </script>
</body>
  • 1-2 如何插入JS

test.html

<html> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>（标题）</title>
    </head>
        <script type="text/javascript">
        document.write("开启JS之旅!");
        </script>
</html>
  • 1-3 引用JS外部文件

我们可以把HTML文件和JS代码分开，并单独创建一个JS文件，其文件后缀通常为.js，然后将JS代码直接写在JS文件中。

test.html

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test</title>
        <script src="script.js"></script>
    </head>

script.js

document.write("引用JS文件!");
  • 1-4 JS在页面中的位置

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

1）<head>部分
浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
2）<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。

test.html

<html> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test</title>
        <script type="text/javascript">
        document.write("123");
        </script>
    </head>
    <body>
        <script type="text/javascript"> 
        document.write("456");
        </script>
    </body>
</html>
  • 1-5 符号

通常在结尾加上一个分号" ; "来表示语句的结束。
虽然分号“ ; ”也可以不写，但我们要养成编程的好习惯，记得在语句末尾写上分号。

  • 1-6 注释

单行注释，在注释内容前加符号 “ // ”
多行注释以" /* "开始，以" */ "结束

  • 1-7 变量

定义变量使用关键字var，变量名可以任意取名，但要遵循命名规则：
1.变量必须使用字母、下划线或者美元符开始。
2.可以使用任意多个英文字母、数字、下划线或者美元符组成。
3.不能使用JavaScript关键词与JavaScript保留字。
变量虽然也可以不声明直接使用，但不规范，尽量先声明后使用。

<script type="text/javascript">
var x = 8;
</script>
  • 1-8 判断语句 if...else
  <script type="text/javascript">
      var score =80; 
      if(score>=60){
      document.write("很棒，成绩及格了。");
      }else{
      document.write("加油，成绩不及格。");
      }
  </script>
  • 1-9 函数

函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入代码的麻烦。

function 函数名()
{
     函数代码;
}

test.html

   <script type="text/javascript">
      function contxt(){
         alert("哈哈，调用函数了!");
      }
   </script>
<body>
   <form>
      <input type="button" value="点击我" onclick="contxt()" />  
   </form>
</body>

第2章 常用互动方法

  • 2-1 输出内容

第一种：输出内容用" "括起，直接输出" "号内的内容。
document.write("I love JavaScript！");
第二种：通过变量，输出内容
var c = " hello world! ";
document.write( c );
第三种：输出多项内容，内容之间用+号连接。
var c = "hello";
document.write( c+"I love JavaScript" );
第四种：输出HTML标签，标签使用" "括起来。
document.write("< br>"); // 输出一个换行符

  • 2-2 alert 消息对话框

我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。

test.html

  <script type="text/javascript">
  function f(){
    alert("I love JavaScript")
  }
  </script>
<body>
    <input name="x" type="button" onClick="f()" value="点击我，弹出对话框" />
</body>
  • 2-3 confirm 消息对话框

语法：confirm(str);
str：在消息对话框中要显示的文本，返回值: Boolean值
通过返回值可以判断用户点击了什么按钮，"确定"时返回true，"取消"时返回false

test.html

  <script type="text/javascript">
  function rec(){
    var mymessage = confirm("你是女士吗?");
    if(mymessage==true){
        document.write("你是女士!");
    }else{
        document.write("你是男士!");
    }
  }    
  </script>
<body>
    <input type="button" onClick="rec()" value="点击我，弹出确认对话框" />
</body>
  • 2-4 prompt 消息对话框

语法：prompt(str1, str2);
str1：在消息对话框中要显示的文本，不可修改
str2：文本框中的内容，可以修改
返回值：
1.点击确定按钮，文本框中的内容将作为函数返回值
2.点击取消按钮，将返回null

test.html

  <script type="text/javascript">
  function f(){
    var score;
    score = prompt("你的分数是多少？");
    if(score>=90){
       document.write("你很棒!");
    }else if(score>=75){
       document.write("不错吆!");
    }else if(score>=60){
       document.write("要加油!");
    }else{
       document.write("要努力!");
    }
  }
  </script>
<body>
    <input name="abc" type="button" onClick="f()" value="点击我，对成绩做评价"/>
</body>
  • 2-5 打开新窗口

语法：window.open([URL], [窗口名称], [参数字符串])
1）URL：在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
2）窗口名称：被打开窗口的名称。
该名称由字母、数字和下划线字符组成。
" _top "、" _blank "、" _self "是具有特殊意义的名称。
_top：框架网页中在上部窗口中显示目标网页
_self：在当前窗口显示目标网页
_blank：在新窗口显示目标网页
相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
3）参数字符串：设置窗口参数，各参数用逗号隔开。

test.html

// 网页https://www.hao123.com将在新窗体中打开，宽为600，高为400，距屏顶100像素，屏左0像素。
<script type="text/javascript">
  function f(){
      window.open('https://www.hao123.com/','_blank','height=600,width=400,top=100,left=0');
  } 
</script>
<body>
    <input name="giao" type="button" onClick="f()" value="点击我，打开新窗口" />
</body>

2-6 关闭窗口

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

  <script type="text/javascript">
     var mywin=window.open("https://www.hao123.com");
     mywin.close();
  </script>
  • 2-7 编程练习

test.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浏览器对象</title>
</head>
<body>
  <input type="button" value="新窗口打开网站" onclick="openWindon()" /> 
  <script type="text/javascript">  
    function openWindon(){ 
        if(confirm("确定打开新窗口吗？")){
            var url = prompt("请输入一个网址","https://www.hao123.com");  
            window.open( url,"_blank","toolbar=no, menubar=no, scrollbars=yes,  width=400, height=400");
        }
    }  
  </script> 
</body>
</html>
  • 3-1 认识DOM

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

将HTML代码分解为DOM节点层次图：

HTML文档可以说是由节点构成的集合，三种常见的DOM节点：
1.元素节点:上图中<html>、<body>、<p>等都是元素节点，即标签
2.文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本
3.属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"

例：< a href="http://www.imooc.com" > JavaScript DOM </a>

  • 3-2 通过ID获取元素

1）网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。
2）语法：document.getElementById("id")
结果：null或[object HTMLParagraphElement]

test.html

<p id="x">JavaScript</p>
<script type="text/javascript">
  var s= document.getElementById("x");
  // 输出获取的P标签。 
  document.write("结果：" + s); 
</script>
  • 3-3 innerHTML 属性

语法：Object.innerHTML
注意：Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。

test.html

<h2 id="du1in9">我是标题</H2>

<script type="text/javascript">
  var s = document.getElementById("du1in9");
  // 输出原h2标签内容
  document.write("原标题：" + s.innerHTML + "<br>"); 
  s.innerHTML = "Hello World";
  // 输出修改后h2标签内容
  document.write("修改后的标题：" + s.innerHTML); 
</script>
  • 3-4 改变 HTML 样式

语法：Object.style.property = new style;
注意：Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

test.html

  <h2 id="ZBC">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var s = document.getElementById("ZBC");
    // 颜色设为红色(red)
    s.style.color = "red";
    // 背景颜色设为灰色(#CCC)
    s.style.backgroundColor = "#ccc";
    // 将宽设为300像素(px)
    s.style.width = "300px";
  </script>
  • 3-5 显示和隐藏

语法：Object.style.display = value
注意：Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

test.html

    <script type="text/javascript"> 
        function f1(){  
        var s = document.getElementById("w");
        s.style.display="none";
        }  
        function f2(){  
        var s = document.getElementById("w");
        s.style.display="block";
        }
    </script> 
    <h1>JavaScript</h1>  
    <p id="w">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="f1()" value="隐藏内容" /> 
       <input type="button" onclick="f2()" value="显示内容" /> 
    </form>
  • 3-6 控制类名

语法：object.className = classname
作用：1.获取元素的class 属性
2.为网页内的某个元素指定一个css样式来更改该元素的外观

test.html

<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>
    <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>

第4章 编程挑战

1）编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数。
2）点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作。

challenge.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="txttent-Type" txttent="text/html; charset=gb2312" />
<title>style样式</title>
<style type="text/css">
*{ 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="dcolor()">
  <input type="button" value="改变宽高" onClick="dwh()">
  <input type="button" value="隐藏内容" onClick="dh()">
  <input type="button" value="显示内容" onClick="ds()">
  <input type="button" value="恢复原样" onClick="dclear()">
  </form>
  
  <script type="text/javascript">
  function dcolor(){
     var s = document.getElementById("txt");  
     s.style.color="red";
     s.style.backgroundColor="#ccc";
    }
  function dwh(){
     var s = document.getElementById("txt");  
     s.style.width="400px";
     s.style.height="200px";
    }
  function dh(){
     var s = document.getElementById("txt");  
     s.style.display="none";
    }
  function dclear(){
     if(confirm("确定要取消设置吗?")){
     var s = document.getElementById("txt");  
     s.style.color="#000";
     s.style.backgroundColor="#fff";
     s.style.width="600px";
     s.style.height="400px";
     s.style.display="block";
     }
    }
  function ds(){
     var s = document.getElementById("txt");  
     s.style.display="block";
    }
  </script>
</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,527评论 5赞 470
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,314评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,535评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,006评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,961评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,220评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,664评论 3赞 392
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,351评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,481评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,123评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,713评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2赞 341