JavaScript不包括哪个项目以下不属于javascript的特征

转载

mob64ca140ee96c 2023-11-24 05:51:53

文章标签 JavaScript不包括哪个项目 java js json HTML 文章分类 JavaScript 前端开发

1. JavaScript介绍

1. 网景公司在Netscape2.0首先推出了JavaScript
   2. JavaScript 的正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js”
   3. JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
   4. JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释
    执行代码，不进行预编译。

js的特点

1.可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序 （后面会学习不用浏览器也能运行）
   2. 解释执行：事先不编译，逐行执行
   3. 基于对象：内置大量现成对象
   4. 适宜：
        客户端数据计算
        客户端表单合法性验证
        浏览器事件的触发
        网页特殊显示效果制作

js的组成

1.ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
2.DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
3.BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。
    。弹出新的浏览器窗口
    。移动、关闭浏览器窗口以及调整窗口大小
    。提供 Web 浏览器详细信息的定位对象
    。提供用户屏幕分辨率详细信息的屏幕对象
    。对 cookie 的支持
    。IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而
    实现ajax局部刷新技术

#变量

1. 因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var
    2. 数值类型：number
            不区分整型数值和浮点型数值
            所有数字都采用 64 位浮点格式存储，类似于double 格式
    3. 字符串：string
            首尾由单引号或双引号括起
    4. 布尔类型：
            仅有两个值：true和false也代表1和0
            实际运算中true=1,false=0
    5. 自动类型转换
            数字 + 字符串：数字转换为字符串    10+’a’ -> 10a
            数字 + 布尔值：true转换为1，false转换为0   true+5->6
            字符串 + 布尔值：布尔值转换为字符串true或false   true+’a’->truea
            布尔值 + 布尔值：布尔值转换为数值1或0  true+true->2
    6. 转换函数
            parseInt：强制转换成整数
                    如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字）
                    例如：parseInt("6.32")=6
            parseFloat：强制转换成浮点数
                    如果不能转换，则返回 NaN
                    例如：parseFloat("6.32")=6.32
            typeof：查询数值当前类型，返回 string / number / boolean / object
                    例如：typeof("test"+3)=="string"

Number对象

1. Number.fixed(2); 自带四舍五入技能

#闭包

闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。
    闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理；
    简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据的安全唯一性
    闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不 受外界干扰。
    function test1(){
          var count = 0; //局部变量
          function jia(){
         return count+=1;
         }
          return jia;
        }
        var fn = test1(); // fn => function jia(){return count+=1; }
        fn();
        fn();
        console.log( fn() ); // 每次调用方法，首先就是将变量还原为0
    直观的说就是形成一个不销毁的栈环境。
        闭包的优点： 方便调用上下文中声明的局部变量 逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题
        闭包的缺点： 因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造 成内存泄露，内存消耗很大

DOM

document.getElementById()通过id属性获取值。

<body>
	  <form action="xxx" onsubmit="return login()">
	   <p>帐号：<input id="username"/></p>
	   <p>电话：<input id="phone"/></p>
	   <p><button>登录</button></p>
	  </form>
<script>
	   function login() {
	    var name = document.getElementById("username").value ;
	    if(name == ""){
	      alert("帐号不能为空！");
	      return false; // 阻止表单的提交
	    }
	    return true; // 放行，让表单提交
	  }
  </script>
</body>

getElementsByName：通过name属性获得元素节点对象集

<body>
  <h2>我的购物车</h2>
	  <table border="1" cellspacing="0">
	   <tr>
	    <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
	    <td>名称</td>
	    <td>单价</td>
	   </tr>
	   <tr>
	    <td><input type="checkbox" name="one" />1</td>
	    <td>功能性饮料-尖叫</td>
	    <td>4.0</td>
	   </tr>
	   <tr>
	    <td><input type="checkbox" name="one" />2</td>
	    <td>火腿肠</td>
	    <td>2.0</td>
	   </tr>
	   <tr>
	    <td><input type="checkbox" name="one" />3</td>
	    <td>包子</td>
	    <td>1.5</td>
	   </tr>
  </table>
	  <p>
	   <button>提交订单</button>
	  </p>
  <script>
	   function quan(all) {
	    var arr = document.getElementsByName("one");
	    for (var i = 0; i < arr.length; i++) {
	     arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框
	   }
	  }
  </script>
</body>

getElementsByTagName：通过标签名称获得元素节点对象集

<body>
	  <table border="1" cellspacing="0">
	   <tr>
	    <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
	    <td>名称</td>
	    <td>单价</td>
	   </tr>
	   <tr>
	    <td><input type="checkbox" name="one" />1</td>
	    <td>功能性饮料-尖叫</td>
	    <td>4.0</td>
	   </tr>
	   <tr>
	    <td><input type="checkbox" name="one" />2</td>
	    <td>火腿肠</td>
	    <td>2.0</td>
	   </tr>
	   <tr>
	    <td><input type="checkbox" name="one" />3</td>
	    <td>包子</td>
	    <td>1.5</td>
  </table>
  <script>
		   var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象集合
		   for (var i = 0; i < rows.length; i++) {
		     if(i % 2 == 1){ // 奇数
		      rows[i].style.backgroundColor = "pink";
		    }
		  }
  </script>
