JavaScript学习之路_html-js-css

学习目标：一周掌握 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中，必须放在标签中。
提示：把脚本置于元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
②也可把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( ) d出警告框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 运算符可返回以下原始类型之一：

stringnumberbooleanundefined
复杂数据：typeof 运算符可返回以下两种类型之一：functionobject
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 篇

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1322647.html

JavaScript学习之路

发表评论

评论列表（0条）