JavaScript学习笔记:简介-数据类型

getElementById

字面意思,分开四个单词。通过如下案例,可以改变HTML上的内容:

注意严格按照大小写


<p id="demo">改变 HTML 内容</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我</button>

按一下后(onclick)查找 id 为 demo 的HTML 元素,并把元素内容更改为(innerHTML) “Hello JavaScript!”


<button onclick="document.getElementById('Image').src=' ' ">点击我</button>

innerHTML 换为 src 将可以改变获取图片路径,即改变了 HTML 内 src 的属性值


<button type="button" onclick="document.getElementById('demo').style.fontSize='66px'">点击我</button>

指定CSS style 的 fontSize 属性进行改变其值


<button type="button" onclick="document.getElementById('demo').style.display='none'">点击我</button>

改变元素 display 属性值为 none 可使原本显示的指定元素隐藏

改变元素 display 属性值为 block 可使原本隐藏的指定元素显示


函数

JavaScript 代码像 CSS 一样需在特定标签内,CSS 为<style>

JavaScript 代码必须位于 <script></script> 标签之间,如:

<head>
	<script>
		function myFunction() 
		{
    		document.getElementById("demo").innerHTML = "这个段落已被更改";
		}
	</script>
</head>
<body>
	<h2>JavaScript代码位置</h2>
	<p id="demo">一个段落</p>
	<button type="button" onclick="myFunction()">点击我</button>
</body>

function 定义一个函数myFunction,并在 HTML 内引用

代码亦可放在 <body> 元素内,但是建议把脚本置于 元素的底部,可改善显示速度,因为脚本编译会拖慢显示

外链 .js 文件

<script src="xxx.js"></script>

JavaScript 显示方案

  • 使用 innerHTML 写入 HTML 元素
  • 使用 document.write() 写入 HTML 输出
  • 使用 window.alert() 写入警告框
  • 使用 console.log() 写入浏览器控制台
  1. innerHTML 属性

该属性可以改变一个 HTML 元素内的内容

  1. document.write() 属性
<h1>一张网页</h1>
<p>一个段落</p>
<button onclick="document.write(5 + 6)">点击我</button>

由以上案例可以说明在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

  1. window.alert() 属性

使用警告框来显示数据

  1. console.log() 属性

使用 console.log() 方法来在控制台显示数据


JavaScript语句建议

以分号结束语句不是必需的,但仍然强烈建议这么做

在运算符旁边( = + - * / )添加空格是个好习惯

常把代码行控制在 80 个字符以内,如果 JavaScript 语句太长,对其进行折行的最佳位置是某个运算符

在脚本的开头声明所有变量是个好习惯


驼峰式大小写

使用驼峰式大小写将单词连接起来作为标识符,以小写字母开头的驼峰大小写


var x = "8" + 3 + 5; x 值是 835

var x = 3 + 5 + "8"; x值是 88

如果对数字和字符串相加,结果将是字符串


typeof 运算符

typeof 运算符返回变量或表达式的类型

typeof 运算符对数组返回 “object”,因为在 JavaScript 中数组属于对象

布尔值 boolean;字符 string;数值 number;函数 function;

没有值的变量,其值是 undefined,任何变量均可通过设置值为 undefined 或 null 进行清空,因为在 JavaScript 中 null 的数据类型是对象,所以使用 null 清空的话值是 null 但是类型仍然是对象

Undefined 与 null 的值相等,但类型不相等

空值与 undefined 不是一回事,空的字符串变量既有值也有类型


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章