</body>

DOM修改

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容

document.getElementById("hello").innerHTML = "";

2.改变 CSS 样式

document.getElementById("hello").style.fontFamily = "华文彩云";

3.改变 HTML 属性，创建新的 HTML 元素

function add(){
      var img = document.createElement("img"); // <img>
      img.setAttribute("src","../lagou-html/img/cat.gif"); // <img
src="../lagou-html/img/cat.gif">
      img.setAttribute("title","小猫咪"); // <img src="../lagou-
html/img/cat.gif" title="小猫咪">
      img.setAttribute("id","cat"); // <img src="../lagou-
html/img/cat.gif" title="小猫咪" id="cat">
      var divs = document.getElementsByTagName("div");
      divs[0].appendChild(img);
   }

4.删除已有的 HTML 元素

var img = document.getElementById("cat");
    img.parentNode.removeChild(img);  // 必须通过父节点，才能删除子节点

事件

窗口事件

onload 当文档被载入时执行脚本
        <body onload="test()">
         <script>
          function test() {
           document.write("哈哈哈哈");
          }
         </script>
        </body>

表单元素事件

onblur 当元素失去焦点时执行脚本
    onfocus 当元素获得焦点时执行脚本

鼠标事件

onclick 当鼠标被单击时执行脚本
    ondblclick 当鼠标被双击时执行脚本
    onmouseout 当鼠标指针移出某元素时执行脚本
    onmouseover 当鼠标指针悬停于某元素之上时执行脚本

键盘事件

onkeydown 按下去
    onkeyup 弹上来

事件冒泡

先子，后父。事件的触发顺序*自内向外*，这就是事件冒泡；

事件捕获

先父,后子。事件触发顺序变更为*自外向内*，这就是事件捕获；

面向对象OOP

var user = {
	username : "孙悟空",
	age : 527,
	say : function(){
	console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！");
}
};
user.say();

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

BOM操作

就是javascript对浏览器的一些常规操作的方法

window对象

JavaScript不包括哪个项目以下不属于javascript的特征_HTML

<button onclick="kai()">极速入职</button>
<script>
  function kai(){
    window.open("http://lagou.com" , "拉勾网" ,
"width=500,height=300,left=400");  
    // window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才
生效   
}
</script>

screen屏幕对象

我想知道我的电脑屏幕多大？实际上，得到的就是分辨率

<body>
		  <button onclick="kai()">求大小</button>
		 </body>
		 <script>
		  function kai() {
		   alert(window.screen.width + "|" + window.screen.height);
 }
 </script>

location定位

包含有关当前 URL 的信息，通常用来做页面跳转

<button onclick="test()">测试</button>
<script>
  function test(){
    console.log( "当前页面的URL路径地址："+ location.href );
    location.reload(); // 重新加载当前页面（刷新）
    location.href = "http://lagou.com";  // 跳转页面
 }
</script>

history浏览器历史

history对象会记录浏览器的痕迹

存储对象

用起来和我们在java中map很相似，都是键值对的方式存数据

保存数据
localStorage.setItem("name","curry");
提取数据
localStorage.getItem("name");
删除指定键的数据
localStorage.removeItem("name");

计时操作

周期性定时器 setInterval

<body>
  <h1 id="title">拉勾网：极速入职</h1>
  <script>
   var colors = ["red","blue","yellow","pink","orange","black"];
   var i = 0;
   function bian(){
    document.getElementById("title").style.color = colors[i++];
    if(i == colors.length){
      i = 0; // 颜色重新开始
   }
  }
   setInterval(bian,100); // 每隔0.1秒，执行一次bian函数
  </script>
</body>

停止定时器 clearInterval

<body>
  <img id="tu" src="../lagou-html/img/1.jpg" width="50%" />
  <br />
  <button onclick="begin()">开始</button>
  <button onclick="stop()">停止</button>
  <script>
   var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
   function begin() {
    timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量
  }
   function stop() {
    clearInterval(timer); // 停止定时器
  }
   function bian() {
    var i = Math.floor(Math.random() * arr.length); // 0-4
    document.getElementById("tu").src = "../lagou-html/img/" + arr[i];
  }
  </script>
</body>

一次性定时器 setTimeout

相当于延迟的效果，只执行一次

<script>
 function bian(){
   document.body.style.backgroundColor = "red";
 }
 //3秒之后调用
 setTimeout(bian,3000);
</script>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：python kafka不同group一个topic kafka多个topic

下一篇：java 后端怎么获取前端的端口号前端调取后端接口

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

JavaScript不包括哪个项目 以下不属于javascript的特征

JavaScript不包括哪个项目 以下不属于javascript的特征

1. JavaScript介绍

js的特点

js的组成

Number对象

DOM

DOM修改

事件

窗口事件

表单元素事件

鼠标事件

键盘事件

事件冒泡

事件捕获

面向对象OOP

JSON

BOM操作

window对象

screen屏幕对象

location定位

history浏览器历史

存储对象

计时操作

周期性定时器 setInterval

停止定时器 clearInterval

一次性定时器 setTimeout

51CTO博客

JavaScript不包括哪个项目以下不属于javascript的特征

JavaScript不包括哪个项目以下不属于javascript的特征