首页/资讯中心/详情

HTML，css和JavaScript的基础学习—JavaScript篇

HTML，css和JavaScript的基础学习—JavaScript篇
📅 发布时间：2026/7/28 20:36:39

HTML，css和JavaScript的基础学习—JavaScript篇

JavaScript是做什么的？

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能
关于弱类型：强类型和弱类型主要是站在变量类型处理的角度进行分类的。强类型是指不允许隐式变量类型转换，弱类型则允许隐式类型转换。

1.使用方式

HTML 的 <script>标签用于把 JavaScript代码 插入 HTML 中；script标签可以出现在html的head或body位置，一般常放在head中；
也可以引入外部的js文件 <script src=“myScript.js”></script>

2.变量及数据类型
  1. 变量
    js是弱类型语言，所以在定义变量时不需要指定类型，直接用var关键字定义即可。 var = a

字符串，数字，布尔，数组，object对象，日期对象，特殊类型。
数字类型不区分整数类型和浮点类型，特殊类型包括：NaN，undefined，null

3.Math对象

Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

  1. Math对象属性
    E 返回算术常量 e，即自然对数的底数（约等于2.718）。
    LN2 返回 2 的自然对数（约等于0.693）。
    LN10 返回 10 的自然对数（约等于2.302）。
    LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
    LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
    PI 返回圆周率（约等于3.14159）。
    SQRT1_2 返回 2 的平方根的倒数（约等于 0.707）。
    SQRT2 返回 2 的平方根（约等于 1.414）。
  2. Math对象方法
    abs(x) 返回 x 的绝对值。
    acos(x) 返回 x 的反余弦值。
    asin(x) 返回 x 的反正弦值。
    atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
    atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
    ceil(x) 对数进行上舍入。
    cos(x) 返回数的余弦。
    exp(x) 返回 Ex 的指数。
    floor(x) 对 x 进行下舍入。
    log(x) 返回数的自然对数（底为e）。
    max(x,y,z,…,n) 返回 x,y,z,…,n 中的最高值。
    min(x,y,z,…,n) 返回 x,y,z,…,n中的最低值。
    pow(x,y) 返回 x 的 y 次幂。
    random() 返回 0 ~ 1 之间的随机数。
    round(x) 把数四舍五入为最接近的整数。
    sin(x) 返回数的正弦。
    sqrt(x) 返回数的平方根。
    tan(x) 返回角的正切。
4.运算符
  • 算术运算符（+ - * / % ++ --）
  • 比较运算符（> >= < <= == != === !==）
  • 逻辑运算符（&& || !）
  • 赋值运算符（= += -= *= /= %= ）
  • 字符串连接运算符 +
  • 三元运算符（? :）
5.流程控制
  1. 条件语句
    if(条件判断){要执行的代码块}
    if(){} else if(){} else{}
    if(){} else{}
    switch…case语句
  2. 循环语句
    for语句
    while语句
    do…while语句
  3. break和continue
    break语句是中断语句，用于终止循环语句或开关语句。
    continue语句是连续语句，用于重新开始while、do while和for语句。
6.函数
  1. 正常函数
    function 方法名(参数1,参数2){ ... return ... }
  2. 匿名函数
    var fn = function(a,b){ //定义匿名函数，并赋值给一个变量 alert(a+" -- "+b) } fn(18,"yml")
7.事件（重要）

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。
使用

  1. 事件注册
    定义函数myClick , 并在标签的事件中调用方法：οnclick=“myClick()”
  2. 可用事件
    onclick 鼠标点击时触发
    ondblclick 鼠标双击时触发
    onfocus 元素获得焦点时触发
    onblur 元素失去焦点时触发
    onchange 用户改变域的内容
    onmouseover 鼠标被移动到某个元素上（触发一次）
    onmousemove 鼠标在元素内部移动时，不断触发
    onmouseout 鼠标从元素移开
    onkeydown 键盘某个键被按下
    onkeypress 键盘的键被按下或按住
    onkeyup 键盘的键被松开
    onload 用于body标签，页面加载完毕时触发一次
  3. 事件冒泡
    一个标签触发事件后，事件会向上传递给自己的父标签，然后父标签的父标签…
    e.stopPropagation() //阻断事件向上传递
    e.代表当前标签对象

技巧

  1. 为超链接注册事件
    function myClick() { console.log('go go go') } <a href="javascript:void(0)" onclick="myClick()">go</a>
  2. form表单
    form表单提交前，如果需要处理其他逻辑先将提交按钮改为普通按钮，然后在按钮事件中手动提交表单。即可实现灵活的表单控制！
    在需要提交的时候再提交 document.forms[0].submit();//手动获取form，并提交
  3. this关键字
    传入当前标签对象
    function myClick(a) // a=this，当前触发事件的元素 { console.log(a) } <input type="button" name="" value="提交" onclick="myClick(this)">
  4. 另外的事件注册方式
    var btn = document.getElementById('btn') //获得标签 btn.onclick = function() //注册事件 { console.log('注册成功') }
  5. onload
    load事件的handler，整个的页面加载完毕后执行
    <body onload="onload9();"> <!--注册onload事件-->
    function onload9(){ }
8.DOM对象

HTML DOM （文档对象模型）：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
查找HTML元素

  • 通过 id 找到 HTML 元素 document.getElementById()

  • 通过标签名找到 HTML 元素 document.getElementsByTagName()

  • 通过类名找到 HTML 元素 document.getElementsByClassName()

  • 通过name属性值找到 HTML 元素 document.getElementsByName()

  • children 获得所有子标签

  • parentNode 获得父标签

  • previousElementSibling 获得上一个兄弟标签

  • nextElementSibling 获得下一个兄弟标签

修改HTML
修改标签内容
修改标签基本属性
修改样式属性
基本格式都是：element.XXX = xxx（element：本元素）
删除和新增标签

  • 删除标签
    removeChild(child) 删除指定的子标签
    remove() 删除自身
  • 新增标签
    document.createElement(标签名) 创建新标签
    document.createTextNode(内容) 创建标签内容
    ele.appendChild(标签) 追加子标签
    ele.insertBefore(标签) 插入指定标签到ele标签中
9.BOM对象

BOM 是 Browser Object Model，浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；

  • window对象
    window.alert(“警告”) 警告框
    window.confirm(“xxx”) 确认框，根据用户的选择，返回bool值
  • history对象
    window.history.forward() 在浏览历史里前进一步
    window.history.back() 在浏览历史里后退一步
  • screen对象
    window.screen.width 屏幕宽度
    window.screen.height 屏幕高度
  • navigator对象
    window.navigator.appVersion 浏览器版本
  • location对象
    window.location.href 载入页面–当前载入页面的完整UR
  • document对象
    document.getElement…(…) 选择标签
    document.forms[0] 选择文档中的form
    document.write(“hello”) == 向文档中写入内容，会覆盖所有之前的
10.补充：计时器

var id1 = setInterval(function(){...},1000) ;
每1000毫秒执行一次function，返回事件的id
var id2 = setTimeout(function(){...},1000);
1000毫秒后仅执行一次function，返回事件的id
clearTimeout(id2); 移除事件
clearInterval(id1); 移除事件

以上只是对JavaScript的基础进行了一些简单总结，不足之处望指出。