• web前端——javaScript

    目录

    一、javaScript概述

    1.javaScript历史

    2.JavaScript与html,css关系

    二、基本语法

    ①放在head中 

    ②放在 body中  

    ③写在外部的.js文件中

    1.变量

    2.数据类型

    3.算术运算符 

    4.逻辑运算符

    5.赋值运算 

    6.逻辑运算符 

    7.条件运算符

    8.控制语句 

    三、函数

    1.函数定义的基本语法

    2.函数调用

    3.全局函数

    四、内置对象

    1.String字符串

    2.Array数组

    3.Date

    4.Math 

    五、事件

    六、Html DOM对象

    1.Html DOM概述

     2.查找元素

     3.改变HTML

     4.改变CSS

    七、计时

    一、javaScript概述

    1.javaScript历史

    ● JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言。

    ● Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,而且无需编译，可由浏览器直接解释运行。

    ● Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript

    ● JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能 （javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

    2.JavaScript与html,css关系

    JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互，弥补了HTML的缺陷

    二、基本语法

    脚本写在哪里？

    javaScript脚本写在一组

    3.全局函数

    • parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串， 则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN” 
    • parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN” 
    • typeof (arg)返回arg值的数据类型
    • eval(arg) 可运算某个字符串 
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script>
    7. 		//①无参构造方法
    8. 	    /*
    9.         function test(){
    10. 			alert("你好");
    11. 		} */
    12. 		//②有参构造方法
    13. 		/* 
    14. 		function test(a,b,c){
    15. 			alert(a+":"+b+":"+"c");
    16. 		}
    17. 		*/
    18. 		//有返回值
    19. 		/* 
    20. 		 function test(a,b){
    21. 			 return a+b;
    22. 		 }
    23. 		 */
    24. 	   //函数调用
    25. 	 /*  test(); 
    26. 	   
    27. 	   test(true,"abc",new Date()); 
    28. 	   
    29. 	   var c = test(10,23);
    30. 	   alert(c); */
    31. 	   
    32. 	   //系统中的全局函数 在系统已经定义好了，直接调用的函数
    33. 	   //alert(输出内容); 弹窗显示
    34. 	   
    35. 	    var a = 10.5;
    36. 		var b = "10.5";
    37. 		var c = 5;
    38. 		alert(parseInt(a));//把浮点数转为整数
    39. 		alert(parseInt(b)+c);//把字符串更换转换成整数, 如果转换的内容是字符串,字母不能开头, 只将开头的数字部分转换
    40. 		alert(parseFloat(c));
    41. 		alert(parseFloat(b));	
    42. 		alert(typeof(a));
    43. 		alert(typeof(b)); //typeof(变量)  获取变量的数据类型
    44. 		var s = "2+3*2"; var s = 2+3*2;
    45. 		var s = "alert(a)";
    46. 		eval(s);//把传入进来的字符串可以当做js脚本执行		
    47. 		script>
    48. 	head>
    49. 	<body>
    50. 	body>
    51. html>

    四、内置对象

    1.String字符串

    ●属性
    length 用法：返回该字符串的长度
    ●方法
    charAt(n) ：返回该字符串位于第 n 位的单个字符
    indexOf(char) ：返回指定 char 首次出现的位置
    lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找
    substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从 start 位置到end 位置的前一位置的一段 .
    substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从 start 位置开始，长度为length 的一段
    split( 分隔符字符 ) ：返回一个数组，该数组是从字符串对象中分离开来的， < 分隔符字符> 决定了分离的地方，它本身不会包含在所返回的数组中
    例如：'1&2&345&678'.split('&')返回数组：1,2,345,678

    2.Array数组

    数组的定义方法：
      var <数组名> = new Array();
    这样就定义了一个空数组，以后要添加数组元素，就用：
      <数组名>[下标] = 值;
    如果想在定义数组的时候直接初始化数据，请用：
      var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);
    还可以
      var <数组名> = [<元素1>, <元素2>, <元素3>...];
    ●属性
    length ：数组的长度，即数组里有多少个元素
    ●方法
    join(<分隔符>) ： 返回一个字符串，该字符串把数组中的各个元素串起来，用 < 分隔符> 置于元素与元素之间
    reverse()： 使数组中的元素顺序反过来。如果对数组 [1, 2, 3] 使用这个方法，它将使数组变成：[3, 2, 1]
    sort() ： 使数组中的元素按照一定的顺序排列。如果不指定 < 方法函数 > ，则按字母顺序排列
    对数字排序需要调用排序函数
    function sortNumber(a,b){
      return a - b;
    }

     3.Date

    ● 获取日期

    new Date() 返回当日的日期和时间
    getFullYear() 返回四位数字年份
    getDate() 返回一个月中的某一天 (1 ~ 31)
    getMonth() 返回月份 (0 ~ 11)
    getDay() 返回一周中的某一天 (0 ~ 6)
    getHours() 返回 Date 对象的小时 (0 ~ 23)
    getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
    getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

    4.Math 

    ● Math 对象，提供对数据的数学计算

    ● 属性

    PI 返回π（3.1415926535...)

    ● 方法 

    Math.abs(x) 绝对值计算；
    Math.pow(x,y) 数的幂；x的y次幂
    Math.sqrt(x) 计算平方根；
    Math.ceil(x) 对一个数进行上舍入
    Math.floor(x) 对一个数进行下舍入。
    Math.round(x) 把一个数四舍五入为最接近的整数
    Math.random() 返回 0 ~ 1 之间的随机数
    Math.max(x,y) 返回 x 和 y 中的最大值
    Math.min(x,y) 返回 x 和 y 中的最小值 

    五、事件

    ● 一些常用的事件

    onclick()鼠标点击时；
    onblur()标签失去焦点;
    onfocus()标签获得焦点;
    onmouseover()鼠标被移到某标签之上;
    onmouseout鼠标从某标签移开;
    onload()是在网页加载完毕后触发相应的的事件处理程序;
    onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

    六、Html DOM对象

    1.Html DOM概述

    ● DOM是Document Object Model文档对象（网页中的标签）模型的缩写
    ● 通过html dom，可用javaScript操作html文档的所有标签

     2.查找元素

    ● 通常，通过 JavaScript，您需要操作 HTML 标签
    ● 为了做到这件事情，您必须首先找到该标签
    ● 要操作，先得到
    ● 有四种方法来做这件事：
    ①通过 id 找到 HTML 标签
    document.getElementById(“id");
    ②通过标签名找到 HTML 标签
    document.getElementsByTagName("p");
    ③通过类名找到 HTML 标签
    document.getElementsByClassName("p");
    ④通过name找到 HTML 标签
    document.getElementsByName(“name");

     3.改变HTML

    ● Html dom允许javaScript 改变html标签的内容

      • 改变 HTML 标签的属性
      document.getElementById(“username").value=“new value";
      document.getElementById("image").src=“new.jpg";
      • 修改 HTML 内容的最简单的方法时使用 innerHTML 属性
      document.getElementById( “div”).innerHTML= new HTML  

     4.改变CSS

    ● html dom允许 javaScript改变html标签的样式
    语法：
    document.getElementById("id").style.property=new style;
    例：
    document.getElementById("p2").style.backgroundImage="url(bg.jpg)";

    七、计时

    ● 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件
    ●  方法
      setTimeout(“函数”,”时间”)未来的某时执行代码
      clearTimeout()取消setTimeout()
      setInterval(“函数”,”时间”)每隔指定时间重复调用
      clearInterval()取消setInterval() 
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script>
    7. 			function hello(){
    8. 				console.log("下午好");
    9. 			}
    10. 			/* var t = setTimeout("hello()",5000);//设定指定时间后调用指定的函数，只调用一次 */
    11. 			var t;
    12. 			function startTime(){
    13. 				t = setInterval("hello()",1000);
    14. 			}
    15. 			function stopTime(){
    16. 				/* clearTimeout(t);//取消定时器 */
    17. 				clearInterval(t);
    18. 			}
    19. 		script>
    20. 	head>
    21. 	<body>
    22. 		<input type="button" value="开始" onclick="startTime()"/>
    23. 		<input type="button" value="停止" onclick="stopTime()"/>
    24. 	body>
    25. html>

  • 相关阅读:
    java运算符
    2022-08-06 学习日记（26th day）集合框架---Set
    Transformer 系列 Interpret Vision Transformers as ConvNets with Dynamic Convolutions 论文阅读笔记
    2022-2023罗戈物流行业年度报告，物流人必看报告！
    重温设计模式之什么是设计模式？
    【文末送书】计算机网络编程 | epoll详解
    less与sass
    如何在filters中使用data中数据？
    编译器优化丨Cache优化
    自定义指令下拉菜单隐藏
  • 原文地址：https://blog.csdn.net/m0_70830675/article/details/139576557