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

(一)JavaScript入门操作

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

<head>
    <script type="text/javascript">
        //写在head标签内
        document.write("hello");
    </script>
</head>
<body>
    <p id="p1">mrSun(会变蓝色)</p>
    <script type="text/javascript">
        //写在body标签内
        document.write("world");
        //改变id为"p1"的颜色,注意执行顺序
        document.getElementById("p1").style.color = "blue";
    </script>
    <p id="p1">mrSun(默认黑色,不会被改变)</p>
</body>

2.引用JS文件

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

3.JS代码区分大小写

4.单击调用JS方法

<head>
    <script type="text/javascript">
        function popupContext()
        {
            //弹出来自网页的信息窗口
            alert("JS方法被调用了!");
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="调用JS方法" onClick="popupContext()" />
    </form>
</body>

5.消息对话框(confirm)

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

6.消息对话框(prompt)

<html>
<head>
<title>prompt</title>
<script type="text/javascript">
    function rec(){
        var score; //score变量，用来存储用户输入的成绩值。
        score = prompt("请输入你的成绩.");
        if(score>=90)
        {
            document.write("你很棒!");
        }
        else if(score>=75)
        {
            document.write("不错吆!");
        }
        else if(score>=60)
        {
            document.write("要加油!");
        }
        else
        {
            document.write("要努力了!");
        }
    }
</script>
</head>
<body>
    <input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />
</body>

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

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

<head>
</head>
<body>
<h2 id="con">javascript</H2>
<script type="text/javascript">
    var mychar=document.getElementById("con");
    document.write("原标题:"+mychar.innerHTML+"<br>"); //结果:javascript
    mychar.innerHTML = "Hello world";
    document.write("修改后的标题:"+mychar.innerHTML); //结果:Hello world
</script>
</body>

2.改变文字风格

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

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

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

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

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

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. android基础（二）Broadcast Receiver知识

    1.广播的注册 (1)动态广播注册: 优点:可以灵活控制广播的注册与撤销 缺点:必须在程序启动时才能接收广播 IntentFilter :当Intent在组建之间传递时,组件想告诉android系统自 ...

  2. solr导入数据库数据-tinyint数据转boolean

    solr在导入mysql数据库数据时,遇到一个问题:数据类型为tinyint的数据对应不到solr中的数据类型,因此就需要将tinyint转一下. 修改schema.xml文件,如下: 1.添加boo ...

  3. iOS-服务器文件断点下载

    文件下载基本步骤:1.获取下载链接,创建响应发送请求.(使用异步请求,避免因文件过大下载时间长而阻塞主线程).2.当接到响应时在下载目录中创建文件.创建文件使用NSFileHandle进行文件内部处理 ...

  4. Word或者Excel中怎么把 "空格" 替换成 "换行 "

    word中ctrl+h打开替换,将" "替换为^pexcel替换成alt+小键盘区的10

  5. background: url 背景图片加时间戳不显示图片

    在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...

  6. Hive 实战(1)--hive数据导入/导出基础

    前沿: Hive也采用类SQL的语法, 但其作为数据仓库, 与面向OLTP的传统关系型数据库(Mysql/Oracle)有着天然的差别. 它用于离线的数据计算分析, 而不追求高并发/低延时的应用场景. ...

  7. Python 爬虫学习 网页图片下载

    使用正则表达式匹配 # coding:utf-8 import re import urllib def get_content(url): """ Evilxr, &q ...

  8. 什么是FTP服务器

    FTP服务器,则是在互联网上提供存储空间的计算机,它们依照FTP协议提供服务. FTP的全称是File Transfer Protocol(文件传输协议).顾名思义,就是专门用来传输文件的协议.简单地 ...

  9. 论文笔记之： Person Re-Identification by Multi-Channel Parts-Based CNN with Improved Triplet Loss Function

    Person Re-Identification by Multi-Channel Parts-Based CNN with Improved Triplet Loss Function CVPR 2 ...

  10. ASP.NET MVC : Action过滤器(Filtering)

    http://www.cnblogs.com/QLeelulu/archive/2008/03/21/1117092.html ASP.NET MVC : Action过滤器(Filtering) 相 ...