JavaScript基础知识笔记

JavaScript 是属于 Web 的编程语言,对网页行为进行编程。

参考教程:

  1. https://www.w3school.com.cn/js/index.asp
  2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_overview

JavaScript 能够改变 HTML 内容

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript 能够改变 HTML 属性

<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>

JavaScript 能够改变 HTML 样式 (CSS)

document.getElementById("demo").style.fontSize = "25px";

JavaScript 能够隐藏或显示 HTML 元素

document.getElementById("demo").style.display="none";
document.getElementById("demo").style.display="block";

JavaScript 使用

外部脚本引用

<script src="myScript.js"></script>
// myScript.js
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

JavaScript 函数被放置于 HTML 页面

提示:把脚本置于 <body> 元素的底部,可改善显示速度,因为脚本编译会拖慢显示。

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

基础语法

JavaScript区分大小写,用分号分隔语句;
在 JavaScript 中,首字符必须是字母、下划线(-)或美元符号($)。

注释

// 单行注释
/* 多行注释 */

数据类型

JavaScript支持动态类型。

var str1="hello world"; // String
var num=1; // Number
var x=true,y=false; // Boolean
var pets=["cat","dog"]; // Array
var person={name:"test",age="18"}; // Object
pets=null; // Undefined

对象

var person = {
    // 对象属性
    name:"test",
    age="18",
    id=666,
    // 对象方法
    get_id: function()
    {
        return this.id;
    }
};

访问对象属性person.id;person["id"];
访问对象方法person.get_id();不待()则返回函数定义;

函数

function myFunction(var1, var2)
{
    x = var1+var2;
    return x;
}
var myVar=myFunction();
posted @ 2023-05-21 09:57  rustling  阅读(15)  评论(0编辑  收藏  举报