JavaScript基础

最新推荐文章于 2022-11-02 12:49:00 发布

劉某人゜

最新推荐文章于 2022-11-02 12:49:00 发布

阅读量197

点赞数

分类专栏：前端文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_44953728/article/details/102899388

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一.JS概述

1.什么是JavaScript

JavaScript是运行在浏览器端的脚本语言，它不需要编译,通过浏览器解释就可以执行.

它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言

2.JS的作用

HTML与用户没有交互的功能，网页只能看，不能操作。 JavaScript用来制作web页面交互效果，提升用户体验。
web前端三层来说：
结构层 HTML : 从语义的角度，描述页面结构
样式层 CSS : 从审美的角度，美化页面
行为层 JavaScript : 从交互的角度，提升用户体验

3.Java和JS比较

在这里插入图片描述

4.JS的组成部分

在这里插入图片描述

ECMAScript核心: js基本语法,数据类型,语句,函数(方法)…
BOM:定义了一组和浏览器相关的方法和接口. 说白了就是控制浏览器的
DOM:定义了一组操作文档(HTML)的方法和接口. 操作HTML

二.JS和HTML的整合

在 HTML 页面中插入 JavaScript,有两种方式:

1.内嵌式

通过script标签即可,可以放在任意位置.
把JS代码和HTML标签定义在同一个文件里面

<script>
	alert("程序猿");
</script>

2.外联式

定义一个js文件,扩展名是js
通过script标签引入

<script type="text/javascript" src="../../js/test.js" >
	//js代码不会执行(不要写代码)
</script>

属性:
	src:js文件路径
注意:
	通过外部引入,script标签里面的js代码不会执行

3.JS基本语法

3.1变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 var

int a = 3;			var a = 3;
String str = "10";  var str = "10"
...

注意:
	1.var可以省略不写,建议保留    	 eg: var a =3; 或者 a = 3;
	2.最后一个分号可以省略,建议保留     eg: var a =3; 或者 var a = 3
	3.同时定义多个变量可以用","隔开，公用一个‘var’关键字. eg: var a=1, b=2,c="aa";

3.2数据类型

1.五种原始数据类型
在这里插入图片描述
2.typeof操作符

作用：用来判断变量是什么类型
写法：typeof(变量名) 或 typeof 变量名
null与undefined的区别：
null: 对象类型，已经知道了数据类型，但对象为空。
undefined：未定义的类型，并不知道是什么数据类型

3.字符串转换成数字类型

全局函数(方法)，就是可以在JS中任何的地方直接使用的函数，不用导入对象。不属于任何一个对象

3.3 运算符

关系运算符:>,>= ,< ,<=
number类型和字符串做-,*,/的时候,字符串自动的进行类型转换,前提字符串里面的数值要满足number类型

var i = 3;
var j = "6";
alert(j-i);//结果是3, "6" ==> 6  
alert(j*i);//结果是18, 
alert(j/i);//结果是2,

除法,保留小数

var i = 2;
var j = 5; 
alert(j/i);

== 比较数值,=== 比较数值和类型

var i = 2;
var j = "2"; 
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false

3.4 语句

for循环

  //99乘法表
  <script>
    for(var i = 1; i<=9 ; i++){
    	for(var j =1; j <= i;j++){
    		document.write(j+""+i+"="+ji);
    		//空格
    		document.write("&nbsp");
    	}
    	//换行
    document.write("<br />");
   }
 </script>

if… else

var a = 6;
if(a==1)
{
    alert('语文');
}
else if(a==2)
{
    alert('数学');
}
else
{
    alert('不补习');
}

switch

<script>
	var str = "java"; 

	switch (str){
		case "java":
			alert("java");
			break;
		case "C++":
			alert("C++");
			break;

		case "Android":
			alert("Android");
			break;	}
</script>

三.JS函数

函数就是重复执行的代码。

1.有函数名的函数

语法:
function 函数名(参数列表){
  函数体
}

注意:
	1.不管有没有返回值,函数格式是一样的 function 函数名(参数列表){函数体}
	2.如果有参数,参数不需要加var关键字(不需要加类型)
	3. JS中函数是没有重载的,后面的会把前面给覆盖掉

2.匿名函数

//【存在的形式 1.作为方法的参数(JQ里面用的特别多)  2.前面需要通过一个变量接收或者前面写事件绑定】
var sum = function(a,b) {
  return a+b;
}

console.log(sum(10,20));

四.JS事件总结

在这里插入图片描述

六.BOM总结

1.概述

Browser Object Model ,为了便于对浏览器的操作，JavaScript封装了对浏览器中各个对象，使得开发者可以方便的操作浏览器中的各个对象。
在这里插入图片描述

2.BOM里面的五个对象

2.1window: 窗体对象

方法	作用
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout()	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 Interval()。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。