JavaScript学习之路

最新推荐文章于 2024-05-30 11:27:58 发布

奋斗的小喵喵

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量54

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/weixin_44729070/article/details/124968197

版权

学习目标：

一周掌握 js入门知识

学习内容：在w3c学习js内容小记

一、js简介

js是一种动态语言，当用户点击按钮、移动鼠标或者按下键盘时，就会引发一系列的动作。这些动作有两种实现方式：一种是可以直接通过dom获得元素节点进而对元素进行更改，另一种方法就是先写一个函数，然后οnclick=function（）来进行函数绑定。

方式一

	<!DOCTYPE html>
	<html>
	<body>
	
	<h2>JavaScript 能做什么？</h2>
	
	<p>JavaScript 能够改变 HTML 属性值。</p>
	
	<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
	
	<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
	
	<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
	
	<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
	
	</body>
	</html>

方式二

	<!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>

二、如何使用js

①js代码若写在html中，必须放在标签中。
提示：把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
②也可把js代码写在外部文件中：如命名为myScript.js
通过src属性来引入外部js（自己写的）这时我们就要看一下相对路径的一些知识，学习如何让找到我们自己写的js文件。

<script src="myScript.js"></script>
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

三、js显示数据的方式

window.alert( ) 弹出警告框
document.write( ) 写入html输出
innerHTML 写入HTML元素
console.log( ) 在控制台输出

四、js属性的命名方式

JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写：

firstName, lastName, masterCard, interCity

五、var、let、const声明

我们尽可能使用let对变量进行声明：比较安全，局部变量并不会改变全局变量、使用var的话，局部变量会改变全局变量
在var声明变量的过程中、存在着变量提升，而用let声明变量不存在变量提升

<h1>JavaScript 提升</h1>

<p>使用 <b>var</b>，您可以在声明之前使用变量：</p>

<p id="demo"></p>

<script>
carName = "Audi";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

// 在此处，您可以使用 carName
var carName;
// 在此处，您不可以使用 carName
let carName;

使用const声明的对象不是常量，我们可以通过对对象的属性更改来更改对象
①常量对象可以更改
您可以更改常量对象的属性：

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

但是您无法重新为常量对象赋值：

const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

②常量数组可以更改
您可以更改常量数组的元素：

// 您可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 您可以更改元素：
cars[0] = "Honda";

// 您可以添加元素：
cars.push("Volvo");

但是您无法重新为常量数组赋值：

const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];    // ERROR

六、js类型运算符

在这里插入图片描述
typeof 运算符可返回以下原始类型之一：

string
number
boolean
undefined
复杂数据：typeof 运算符可返回以下两种类型之一：
function
object
typeof 运算符把对象、数组或 null 返回 object。typeof 运算符不会把函数返回 object
当数值和字符串相加时，JavaScript 将把数值视作字符串。

七、JavaScript 函数

7.1 函数的语法规则

JavaScript 函数语法：JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()

function myFunction(p1, p2) {
    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积
}

7.2 何时会函数调用

函数中的代码将在其他代码调用该函数时执行：

当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时
自动的（自调用）

7.3 调用函数时加（）和不加的区别

使用下面的例子，toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。

①返回计算的结果：30

<p>本例调用函数把华氏度转换为摄氏度：</p>

<p id="demo"></p>

<script>
function toCelsius(f) {
    return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(86);
</script>

②返回的是函数体里面的内容

function toCelsius(f) { return (5/9) * (f-32); }

<p>不使用 () 访问函数将返回函数声明而不是函数结果：</p>

<p id="demo"></p>

<script>
function toCelsius(f) {
    return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius;
</script>

八、js对象

对象既可以有属性也可以有方法、方法是作为属性来存储的函数

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

九、事件调用的条件

常见的 HTML 事件
在这里插入图片描述

学习时间：

下午4点到六点

学习产出：

CSDN 技术博客 1 篇

奋斗的小喵喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习之路

学习目标：一周掌握 js入门知识学习内容：在w3c学习js内容小记一、js简介js是一种动态语言，当用户点击按钮、移动鼠标或者按下键盘时，就会引发一系列的动作。这些动作有两种实现方式：一种是可以直接通过dom获得元素节点进而对元素进行更改，另一种方法就是先写一个函数，然后οnclick=function（）来进行函数绑定。方式一 <!DOCTYPE html> <html> <body> <h2>JavaScript 能做什么？
复制链接

扫一扫