JavaScript的三大组成部分.-优快云博客

本文深入讲解JavaScript编程语言的基础知识，包括变量、数据类型、运算符、控制语句、函数、事件处理、BOM与DOM操作，以及内置对象的使用。适合初学者快速掌握JS核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript : 是web上一种功能强大的编程语言，用于开发交互式的web页面。
它不需要进行编译，而是直接嵌入在HTML页面中, 由浏览器执行。

一、核心-ECMAScript

JS的引入:

1.内嵌式: <script type="text/javascript"> js代码 </script> 
	 注:可以写在任意位置,浏览器自上到下解析. 
2.外联式: <script type="text/javascript" src="xxx.js"></script> 
         注:引入了js,标签中就不能写js代码了,会失去作用的.

基本语法:

1.变量:
变量的声明: var 变量名; // 默认值是undefined
变量的赋值: var 变量名 = 值; // 可以是任意类型.

2.数据类型:
基本类型:
      undefined: 值就是undefined.
      null: 值就是null.
      boolean: true/false
      number:任意的数字.(整数,小数)
      string:字符串类型.(双引,单引)
引用类型:
      js是基于对象,而不是面向对象.
      预定义引用类型: var obj = new Object();
      所有的对象数据类型都是object.
      关键字: typeof可以查看变量的数据类型.

3.运算符
      js中: 5/2=2.5 java中:5/2=2;
      + 号: 进行的是字符串的连接.
      其他运算符,先把字符串转为整数再进行计算.
      ===(全等于): 比的是值和类型.

4.循环控制语句.
      普通for循环:
            for(var i=0; i<10; i++){ alert(i); }
      增强for循环: 没有集合只有数组.
            for(var 数组索引 in 数组名) {
                  alert(数组名[数组的索引]);
            }

函数和事件: (重点)

1.函数:
a.普通函数:
      function 函数名(参数列表){ // 参数不写数据类型
            js逻辑代码;
            写return 就有返回值,
      }
      函数调用: 函数名(实际参数) --> 有返回值,需要接收.
b.匿名函数:
      function (参数列表){
            js逻辑代码
      }
      使用: 将匿名函数赋值给一个变量, 使用变量名调用.
               将匿名函数作为其他函数的实际参数.

2.事件:
      需要将事件绑定到事件源上,然后使用函数封装需要执行的代码.
      onload 某个页面或图像被完成加载
      onsubmit 当表单提交时触发该事件(注意事件源是表单form)
      onclick onclick 鼠标点击某个对象
      onblur 元素失去焦点
      onfocus 元素获得焦点
      onchange 用户改变域的内容
      onmouseover 鼠标被移到某元素之上
      onmouseout 鼠标从某元素移开

二、浏览器对象BOM

1.Screen对象: 显示浏览器屏幕信息.
例: alert(screen.width+” ”+screen.height)
2.Navigator对象: 正在使用的浏览器 .
例:alert(snavigatot.appNam+” “+navigator.appVersion)
3.Location对象: location.href = “访问地址”;

4.window对象, 表示一个浏览器窗口或一个框架.
弹框的方法:
      a.提示框: alert(提示信息) - 一般用于调试程序.
      b.确认框: confirm(提示信息) - 确定-返回true;
      c.输入框: prompt(提示信息) - 确定-返回用户输入内容.
定时器: 指定毫秒值结束后会执行指定的函数
      执行一次: setTimeout(函数, 毫秒值)
      反复执行: setInterval(函数 , 毫秒值)
      清除计时器: clearInterval(定时器返回的id值. )
全局函数: 任何地方都可以使用
      parseInt(xxx):把字符串的整数,转换整数
      parseFloat(xxx):把字符串的小数,转换小数

三、文档对象DOM

DOM:文档对象模型.
浏览器会解析html , 把html加载到内存中 , 会生成DOM树.
我们可以使用DOM对象获取/改变任意元素的属性和文本.

document文档对象:

标签元素操作:
      getElementById(“id属性值”): 通过id获得一个元素.
      getElementsByTagName(“标签名称”): 根据标签名获取多个元素.返回的是数组.
      getElementsByClassName(class属性值): 根据class属性获取多个,
      getElementsByName(name属性值): 根据name属性获取多个.
      使用对象名.属性名 - - - > 获取属性值(只适用于form表单中的标签)

对象名.innerHTML = “标签体” ; 设置标签体.
对象名.innerHTML : 获取标签体.
innerText = “以文本的方式显示”

createElement(“标签名”) : 创建一个新的标签.
appendChild(“子节点”) : 添加子节点 .(追加写 , 追加到末尾.)
hasChildNodes() : 是否有子节点.true , false (空格也算子节点)
removechild(子节点对象): 删除子节点.
replaceChild(新对象 , 旧对象) : 剪切替换.
insertbefor(新对象 , 旧对象): 新节点添加到旧节点之前.
parentNode: 使用子节点属性 , 获取父节点

属性操作:

getAttribute(name) : 通过属性名获取属性值.(适用于所有的标签)
setAttribute(name,value): 设置属性值.
removeAttribute(name):删除属性.

JavaScript内置对象:

1.String对象: var s1=new String(“abc”);
　 substr(开始索引,字符个数):从开始索引开始,获取指定个数的字符
2.Date对象: var date = new Date();
   常用的方法:
      getFullYear() 从 Date 对象以四位数字返回年份。
      getMonth() 从 Date 对象返回月份 (0 ~ 11)。
      getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
3.Math对象: 可以直接调用.
4.Array数组对象:
      var arr1 = [元素1, 元素2 , 元素3 ] ; 可以存储任意类型的值.
      二维数组: 数组中的元素仍是一个数组.
      var citys = [
            [] , // 0索引 .
            [] // 1 索引
       ];
5.RegExp正则表达式对象:
      作用 : 效验字符串 .
      var reg = “/^ 规则 $/ “(不能加空格) /^1 [34578] [0-9] {9} $/
      使用test方法 , 进行效验. 符合 -> true