认识JS

最新推荐文章于 2024-10-02 14:45:12 发布

MMMMMMMay

最新推荐文章于 2024-10-02 14:45:12 发布

阅读量454

点赞数 1

分类专栏： java 文章标签：脚本语言 javascript 浏览器

本文链接：https://blog.csdn.net/qq_36066908/article/details/74936434

版权

java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript

概念
- JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。JavaScript 很容易使用！你一定会喜欢它的！
JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

语法

document（文档对象）,关于此对象详解goto

<!DOCTYPE html>
<html>
<body>
<p>JavaScript 能够直接写入 HTML 输出流中：</p>
<!--页面加载就执行（这个样子写不属于任何一个函数），放在函数里面的话需要用事件调用执行-->
<script>
document.write("<h1>This is a heading</h1>");
document.write("<h6>This is a paragraph.</h6>");
/* 被调用了才执行
function show(){
    document.write("<h1>需要调用执行</h1>");
    document.write("<h6>This is a paragraph.</h6>");
}

*/
</script>
<!--<button onclick="show()">点我</button>用onclick事件调用执行-->
</body>
</html>

提示：您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

结果：

alert(“我是警告框”)，当使用这个函数的时候页面会弹出一个框框；

/*三种弹出框的测试*/
<script>

function testAlert(){
    alert("警告框！");
}
function testPrompt(){
    prompt("请输入密码","123456");
}
function testConfirm(){
    confirm("确认框");/*会返回一个boolean型的返回值，点击确定返回true反之false*/
}
function test(){
    document.write("<p>哈哈</p>");
}

</script>

<button onclick="testAlert()">警告框</button>
<button  onclick="testPrompt()">对话框</button>
<button  onclick="testConfirm()">确认框</button>
<button  ondblclick="test()">双击</button>

结果：

alert:

alert

Prompt:

Prompt

Confirm:

Confirm

双击buttonhou:

双击buttonhou

JS函数

document.getElementById(“some id”)

<script>
function testDocu(){
    var font=document.getElementById("font");
        font.style.color="red";

}
</script>
<body>
<p id="font">JavaScript 能够直接写入 HTML 输出流中：</p>
<button  onclick="testDocu()">变颜色</button>
</body>

结果：
这里写图片描述

/*改变span标签的文本内容*/
function testSpan(){
    var html=document.getElementById("span");
    html.innerHTML="哦多克";
    html.style.color="red";
    html.style.fontSize="50px";

}

/*改变img中的图片*/
<script>
function testimage(){

    var image=document.getElementById("image");
    /*if(count%2==1){
        image.src="true.jpg";
    }else if(count%2==0){
        image.src="false.jpg";
    }
    count++;
    alert(image.src);*/
    if(image.src.match("false")){
        image.src="true.jpg";
    }else{
        image.src="false.jpg";
    }

}
<script>
<body>
    <img src="false.jpg" id="image" onclick="testimage()"/>
</body>
<!--这个样子就可以有个点击开关灯的效果-->