本篇内容是学习慕课网相关课程后,总结出可能未来会忘记的内容

(一)JavaScript入门操作

1.js代码插入位置,以及执行顺序

  1. <head>
  2.     <script type="text/javascript">
  3.         //写在head标签内
  4.         document.write("hello");
  5.     </script>
  6. </head>
  7. <body>
  8.     <p id="p1">mrSun(会变蓝色)</p>
  9.     <script type="text/javascript">
  10.         //写在body标签内
  11.         document.write("world");
  12.         //改变id为"p1"的颜色,注意执行顺序
  13.         document.getElementById("p1").style.color = "blue";
  14.     </script>
  15.     <p id="p1">mrSun(默认黑色,不会被改变)</p>
  16. </body>

2.引用JS文件

  1. <head>
  2.     <script src="script.js"></script>
  3. </head>

3.JS代码区分大小写

4.单击调用JS方法

  1. <head>
  2.     <script type="text/javascript">
  3.         function popupContext()
  4.         {
  5.             //弹出来自网页的信息窗口
  6.             alert("JS方法被调用了!");
  7.         }
  8.     </script>
  9. </head>
  10. <body>
  11.     <form>
  12.         <input type="button" value="调用JS方法" onClick="popupContext()" />
  13.     </form>
  14. </body>

5.消息对话框(confirm)

  1. <head>
  2.   <script type="text/javascript">
  3.   function rec(){
  4.     var mymessage= confirm("你是女士吗?");
  5.     if(mymessage==true)
  6.     {
  7.         document.write("你是女士!");
  8.     }
  9.     else
  10.     {
  11.         document.write("你是男士!");
  12.     }
  13.   }
  14.   </script>
  15. </head>
  16. <body>
  17.     <input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />
  18. </body>

6.消息对话框(prompt)

  1. <html>
  2. <head>
  3. <title>prompt</title>
  4. <script type="text/javascript">
  5.     function rec(){
  6.         var score; //score变量，用来存储用户输入的成绩值。
  7.         score = prompt("请输入你的成绩.");
  8.         if(score>=90)
  9.         {
  10.             document.write("你很棒!");
  11.         }
  12.         else if(score>=75)
  13.         {
  14.             document.write("不错吆!");
  15.         }
  16.         else if(score>=60)
  17.         {
  18.             document.write("要加油!");
  19.         }
  20.         else
  21.         {
  22.             document.write("要努力了!");
  23.         }
  24.     }
  25. </script>
  26. </head>
  27. <body>
  28.     <input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />
  29. </body>

7.打开新窗口(window.open),关闭窗口(window.close)

  1. <head>
  2. <script type="text/javascript">
  3. function Wopen(){
  4.     //window.open([URL], [窗口名称], [参数字符串])
  5.     /*
  6.        "_top"、"_blank"、"_selft"具有特殊意义的名称。
  7.        _blank：在新窗口显示目标网页
  8.        _self：在当前窗口显示目标网页
  9.        _top：框架网页中在上部窗口中显示目标网页
  10.     */
  11.     var tempWindow = window.open("http://www.sina.com.cn","_blank","width=600,height=400,top=100,left=0");
  12.     tempWindow.close();//关闭刚打开的窗口语法
  13. }
  14. </script>
  15. </head>
  16. <body>
  17.     <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
  18. </body>

参数字符串:

(二)DOM操作

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

html文档可以说是由节点构成的集合,下面介绍3中常见的DOM节点:

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

1.通过ID获取元素对象

方法 document.getElementById(“id”) 返回 object HTMLParagraphElement 类型

  1. <head>
  2. </head>
  3. <body>
  4. <h2 id="con">javascript</H2>
  5. <script type="text/javascript">
  6.     var mychar=document.getElementById("con");
  7.     document.write("原标题:"+mychar.innerHTML+"<br>"); //结果:javascript
  8.     mychar.innerHTML = "Hello world";
  9.     document.write("修改后的标题:"+mychar.innerHTML); //结果:Hello world
  10. </script>
  11. </body>

2.改变文字风格

  1. <h2 id="con">I love JavaScript</h2>
  2. <script type="text/javascript">
  3.     var mychar= document.getElementById("con");
  4.     mychar.style.color="red";
  5.     mychar.style.backgroundColor = "#CCC";
  6.     mychar.style.width="300px";
  7. </script>

