JavaScript第一部分_向未声明的 javascript 变量分配值-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44399428/article/details/126585693

1.简介

1）JavaScript 是脚本语言：

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

<!-- 直接写入HTML输出流 -->
<!DOCTYPE html>
<html>
<head> 
<title>文档标题</title>
</head>
<script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落。</p>");
</script>
</body>
</html>

<!-- 对事件的反应 -->
<button type="button" onclick="alert('欢迎!')">点我!</button>

2）改变 HTML 内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>111111</title> 
</head>
<body>
	
<h1>这是一个标题</h1>
<p id="demo">
id为demo，我是改变前。
</p>
<!-- 函数实现的功能为改变id为demo的元素内容 -->
<script>  
function myFunction()
{
	x=document.getElementById("demo");  // 通过id找到元素
	x.innerHTML="我是改变后";    // 改变内容
}
</script>
<!-- 点击按钮，函数为myFunction() -->
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

3）改变 HTML 图像

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

以上实例中代码 element.src.match("bulbon") 的作用意思是：检索 <img id="myimage" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif。

4）改变 HTML 样式

<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到id为demo的元素
	x.style.color="#ff0000";          // 改变样式颜色为红色
}
</script>

5）验证输入

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>22222</title> 
</head>
<body>
	
<h1>标题</h1>
<!-- 输入框id为demo，类型为文本类型 -->
<input id="demo" type="text">
<!-- 触发的函数，对x赋值为取到的文本框值，不是数字会有弹窗提示 -->
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<!-- 一个按钮，触发一个函数myFunction()，按钮名称为点击这里 -->
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

<!-- 更严格的判断 -->
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
    alert("不是数字");
}

2.输出

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

3.语法

字面量:数字（Number），字符串（String），表达式，数组（Array），对象（Object），函数（Function）

数组：[40, 100, 1, 5, 25, 10]

对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数：function myFunction(a, b) { return a * b;}

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值

4.语法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>11111</title> 
</head>
<body>

