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

(一)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. MySQL日期 字符串 时间戳互转

    平时比较常用的时间.字符串.时间戳之间的互相转换,虽然常用但是几乎每次使用时候都喜欢去搜索一下用法:本文将作为一个笔记,整理一下三者之间的 转换(即:date转字符串.date转时间戳.字符串转dat ...

  2. 大数据批量插入数据库使用（SqlBulkCopy ）效率更高

    SqlBulkCopy类是System.Data.SqlClient下的类,我们开发中不常用,甚至不知道有这么一个类的存在,但确实比sql插入,事务批量插入,sql批量拼接插入快很多,比调用存储过程插 ...

  3. ActiveXObject函数详解

    什么是 ActiveX 控件? ActiveX 控件广泛用于 Internet.它们可以通过提供视频.动画内容等来增加浏览的乐趣.不过,这些程序可能出问题或者向您提供不需要的内容.在某些情况下,这些程 ...

  4. 第七课第三节，T语言流程语句（版本5.0）

    for语句 for和while语句一样,都是用来做循环操作的,只是他们的使用方法不一样 (注:关键字,for,end) 执行流程图解: 实例代码: for(var i=0;i<20;i++) / ...

  5. DHCP服务器安装及配置

    一.什么是DHCP? DHCP (Dynamic Host Configuration protocol)动态主机设置协议,基于UDP(发送很小的数据报文,且对时效性要求较高)协议通信. 它是C/S架 ...

  6. svn使用（三）

    使用VisualSVN服务端,把已有的文件导入到服务端中 可以按以下步骤:

  7. IplImage 结构解读（转）

    typedef struct _IplImage { int nSize;                             /* IplImage大小 */ int ID;           ...

  8. 列表框QListWidget类

    QListWidget类也是GUI中常用的类,它从QListView下派生: class Q_GUI_EXPORT QListWidget : public QListView { Q_OBJECT ...

  9. 切换到android studio环境

    下载: android-studio-bundle-135.1740770-windows.exe sysimg_arm-21_r03.zip 设置环境变量: ANDROID_SDK_HOME     ...

  10. HTTP POST GET详解

    get /shang/a1.php http/1.1 host: localhost                           POST /shang/a1.php HTTP/1.1 Hos ...