视频学习JavaScript入门篇学习笔记(重点知识整理)

 JavaScript入门篇学习笔记(重点知识整理)

1、输出内容(document.write

var mystr = "我是";

var mychar = "JavaScript";

document.write(mychar + "<br>");

document.write(mystr + mychar + "的忠实粉丝!");

 视频学习JavaScript入门篇学习笔记(重点知识整理)_第1张图片

 

 视频学习JavaScript入门篇学习笔记(重点知识整理)_第2张图片

 

2、alert 消息对话框

var mychar = "I love JavaScript";

alert(mychar);

 

3、confirm 消息对话框

            function rec() {
                var mymessage = confirm("你是女士!");
                if(mymessage == true) {
                    document.write("你是女士!");
                } else {
                    document.write("你是男士!");
                }
            }

 

4、prompt 消息对话框

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("要努力了!");
                }
            }

 

5、打开新窗口(window.open

window.open('http://www.imooc.com', '_blank', 'height=600,width=400,top=100,left=0');

 视频学习JavaScript入门篇学习笔记(重点知识整理)_第3张图片

视频学习JavaScript入门篇学习笔记(重点知识整理)_第4张图片

 

6、关闭窗口(window.close

<script type="text/javascript">
            var mywin = window.open("http://www.imooc.com");
            mywin.close();
        script>

 

7、代码练习:

DOCTYPE html>
<html>
    <head>
        <title> new document title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
            function openWindow() {
                var open = confirm("确认新建窗口打开网站吗?");
                if(open == true)
                // 新窗口打开时弹出确认框,是否打开
                {
                    var url = prompt("通过输入对话框,确定打开的网址", "http://www.imooc.com");
                    if(url != null)
                    // 通过输入对话框,确定打开的网址,默认为 http://www.imooc.com/
                    {
                        window.open(url, "_blank", 'width=400px,height=500px,menubar=no,toolbar=no');
                    }
                    //打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。
                    else { alert("再见!"); }
                } else { alert("再见!"); }
            }
        script>
    head>
    <body>
        <input type="button" value="新窗口打开网站" onclick="openWindow()" />
    body>
html>

 

8、通过ID获取元素

<p id="con">JavaScriptp>
        <script type="text/javascript">
            var mychar = document.getElementById("con");
            document.write("结果:" + mychar); //输出获取的P标签。
        script>

 

9、innerHTML 属性用于获取或替换 HTML 元素的内容

var mychar = document.getElementById("con");
            document.write("原标题:" + mychar.innerHTML + "<br>"); //输出原h2标签内容
            mychar.innerHTMl = "Hello world!";
            document.write("修改后的标题:" + mychar.innerHTML); //输出修改后h2标签内容

 

10、显示和隐藏(display属性)

function hidetext() {
                var mychar = document.getElementById("con");
                mychar.style.display = "none";
            }
            function showtext() {
                var mychar = document.getElementById("con");
                mychar.style.display = "block";
            }

 

11、改变 HTML 样式

DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
        <title>javascripttitle>
        <style type="text/css">
            body {
      
                font-size: 12px;
            }
            #txt {
      
                height: 400px;
                width: 600px;
                border: #333 solid 1px;
                padding: 5px;
            }
            .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" class="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="changecolor()">
            <input type="button" value="改变宽高" onclick="changewh()">
            <input type="button" value="隐藏内容" onclick="hiddentxt()">
            <input type="button" value="显示内容" onclick="showtxt()">
            <input type="button" value="取消设置" onclick="cancel()">
        form>
        <script type="text/javascript">
            var mm = document.getElementById("txt");
            //定义"改变颜色"的函数
            function changecolor() {
                mm.style.color = "pink";
                mm.style.backgroundColor = "blue";
            }
            //定义"改变宽高"的函数
            function changewh() {
                mm.style.width = "200px";
                mm.style.height = "500px";
            }
            //定义"隐藏内容"的函数
            function hiddentxt() {
                mm.style.display = "none";
            }
            //定义"显示内容"的函数
            function showtxt() {
                mm.style.display = "block";
            }
            //定义"取消设置"的函数
            function cancel() {
                var a = confirm("取消设置?");
                if(a == true) {
                    //                    mm.style.width="600px";
                    //                    mm.style.height="400px";
                    //                    mm.style.color ="black";
                    //                    mm.style.backgroundColor = "white";
                    //                    mm.style.display="block";
                    txt.removeAttribute('style'); //用一句话就可以
                }
            }
        script>
    body>
html>

 视频学习JavaScript入门篇学习笔记(重点知识整理)_第5张图片

 

转载于:https://www.cnblogs.com/cxm-weiniss/p/9369891.html

你可能感兴趣的:(javascript)