<h1>标题一</h1>
<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>
<!-- 点击事件，触发一个函数myFunction() -->
<p>
<button type="button" onclick="myFunction()">点击按钮</button>
</p>
<script>
function myFunction(){
	//将id为myPar的元素内的HTML内容改为你好世界！
	document.getElementById("myPar").innerHTML="你好世界！";
	document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>点击按钮，会改变元素内容</p>

</body>
</html>

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

转义字符串：'It\'s alright' = It's alright "He is called \"Johnny\"" = He is called "Johnny"

'He is called "Johnny"' = He is called "Johnny"

5.函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

1）带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔。

<!-- 按钮元素，myFunction函数有两个实参 -->
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
<!-- myFunction函数有两个形参 -->
function myFunction(name,job){
	alert("Welcome " + name + ", the " + job);
}
</script>

2）返回值的函数

在使用 return 语句时，函数会停止执行，并返回指定的值。

//函数返回值一个5的值
function myFunction()
{
    var x=5;
    return x;
}
//"demo" 元素的 innerHTML 将成为 5
document.getElementById("demo").innerHTML=myFunction();

局部 JavaScript 变量：在 JavaScript 函数内部声明的变量（使用 var）是局部变量

全局 JavaScript 变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量的生存期：JavaScript 变量的生命期从它们被声明的时间开始，局部变量会在函数运行以后被删除，全局变量会在页面关闭后被删除。

3）向未声明的 JavaScript 变量分配值

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

6.作用域

// 此处不能调用 carName 变量
function myFunction() {
//函数内局部变量
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

//函数外全局变量
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}


// 此处可调用 carName 变量
function myFunction() {
//函数内全局变量
    carName = "Volvo";
    // 此处可调用 carName 变量
}

7.事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

//改变id为demo的元素的内容为现在的时间
<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>

//修改自身元素的内容 (使用 this.innerHTML):
<body>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
</body>

//通过事件属性来调用
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>

8. 字符串

\' == 单引号 \" == 双引号 \\ == 反斜杠 \n == 换行 \r == 回车

\t == tab(tab) \b == 退格符 \f == 换页符

9.条件语句

条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

10.DOM操作HTML

1）JavaScript能够改变页面中所有的HTML元素；JavaScript能够改变页面中所有的HTML属性；JavaScript能够改变页面中所有CSS样式；JavaScript能够对页面中所有的事件做出反应。

2）

①改变HTML输出流：注意：不要在文档加载完之后使用document.write()。会覆盖该文档。

②寻找元素：通过id找到HTML元素（document.getElementById("pid")）；

通过标签名找到HTML元素 (document.getElementsByTagName("p"))。

③改变HTML元素内容：使用元素，innerHTML

④改变HTML属性：使用属性（attribute）

前提：使用超链接属性<a></a>设置链接

使用图片属性<img></img>设置图片

链接属性：href

图片属性：src

<!-- 链接属性更改并跳转 -->
<body>
    <a id="pid" href="http://www.baidu.com">这是百度网站</a>
    <button onclick="demo()">按钮</button>
    <script>
        function demo(){
            document.getElementById("pid").innerHTML="这是菜鸟教程";
            document.getElementById("pid").href="https://www.runoob.com/html/html-tables.html";
        }
    </script>
</body>

<!-- 图片属性更改并跳转 -->
<body>
    <img id="pid" src="img/111.jpg"></img>
    <button onclick="demo()">按钮</button>
    <script>
        function demo(){
            // document.getElementById("pid").innerHTML="这是菜鸟教程";
            document.getElementById("pid").src="img/222.jpg";
        }
    </script>
</body>

11.DOM操作CSS

1.通过DOM对象改变CSS，语法：document.getElementById(id).style.property=new style

//rel="stylesheet" 文档的外部样式表。
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="div" class="div">
        Hello
    </div>
    <button onclick="demo()">按钮</button>
    <script>
        function demo(){
            document.getElementById("div").style.background="blue";
        }
    </script>
</body>

12.DOM EventListener

方法：addEventListener(): 方法用于向指定元素添加事件句柄

removeEventListener(): 移除方法添加事件句柄

//添加句柄写法
<body>
    <button id="btn">按钮</button>
    <script>
        document.getElementById("btn").addEventListener("click",function(){
            alert("hello")
        });
    </script>
</body>

//添加两个句柄
<body>
    <button id="btn">按钮</button>
    <script>
        //获取按钮id
        var x = document.getElementById("btn");
        //点击按钮，调用hello函数
        x.addEventListener("click",hello);
        //点击按钮，调用world函数
        x.addEventListener("click",world);
        //点击按钮，移除world函数
        x.removeEventListener("click",world);
        //hello函数
        function hello(){
            alert("Hello");
        }
        //world函数
        function world(){
            alert("World");
        }
    </script>
</body>

13.异常信息捕获

<body>
    <form>
        //文本信息输入
        <input id="txt" type="text">
        //按钮类型并定义按钮名称
        <input id="btn" type="button" onclick="demo()" value="按钮">
    </form>
    <script>
        function demo(){
            try{
                //获取文本内容
                var e = document.getElementById("txt").value;
                //如果为空提示请输入
                if(e==""){
                    throw "请输入";
                }
            }
            //捕获异常，并显示“请输入”
            catch (err){
                alert(err);
            }
        }
    </script>
</body>

14.事件

事件是可以被JavaScript侦测到的行为

事件	描述
onClick	单击事件
onMouseOver	鼠标经过事件
onMouseOut	鼠标移出事件
onChange	文本内容改变事件
onSelect	文本框选中事件
onFocus	光标聚集事件
onBlur	移开光标事件
onLoad	网页加载事件
onUnload	关闭网页事件

//鼠标进出
<body>
    <div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
    <script>
        function onOver(ooj){
            ooj.innerHTML = "Hello";
        }
        function onOut(ooj){
            ooj.innerHTML = "World";
        }
    </script>
</body>

//改变的事件
//选中对话框以及选中文本
<form>
     <input type="text" onchange="alert('hello,内容呢？')">
     <input type="text" onselect="changeDemo(this)" onfocus="changeDemo2(this)">
</form>
<script>
    function changeDemo(bg){
        bg.style.background="blue";
    }
    function changeDemo2(bg){
        bg.style.background="red";
    }
</script>