JavaScript JavaScript 初识，树欲千尺，唯有根深。
Posted 毛毛是一只狗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript JavaScript 初识，树欲千尺，唯有根深。相关的知识，希望对你有一定的参考价值。
01-JS 的使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2. 内嵌式, 在 head 标签中,定义 script 标签, 在标签中书写 JS 代码 -->
<script>
// ctrl / js 的注释, JS html 都是解释型语言,代码从上到下执行
alert('我是内嵌式 JS, 我执行了');
</script>
<!-- 3. 外链式, 在外部定义单独的 js 文件,书写 JS 代码,使用 script 标签的 src 属性引入 -->
<script src="./js/main.js"></script>
</head>
<body>
<!-- 1. 行内式, 给标签添加属性, 主要用于事件 事件="函数调用(参数)"
alert 是系统中自带的函数,作用是 弹窗
-->
<input type="button" value="点我呀,点我呀" onclick="alert('点我干嘛')">
</body>
</html>
04-代码/02-JS 中常见的数据类型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 变量的定义, var 变量名 = 数据值;
// 变量名, 由 字母 数字 下划线和 $ 组成,不能以数字开头, 匈牙利命名风格
// 1. 数字类型 number
// 1.1 整数
var iAge = 10;
// alert(iAge); // 打印数据值
// alert(typeof(iAge)); // 查看变量的数据类型
console.log(iAge, typeof(iAge));
// 1.2 小数
var fHeight = 170.3;
console.log(fHeight, typeof(fHeight));
// 2. 字符串类型 string
var sName = 'isaac';
console.log(sName, typeof(sName));
// 3. boolean 值(true, false)
var bIsTrue = true;
console.log(bIsTrue, typeof(bIsTrue));
// 4. undefined 未定义的,
var oA; // 声明变量,没有给数据值
console.log(oA, typeof(oA));
// 5. null 空对象
var oObject = null;
console.log(oObject, typeof(oObject));
</script>
</head>
<body>
</body>
</html>
03-JS 中的函数.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 定义一个函数,实现打印 hello world
function fnHello()
console.log('hello world!')
// 函数调用
fnHello()
// 定义一个函数, 可以接收两个数字,对数字进行求和,并将求和的结果进行返回
function fnSum(iNum1, iNum2)
var iNum = iNum1 + iNum2;
return iNum;
// 函数调用,由于函数有参数和返回值,所以需要调用的时候传参和接收返回值
var result = fnSum(10, 20);
console.log(result);
</script>
</head>
<body>
</body>
</html>
04-局部变量和全局变量.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 局部变量: 在函数内部定义的变量,称为局部变量,
// 全局变量: 在函数外部定义的变量,称为全局变量
// 1. 在函数内部能否直接读取全局变量的值, ====> 可以直接读取
// 1.1 定义全局变量
var iNum = 100;
// 1.2 定义函数
function fnFunc()
// 1.3 直接打印全局变量的值
console.log('函数内部访问全局变量的值:', iNum);
// 2. 在函数内部能否直接修改全局变量的值 ====> 可以直接修改全局变量的值
// 2.1 直接在函数内部修改全局变量值
iNum = 200;
// 3.1 定义局部变量
var iAge = 10;
// 注意点, 在函数内部,定义变量,如果不加 var 关键字, 定义的变量是全局变量
sName = 'isaac';
fnFunc()
// 2.2 在函数调用之后,查看全局变量的值,有没有被修改
console.log('函数外部访问修改后的全局变量的值:', iNum);
// 3. 函数外部能否使用局部变量 ====> 不能访问局部变量的值
console.log('sName的值:', sName);
// 3.2 函数外部访问局部变量的值
console.log('函数外部访问局部变量的值', iAge);
</script>
</head>
<body>
</body>
</html>
05-JS 装的判断语句.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var iAge = 17;
if (iAge >= 18)
console.log('可以进入网吧为所欲为,浏览各种网站');
if (iAge >= 18)
console.log('可以进入网吧为所欲为,浏览各种网站');
else
console.log('不满 18 岁,回去学习吧');
var fScore = 80;
if (fScore >= 90)
console.log("A");
else if (fScore >= 80)
console.log("B");
else if (fScore >= 60)
console.log('C');
else
console.log("D")
</script>
</head>
<body>
</body>
</html>
06-JS 数组.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1. 数组的定义
// 1.1 使用 Array 类创建
var aArray = new Array(1, 2, 'hello');
console.log(aArray, typeof(aArray));
// 1.2 使用字面量的方式创建
var aList = [1, 2, 3.14, 'isaac', [3, 6, 9]];
console.log(aList, typeof(aList));
// 2. 求数组中元素的个数,数组的长度 数组.length 属性
console.log('元素个数为:', aList.length);
// 3. 数组支持下标操作,但是没有负数下标
// 访问不存在的下标, 得到的值是 undefined
console.log(aList[0], aList[3], aList[100]);
// 可以通过下标修改数组中的数据
aList[3] = 'isaac NL';
console.log(aList);
// 直接修改不存在的下标值,在指定的下标位置添加数据,其余位置为空
aList[10] = 10;
console.log(aList, aList.length);
// 4. 根据数据值,找到元素在数组中的第一个下标 indexOf
// 找到了,返回的下标, 没有找到返回的是 -1
console.log(aList.indexOf(3.14), aList.indexOf(1000));
// 5. 尾部添加和删除
aList.push('last');
console.log(aList);
aList.pop()
console.log(aList);
// 6. 根据下标,删除添加数据
// splice(下标, 删除的元素个数, 添加的元素,...)
aList.splice(2, 2); // 只删除,不添加
console.log(aList);
aList.splice(2, 0, 3, 4, 5); // 只添加,不删除
console.log(aList);
aList.splice(2, 2, 'hello', 'world');
console.log(aList);
</script>
</head>
<body>
</body>
</html>
07-JS 循环.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1. while 循环
var i = 0;
while (i < 5)
console.log('写代码中....', i);
i++;
// 2. for 循环, 遍历数组
aList = ['郭德纲', '于谦', '小岳岳', '孙越']
for (var i=0; i < aList.length; i++)
console.log(aList[i]);
/* 1. 执行表达式 1
2. 执行表达式 2, 进行判断
3. 根据第二步的判断结果,如果为 false, 循环不执行
4. 根据第二步的判断结果,如果是 true, 进入循环中,执行循环中的代码
5. 循环中的代码执行结束之后,执行表达式 3,
6. 执行表达式 2, 重复 2 3 4 5 的步骤,直到条件 为 false
*/
// 3. do while
do
console.log('我至少执行一次');
while(1 > 3);
</script>
</head>
<body>
</body>
</html>
08-JS 获取页面标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script>
// getElementById 通过 id 找到对应的标签,找到了就是标签对象,没有找到,返回 null
var oDiv = document.getElementById('box');
alert(oDiv + " ---- " + typeof(oDiv));
</script> -->
<script>
// 解决方案二: 想一种方法, 让标签全部定义完成之后,在执行 JS 代码
// 便签全部定义完成之后, 会触发一个事件, window.onload 事件,
// 当页面标签全部加载完成,执行函数中的代码 , JS 的入口函数
window.onload = function()
var oDiv = document.getElementById('box');
alert(oDiv + " ---- " + typeof(oDiv));
</script>
</head>
<body>
<div id="box">
这是一个 div
</div>
<!-- 解决方案一, 不建议 -->
<!-- <script>
// getElementById 通过 id 找到对应的标签,找到了就是标签对象,没有找到,返回 null
var oDiv = document.getElementById('box');
alert(oDiv + " ---- " + typeof(oDiv));
</script> -->
</body>
</html>
09-JS 操作页面标签的属性.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 获取页面标签, 在入口函数中定义
window.onload = function ()
// 1. 获取 input 标签
var oInput = document.getElementById('name');
// 获取 name 属性
console.log('name属性:', oInput.name);
console.log('class属性:', oInput.className);
console.log('value 属性:', oInput.value);
// 只能获取行内式的 css 属性
console.log('style属性中的字体大小:', oInput.style.fontSize);
// 设置 value 属性
oInput.value = 100;
// 获取 div标签
var oDiv = document.getElementById('div1');
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
oDiv.innerHTML = '好好学习';
</script>
</head>
<body>
<input type="text" name="name" class="box" id="name" value="10"
style="font-size: 26px;">
<div id="div1">
<p>
这是一个 div
</p>
</div>
</body>
</html>
10-定时器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var oT = null;
function fnClick()
oT = setInterval(alert, 2000, '好好学习')
function fnCalc()
clearInterval(oT);
</script>
</head>
<body>
<div>
<p>点击单次定时器按钮, 3s后弹出 hello</p>
<!-- setTimeout(执行的函数名, 时间间隔, 第一个参数的参数) -->
<input type="button" value="单次定时器" onclick="setTimeout(alert, 3000, 'hello')">
</div>
<div>
<p>点击多次定时器按钮,间隔 2 秒, 弹出好好学习,点击 停止, 不再弹出</p>
<input type="button" value="多次定时器" onclick="fnClick()">
<input type="button" value="停止" onclick="fnCalc()">
</div>
</body>
</html>
11-jQuery 的使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset以上是关于JavaScript JavaScript 初识，树欲千尺，唯有根深。的主要内容，如果未能解决你的问题，请参考以下文章