RUNOOB JavaScript 基础语法

最新推荐文章于 2022-09-30 02:03:08 发布

执霜

最新推荐文章于 2022-09-30 02:03:08 发布

阅读量1.1k

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43156556/article/details/121381309

版权

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript 基础语法

JavaScript 的特点：
JavaScript是一种动态类型、弱类型、基于原型的解释型脚本语言

动态类型：变量在声明时不需要声明类型，在运行时根据被赋值类型进行转化
弱类型：可根据环境的变换自动转换变量类型
基于原型：没有面向对象语言中类和实例的区别，新的对象通过构造器函数继承原型对象，实例化后具有原型对象的属性以及本身定义的属性
解释型脚本语言：解释器JavaScript引擎。可理解为：JavaScript为控制浏览器和HTML页面交互编写规则

JavaScript的组成：

ECMAScript：核心部分，规定了JavaScript的语法，类型，语句，关键字，保留字，运算符和对象

ECMA 欧洲计算机制造商协会，JavaScript和Jscript有相同的功能但标准不同，ECMAScript作为标准定义该语言

DOM：Document Object Model 通过把整个页面映射成一个树结构的文档，提供一套可以访问HTML和XML节点的API

<script>
	document.write("<p> hello java </p>");
</script>

BOM：Browser Object Model 提供了访问浏览器窗口的方法，开发者可以控制浏览器窗口进行一些诸如移动窗口之类的操作

<script>
	window.alert("hello java");
</script>

2. JavaScript 变量

JavaScript 变量命名规范：一般采用驼峰式命名法
如firstName，FirstName

2.1 JavaScript 变量声明

var，let关键字

var firstName = "Stefan";
let lastName = "Zweig";

var和```let``的区别

let缩小了var的作用域，可以认为是更规范更先进的var
使用let是为了解决var的一些缺陷问题
目前习惯使用的是var

2.2 JavaScript 变量作用域

全局变量

<h3>1. 全局变量</h3>
<script>
    var a = 'hello', b = ' java';
    function strnCat(first, last){
        window.alert(a + b);
    }
    strnCat(a, b);
    console.log(a + " " + b);
</script>

局部变量

<h3>2. 局部变量</h3>
<script>
    function strnCat(){
        var a = 'hello', b = ' javascript';
        window.alert(a + b);
    }
    strnCat();
    console.log(a + " " + b);
</script>

不加var或let声明的变量

<h3>3. 不加var或let声明的变量</h3>
<script>
    function strnCat(){
        a = 'hello', b = ' spring';
        window.alert(a + b);
    }
    strnCat();
    console.log(a + " " + b);
</script>

代码块中使用var定义的变量

<h3>4. 代码块中使用var关键字定义的变量</h3>
<script>
    for(var i = 0; i < 3; i++){
        var sum = i + 10;
    }
    console.log(i);
    console.log(sum);
</script>

运行结果：
在这里插入图片描述
总结

类型	作用范围
全局变量	全局
局部变量	函数内部
变量(无var,let声明)	全局
代码块变量(var声明)	代码块内外

说明：

不加var或者let声明的变量，实际上是给window对象添加一个不可配置的属性，作用于整个页面
代码块中的变量可作用于代码块外，但代码块位于函数中则声明的变量为局部变量

3. JavaScript 数据类型

JavaScript的数据类型主要分为两大类：

基本数据类型：null，undefined，string，number，boolean
对象：函数，基本类型的封装类型，String，Number，Boolean

<h3>4. javascript 数组</h3>
<script>
    var phone = new Array();
    phone[0] = "apple";
    phone[1] = "huawei";
    phone[2] = "mi";
    for(var i = 0; i < phone.length; i++){
        document.write(phone[i] + "&nbsp" + "&nbsp");
    }
</script>

<h3>5. javascript 对象</h3>
<script>
    var person = {firstname: "John", lastname: "Doe", id: 3866};
    document.write(person.firstname + "&nbsp" + person.lastname);
    document.write(person["id"]);
</script>

undefined和 null

undefined是一个没被赋值的变量，可以认为是一个空的变量
null代表一个空的对象

4. JavaScript 输出

javascript使用以下四种方式来输出数据

使用 win.alert()弹出警告框

<script>window.alert("hello java")</script>

使用 document.write()方法将内容写到HTML文档中

<script>
    document.write("<p><b>注意</b>引号</p>")
</script>

使用innerHTML写入到HTML元素

<p id="innerhtml">java</p>
<script>
    document.getElementById("innerhtml").innerHTML="modified";
</script>

使用 console.log()写入到浏览器的控制台

<script>
    console.log(6+"66")
</script>

5. JavaScript 简单应用

5.1 javascript: 直接写入HTML输出流

<script>
    document.write("<h2>用javascript直接输出的标题</h2>");
    document.write("<p>用javascript直接输出的段落</p>");
</script>

5.2 javascript: 对事件的反应 `onclick`事件

<button type="button" onclick="alert('welcome!')">点我</button>

5.3 javascript: 改变HTML内容

<p id="change">javascript 能改变HTML内容</p>
<script>
    function myfunc(){
        var elementById = document.getElementById("change");
        elementById.innerHTML="HELLO JAVASCRIPT";
        elementById.style.color="#facb";
    }
</script>
<button type="button" onclick="myfunc()">点击</button>

元素设置 id="change"标识元素
函数部分：document.getElementById("change")获取元素
事件响应：点击按钮事件 onclick="myfunc()"调用函数

5.4 javascript: 改变HTML图像

在这里插入图片描述

<script>
    function changeImg(){
        var elementById = document.getElementById("myimg");
        if(elementById.src.match("bulbon")){
            elementById.src="img/pic_bulboff.gif";
        }else{
            elementById.src="img/pic_bulbon.gif";
        }
    }
</script>
<img loading="lazy" id="myimg" onclick="changeImg()" src="img/pic_bulboff.gif" width="100" height="180"/>

设置图片的基本属性：src="img/pic_bulboff.gif" width="100" height="180"
设置图片的id及event：id="myimg" onclick="changeImg()"
响应函数changeImg()：
- 获取元素：document.getElementById("myimg")
- 改变图片状态逻辑：if(elementById.src.match("bulbon"))
  当前src="img/pic_bulbon.gif";则替换为src="img/pic_bulboff.gif"