javaweb之前端JavaScript学习笔记（一）基本语法

最新推荐文章于 2023-07-02 22:11:28 发布

mocas_wang

最新推荐文章于 2023-07-02 22:11:28 发布

阅读量468

点赞数 1

分类专栏： javaWeb

本文链接：https://blog.csdn.net/mocas_wang/article/details/105688169

版权

javaWeb 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

Javascript的介绍

Javascript：基于对象和事件驱动的语言，应用与客户端（脚本语言）
基于对象->提供好了很多对象，可以直接拿过来使用
事件驱动->html做网站静态效果，js动态效果
客户端：专门指的是浏览器
注：浏览器中的控制台可以调试js代码（区分大小写，html不区分）

js特点：

交互性->信息的动态交互
安全性->js不能访问本地磁盘的文件
跨平台性->支持js的浏览器都可以运行

javscript与java的区别

(1)不同公司开发的，是不用的语言
(2)js是基于对象的，Java是面向对象 //？对象和面向对象的区别
(3)java是强类型的语言，js是弱类型的语言
(4)js只需要解析就可以执行，而java需要先编译成字节码文件，再执行

javascript的组成（三部分）

（1）ECMScript
ECMA：欧洲计算机协会
由ECMA组织指定的js的语法，语句…
（2）BOM
brower object model：浏览器对象模型
（3）DOM
document objct model：文档对象模型

js与html的两种结合方式

1.使用一个标签

scpript标签的位置：一般放在</body>后面，以免产生对象为空的错误（浏览器还未解析到js中所使用的对象的哪一行）

<body>
	<script type="text/javascript">
		//js代码，例如向页面弹出一个框，显示内容
		alert("弹窗");
	</script>
<body>

2.使用script标签，引入一个外部的js文件（此时script标签里的代码不会执行，只执行js文件的代码）

<script type="text/javascript" src="1.js"> </script>

js的原始类型和声明变量

1.原始类型：string(字符串),number(数字类型),boolean(true和false)
null:获取对象的引用，null表示对象引用为空，所有对象的引用也是Object
undifined:定义一个未赋值的变量
2.定义变量关键字：var
typeof()运算符：可以查看变量的类型

<script type="text/javascript">
		var str = "abc";//string
		var mm = 123;//number
		var flag = true;//boolean
		var date = new Data();//null
		var x;//undifined
		alert(typeof(str));
</script>

js语句

if判断语句（同java中的if-else语句）
switch语句（js中switch支持所有的原始类型，区别于java）

switch(a){
		case:1
			alert("2");
		case:2
			alert("2");
		default:
			alert("other");
	}

循环语句（for,while）

while(i>1){
		alert(i);
		i--;//i++和++i与java中的一样
	}
for(var mm=0;mm<=5;mm++){
		alert(mm);
	}

js的运算符

基本操作和java相同，以下为不同的地方：
1.在js里面不区分整数和小数，123/1000=0.123（java里等于零）
2.数字字符串，相加的时候和java一样（“123”+1->1231），相减时做的是数字的相减运算（“123”-1->122）（不是数字字符串时提示NaN）
3.boolean类型（true：1，false：0）
4. ==和===的区别：==比较的是值，===比较的是值和类型
5.直接向页面输出语句（可以输出变量，固定值和标签代码）

document.write("aaaa");
document.write("<br/>");//设置标签属性时，标签属性值使用单引号

js的数组

数组的定义方式：
(1)var arr = {1,2,“3”,true};//可以存放不同的数据类型
(2)var arr1 = new Array(5);//使用内置对象Array对象,未存放数据
(3)var arr2 = new Array(6,7,8);//使用内置对象Array，并存入六个元素6，7，8
数组的属性：arr.length;//获取数组的长度

二维数组

//定义二维数组
var arr0=new Array(3);
arr0[0]=["中国","南京","西安","苏州","杭州"];
arr0[1]=["德国","柏林","慕尼黑","狼堡","法兰克福"];
arr0[2]=["美国","纽约","华盛顿","休斯顿","底特律"];
var arr1=arr0[0]; //取得第一列，arr1是一维数组
var firstval=arr1[0]; //这个是数值，对应国家名称

js的函数

定义函数的三种方式：
1.使用到关键字function

function 方法名(参数1,参数2,...) {//参数直接用参数名称
		方法体;
		返回值;//可有可无
	}

2.匿名函数

var add = function(参数列表){}

3.适用到js里面的内置对象：Function

var add = new Function("参数列表","方法体和返回值");

方法的重载：
重载->方法名相同，参数不同
重写->方法名相同，参数相同
js的函数不存在重载，会调用方法名相同的最后一个方法
模拟重载的方法：

function add(){//所有传入的参数都会存到arguments数组中
		if(arguments.length==2)//传入参数为2个
			return arguments[0]+arguments[1];
		if(arguments.length==3)//传入参数为3个
			return arguments[0]+arguments[1]+arguments[2];
			
	}
add(1,2);
add(1,2,3);

全局函数

js的全局函数：不属于任何一个对象，通过方法名称直接使用
常用方法：
eval();//执行字符串中的js代码
encodeURI();/decodeURI();//对字符进行编码/解码
encodeURIComponent();/decodeURIComponent();//与上面两个方法相同，编码的字符数量不同
isNaN();//判断当前字符串是否为数字
parseInt();//类型转换

$(function() {}) 是$(document).ready(function()的简写, 这个函数什么时候执行的呢？

答案：DOM 加载完毕之后执行。

DOM 在第一次页面加载完毕后，就在内存里了，无论后面怎么通过 ajax 的方式去局部修改 html 页面，都只是对内存中的 DOM 树进行修改，而 DOM在第一次页面加载完毕后就已经加载完毕了。

所以后面 js文件（动态加载或者 head 中加载）再使用到 $(function() {}) 函数肯定会执行的。