JavaScript学习笔记 - JavaScript基础
2018-10-26 本文已影响0人
梦元_38ab
1 JavaScript 基础
1.1 JS 在 html 内部的引入：
html 文件是从上到下加载，可以使用：
<script>
// js代码
</script>
或者引用 JS 文件：
<script type="text/javascript" src="test.js"></script>
练习1-1： 编写一个输入框和按钮，当点击按钮时， alert输出 hello + 输入框内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
功能: 有一个输入框，一个按钮，点击按钮，输出 "hello" + 输入框中内容;
-->
<!--
id="name"
属性名=属性值
value="张三"
属性名=属性值
-->
<input type="text" placeholder="请输入您的名字" id="name" value="张三" />
<input type="button" value="输入完成" id="bt" />
<script>
// 1、获取元素
var oText = document.getElementById("name");
var oBt = document.getElementById("bt");
// 2、点击事件
oBt.onclick = function(){
// 按钮点击之后要做的事情
// alert(1);
// 获取到输入框中的内容
// 读: 元素.属性名
alert( "hello " + oText.value );
}
</script>
</body>
</html>
练习1-2. 点击按钮，实现计数操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border: 1px solid gray;
text-align: center;
}
#text{
font-size: 25px;
}
</style>
</head>
<body>
<!--
功能: 计数功能
-->
<!-- 输入框中的内容，设置value属性-->
<input type="text" id="test" />
<br />
<br />
<br />
<br />
<div class="box">
<h3 id="text"> 0 </h3>
<input type="button" id="bt" value="点我试试" />
</div>
<script>
// 1、获取元素
var oText = document.getElementById("text");
var oBt = document.getElementById("bt");
var oTest = document.getElementById("test");
var index = 0;
// 2、按钮点击事件
oBt.onclick = function(){
// alert(1);
index = index + 1;
// alert(index);
// 标签中的内容: 元素.innerHTML
oText.innerHTML = index;
// 属性的写操作
oTest.value = index;
}
</script>
</body>
</html>
在这个练习中区分当修改输入框中的属性value时， 使用 变量.value; 当修改htmL标签内容时，使用 变量.innerHTML
// 标签中的内容: 元素.innerHTML
oText.innerHTML = index;
// 属性的写操作
oTest.value = index;
练习1-3：点击操作修改标签内容的字体大小
var size = 20
oText.style.fontSize = size + 'px'
库函数：
//将变量转化成数字
Number(变量名);
//取随机数, 取值范围（0， 1）
Math.random();
//浮点数取整， 向下取整
parseInt();