3.显示和隐藏元素(display属性)

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>display</title>
  6.     <script type="text/javascript">
  7.         function hidetext()
  8.         {
  9.         var mychar = document.getElementById("con");
  10.         mychar.style.display="none";
  11.         }
  12.         function showtext()
  13.         {
  14.         var mychar = document.getElementById("con");
  15.         mychar.style.display="block";
  16.         }
  17.     </script>
  18. </head>
  19. <body>
  20.     <h1>JavaScript</h1>
  21.     <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
  22.     <form>
  23.        <input type="button" onclick="hidetext()" value="隐藏内容" />
  24.        <input type="button" onclick="showtext()" value="显示内容" />
  25.     </form>
  26. </body>
  27. </html>

4.通过改变类名,变换外观(className)

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>className属性</title>
  6. <style>
  7.     body{ font-size:16px;}
  8.     .one{
  9.         border:1px solid #eee;
  10.         width:230px;
  11.         height:50px;
  12.         background:#ccc;
  13.         color:red;
  14.     }
  15.     .two{
  16.         border:1px solid #ccc;
  17.         width:230px;
  18.         height:50px;
  19.         background:#9CF;
  20.         color:blue;
  21.     }
  22.     </style>
  23. </head>
  24. <body>
  25.     <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  26.     <input type="button" value="添加样式" onclick="add()"/>
  27.     <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  28.     <input type="button" value="更改外观" onclick="modify()"/>
  29.  
  30.     <script type="text/javascript">
  31.        function add(){
  32.           var p1 = document.getElementById("p1");
  33.           p1.className = "one";
  34.        }
  35.        function modify(){
  36.           var p2 = document.getElementById("p2");
  37.           p2.className = "two";
  38.        }
  39.     </script>
  40. </body>
  41. </html>

JavaScript入门的更多相关文章

  1. JavaScript入门篇 编程练习

    编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...

  2. 慕课网JavaScript入门篇课程笔记

    1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...

  3. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  4. JavaScript入门介绍(二)

    JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...

  5. JavaScript入门介绍(一)

    JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器 开发调试工具]按F121.代码后台输出调试:console.log("t ...

  6. 开心菜鸟系列－－－－函数作用域（javascript入门篇）

      1 <!DOCTYPE html>   2 <html>   3 <script src="./jquery-1.7.2.js"></ ...

  7. 开心菜鸟系列－－－－变量的解读（javascript入门篇）

                       console.info(         console.info(window['weiwu'])          console.info(window. ...

  8. javascript入门视频第一天 小案例制作 零基础开始学习javascript

    JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...

  9. ArcGIS API for JavaScript 入门教程[0] 目录

    随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...

随机推荐

  1. Python学习路程day10

    Twsited异步网络框架 Twisted是一个事件驱动的网络框架,其中包含了诸多功能,例如:网络协议.线程.数据库管理.网络操作.电子邮件等. 事件驱动 简而言之,事件驱动分为二个部分:第一,注册事 ...

  2. InputStream流保存成图片文件

    public void saveBit(InputStream inStream) throws IOException{ ByteArrayOutputStream outStream = new ...

  3. TP验证

  4. 【Python】实现5!+4!+3!+2!+1!

    #!/usr/bin/env python #-*- coding:utf-8 -*- def factorial_add(n): empty_list=[] #定义一个空列表 for i in ma ...

  5. WCF终结点配置

    错误信息:已有针对 IP 终结点 127.0.0.1:8235 的侦听器.如果有其他应用程序已在侦听此终结点,或者,如果在服务主机中具有多个服务终结点,这些终结点具有相同的 IP 终结点但绑定配置不兼 ...

  6. hdu4691 Front compression ——暴力 || 后缀数组

    link:http://acm.hdu.edu.cn/showproblem.php?pid=4691 暴力,数据明显太水了吧,n=10^5, O(n^2)的复杂度哎喂.想让大家暴力写直接让n=100 ...

  7. ubuntu QWT Qt

    1,下载QWT 2,解压进入QWT的目录 3,qmake,生成makefile文件 4,编译,make 5,安装,make install ,需要root 安装好后会在 /usr/local 目录下有 ...

  8. 《C与指针》第五章练习

    本章问题 1.这个表达式的类型和值为多少? (/) answer:The cast is applied to the result of the division,and because both ...

  9. (转) Deep learning architecture diagrams

    FastML Machine learning made easy RSS Home Contents Popular Links Backgrounds About Deep learning ar ...

  10. SQL Server中常用的SQL语句（转）：

    SQL Server中常用的SQL语句 转自:http://www.cnblogs.com/rainman/archive/2013/05/04/3060428.html 1.概述 名词 笛卡尔积.主 ...