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

(一)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. 小议安卓定位伪造-实战足不出户畅玩Pokemon Go

    本文旨在技术探讨故本文不提供工具,正常玩家请勿模仿,游戏中虚拟位置有封号风险 0x00 安卓定位方式归类 要伪造定位首先要摸清定位到底是如何实现的,首先从广义上来区分安卓的定位方式实际上就gps和ne ...

  2. ios之AFN上传下载详细步骤(2)

    五.AFN .GET\POST > GET请求 // 1.获得请求管理者 AFHTTPRequestOperationManager *mgr = [AFHTTPRequestOperation ...

  3. VC++ 文件系统

    using namespace System; using namespace System::IO; void ShowHelpMsg(){ Console::WriteLine(L"本程 ...

  4. 从零开始学习Node.js例子四 多页面实现数学运算

    app-node.js ; var http = require('http'); var htutil = require('./htutil'); var server = http.create ...

  5. spring AOP 实现事务和主从读写分离

    1 切面 是个类 2 切入点 3 连接点 4 通知 是个方法 5 配置文件 <?xml version="1.0" encoding="UTF-8"?&g ...

  6. table中td的空格

    1.css的方式去掉空格 .table{ border-collapse:collapse; border-spacing:0px; }

  7. 各种Linux发行版本优缺点对比[转]

    转自:http://www.zzbeidaqingniao.com/linux/20100127/1495.html linux最早由Linus Benedict Torvalds在1991年开始编写 ...

  8. 【Unity3D基础教程】给初学者看的Unity教程（二）：所有脚本组件的基类 -- MonoBehaviour的前世今生

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 上一次我们讲了GameObject,C ...

  9. finally语句总是不会被执行？

    答案是否(1)try语句没有被执行到,如在try语句之前return就返回了,这样finally语句就不会执行.这也说明了finally语句被执行的必要而非充分条件是:相应的try语句一定被执行到.( ...

  10. spring-实现配置文件读取

    spring 实现配置读取 Java 的配置读取方式一般是采用java.utils.Properties 或是apache的Configuration工具:然而 spring 框架内置了配置文件的读取 ...