JS

最新推荐文章于 2022-12-01 21:45:00 发布

FREE学Java

最新推荐文章于 2022-12-01 21:45:00 发布

阅读量238

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/qq_46546904/article/details/109232994

版权

笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

JS

1.javascript语言的特点

1 解释执行的脚本语言
	它的基本结构形式与c、c++、java十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它是需要嵌入到html页面中,让浏览器来解释执行的。 

2 基于对象的语言     
	javascript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象.(没有java面向对象纯正)
	new Date();

3 简单性
	它是一种基于java基本语法语句和控制流之上的简单而紧凑的设计， 基本java中的语法都可以使用到javascript中,所以对于学过java语言的情况下,学习javascript也相对比较简单.

4 弱语言
	javascript的语法松散要求不严谨,比如:一个变量在之前没有声明的情况下就可以直接使用,声明变量的时候也可以不声明变量的类型等.

5 事件驱动
	我们在页面上的操作,例如 左键/右键的单击、双击,键盘上面的按键的监听，鼠标的移动 鼠标拖拽 鼠标滚轴的滚动等等事件的响应处理都可以交给javascript 

6 动态性
	javascript可以直接对用户或客户输入做出响应，无须经过web服务程序.
7 安全性
	javascript不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 
8 跨平台性
	javascript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可正确执行,但是不同浏览器以及同一浏览器的不同版本对javascript的支持是不同的(浏览器的兼容性)

2.在页面中使用javascript的作用

1.改进网页的设计布局(操作页面中的标签元素)
2.验证表单
3.检测浏览器、控制浏览器的行为
4.创建cookies
5.处理页面中触发的事件
6.在使用ajax的时候也要用到javascript

3.javascript在页面中的位置

1.直接写到页面中
	须位于 <script> 与 </script> 标签之间,放置在 HTML 页面的 <body> 或者 <head> 标签中:
	    <script type="text/javascript">
			//在这里写JS代码
		</script>
	注意:js代码所写的位置会影响到代码的执行效果
2.写到标签元素的事件属性里面
	<div onclick="javascript:alert('hello world')">
3.写到一个外部的文件里面(.js结尾的文件)
	写到一个js文件中,然后哪个页面使用就引入过来,类似于css样式表的引用
	例如:
	<script type="text/javascript" src="js/test1.js"></script>

4.javascript中的注释
1 单行注释
//注释
2 多行注释
/*
多行注释
多行注释
*/

5.javasrcipt中的标示符(变量名):
大小写敏感
不能以数字开头
可以由字母、数字、下划线、$符号组成
不能是javascript中的关键字

6.javascript中声明变量:
任何类型的变量都可以用var关键字来声明.
var a = “”;
var b = 10;
var c = 10.9;
var d = new Date();
var e = true;

7.javascript中的null和undefined
//弹出null
var age = null;
alert(age);
//弹出undefined (根据浏览器来定)
var age;
alert(age);

8.javascript中的数据类型
字符串（String）、数字(Number)、布尔(Boolean)
对象(Object)、空（Null）、未定义（Undefined）。

对象(Object)中又包含Function、Array、Date以及自定义对象。

注意:可以使用全局函数typeof()来判断一个变量的数据类型,只能判断基础数据类型。对于使用内置构造函数创建的对象，均返回object

1 JavaScript 拥有动态类型的特点。这意味着相同的变量可用作不同的类型：
	例子:
	var x;               // x 为 undefined
	var x = 5;           // 现在 x 为数字
	var x = "John";      // 现在 x 为字符串
	
2 字符串 String
	字符串可以是引号中的任意文本。可以使用单引号或双引号：
	var name="tom";
	var name='tom';
	
	可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
	var v="He is called 'tom'";
	var v='He is called "tom"';
	
	字符串对象的常用方法:
	var s = "hello world";
	document.write("<h1>字符串对象</h1>")
	//获得字符串的长度
	document.write(s.length+"<br>");
	//从下标为3的位置开始,截取4个字符,包括下标为3的位置的字符
	document.write(s.substr(3,4)+"<br>");
	//从下标为6的位置开始截取,截取到下标为8的位置,但是不包括下标为8的字符[6,8)
	document.write(s.substring(6,8)+"<br>");
	//trim()去掉字符串俩边的空格,但是这个方法有可能浏览器不支持.
	document.write(s.trim().length+"<br>");
	//字符串转换为大写
	document.write(s.toUpperCase()+"<br>");
	//字符串转换为小写
	document.write(s.toLowerCase()+"<br>");
	//分割字符串 返回一个数组
	document.write(s.split(" ")+"<br>");
	document.write(s.split(" ").length+"<br>");
	document.write(s.split(" ")[0]+"<br>");
	document.write(s.split(" ")[1]+"<br>");
	//字符串拼接
	concat()、join()
	
	注意:javascript中的转义符和java的一样也是\

3 数字 Number
	JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
	var x1=34.00;      //使用小数点来写
	var x2=34;         //不使用小数点来写
	
	极大或极小的数字可以通过科学（指数）计数法来书写：
	var y=123e5;      // 12300000
	var z=123e-5;     // 0.00123
4 布尔
	布尔（逻辑）只能有两个值：true 或 false。
	var x=true;
	var y=false;
5 数组 Array
	javascript中数组的特点:
	1.数组的长度是可变的
	2.数组里面放的数据类型也可以不同
	3.数组的长度是和你所使用到的数组中最大下标相关联的.

	//创建数组的时候,可以指定长度也可以不指定
	//var a = new Array(4);
	//var a = [1,3,4,"tom"];
	var a = new Array();

	a[0] = "tom0";
	a[1] = "tom1";
	a[2] = "tom2";
	a[6] = "tom6";

	document.write(a.length+"<br>");

	//普通循环
	for(var i=0;i<a.length;i++){
		document.write(a[i]+"<br>");
	}

	tom0
	tom1
	tom2
	undefined
	undefined
	undefined
	tom6

	数组中添加元素和移除元素
	push(...)、pop()

	反转数组元素顺序：
	reverse()

6 空（Null）、未定义（Undefined）
//null
var name = null;
//Undefined
var age;

7 对象 Object
javascript中{}可以代表对象
javascript已经存在的类型的对象
var v = new Date();
var obj1 = new Object(), obj2 = {};//Object 对象
var arr1 = new Array(), arr2 = [];//Array 对象
var boo1 = new Boolean(true), boo2 = true;//Boolean 对象
var num1 = new Number(123), num2 = 123.45;//Number 对象
var str1 = new String(“abc”), str2 = ‘abc’;//String 对象
8 自定义的对象:
var person={firstname:“John”, lastname:“Doe”, id:5566};
alert(person.firstname);
alert(person.lastname);
alert(person.id);

9.javascript中的对象、属性、方法/函数
对象、属性、方法基本和java的中的理解保持一致.
特别的对javascript中的方法/函数稍作说明:
1 形式
//无参的
function test1(){

	}
	//有参的
	function test2(name){

	}
	//多个参数的
	function test3(v1,v2){
		alert(v1+v2);
	}
	//有返回值的
	function test4(v1,v2){
		return v1+v2;
	}
	//匿名函数
	function(){
		//....
	}

2 位置
	定义在<script>标签中或者是外部的.js文件中
	注意:定义函数并不是执行函数

3 调用
	在<script>标签中调用定义的函数
		例如:可以先调用后定义
		<script type="text/javascript">
			function test(){
				alert("hello world");
			}
			test();
		</script>
	在html元素的事件属性中调用定义过的函数
		例如:可以先调用后定义
		<script type="text/javascript">
			function test(){
				alert("hello world");
			}
		</script>

		<input type="button" value="点击" onclick="test()" />

10.javascript中的三种弹框：
alert 提示框/警告框
confirm 确认框
prompt 输入对话框

这三个方法都是window这个对象的方法.window是JS中的一个内置对象,只有window对象的方法,调用的时候才可以省去对象的名字,直接用方法名字来调用window.alert("hello")和alert("hello")是一样的效果.

这三种弹框都有一个共同的特点,当浏览器运行一个弹框代码的时候,用户如果不点击弹框中的确定或者取消按钮的话,浏览器就会卡这个弹框处,下面的页面代码就不会被执行.

alert弹出一个警告框/提示框,用户点击确定按钮之后就可以继续访问。

confirm弹出一个确认框,用户可以点击确定或者取消,这个confirm方法会相应的返回true或者false.

prompt弹出一个可以让用户输入的框口,用户输入后点击确定,这个方法会把用户输入的内容返回.
prompt("请输入你的性别:");
同时还可以在输入框设置一个默认值.
prompt("请输入你的性别:","男");

如果用户什么都没输入，直接确定，那么方法返回值为""
如果用户取消，则方法返回值为null

11.javascript html dom
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
在页面中用document来表示浏览器创建出来的文件对象模型.

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

在做这些事情之前必须要先找到当前的这个元素对象.

1 查找 HTML 元素
	
	通过 id 找到 HTML 元素
		document.getElementById("...");
		返回某一个元素对象,默认id是唯一的
	通过name找到 HTML 元素
		document.getElementsByName("...");
		返回一个集合
	通过标签名找到 HTML 元素
		document.getElementsByTagName("...");
		返回一个集合
	通过class找到 HTML 元素
		document.getElementsByClassName("...");
		返回一个集合
2 找到元素之后干什么
		1.改变元素中的内容
			利用innerHTML 或者 value来改变元素中显示的内容	
		2.改变元素的属性
			document.getElementById("image").src="2.jpg";
			<img id="image" src="1.jpg"></img>
		3.改变元素的css样式
			document.getElementById("p1").style.color="blue";
			<p id="p1">今天天气很好.</p>
		4.给元素添加事件处理(覆盖之前的事件)
			document.getElementById("myBtn").onclick=function(){
				//...
			};

		5.给元素添加事件监听(不覆盖之前的事件)
			document.getElementById("myBtn").addEventListener("click",function(){.....});
		6.添加或删除元素
			添加:
				//创建新元素对象 <p></p>
				var para=document.createElement("p");
				//创建文本节点
				var node=document.createTextNode("大家好");
				//把文本节点添加到<p></p>中
				para.appendChild(node);
				//获得指定div
				var element=document.getElementById("div1");
				//把<p></p>添加到div中
				element.appendChild(para);
			删除:
				<div id="div1">
					<p id="p1">大家好</p>
					<p id="p2">你们好</p>
				</div>
				
				<script>
					var parent=document.getElementById("div1");
					var child=document.getElementById("p1");
					parent.removeChild(child);
				</script>

12.javascript中的事件

	onblur 在对象失去输入焦点时触发。
	onfocus 当对象获得焦点时触发
	onchange 当对象或选中区的内容改变时触发。
	onclick 在用户用鼠标左键单击对象时触发。
	ondblclick 当用户双击对象时触发。
	onkeydown 当用户按下键盘任何按键时触发。
	onkeypress 当用户按下字母数字键时触发。
	onkeyup    当用户按下并释放键盘按键时触发
	onmousedown 当用户用任何鼠标按钮单击对象时触发。
		function test(event){
			//event.button=0 左键
			//event.button=1 中键
			//event.button=2 右键
		}
		<input type="button" value="点击" onmousedown="test(event)" />

	onmousemove 当用户将鼠标划过对象时触发。
	onmouseout 当用户将鼠标指针移出对象边界时触发。
	onmouseover 当用户将鼠标指针移动到对象内时触发
	onreset  当用户重置表单时触发
	onsubmit 当表单将要被提交时触发。
	onload   在浏览器完成对象的装载后立即触发。
	onunload  在浏览器完成对象的卸载后立即触发。

13.表单验证

<form action="" onsubmit="return jsCheck()">
		<input type="text" name="name" /><br>
		...
		..
		..
		..
		<input type="submit" value="提交" />
</form>

注意:onsubmit="return jsCheck()"表示表单提交之前先调用jsCheck()这个函数进行验证,然后jsCheck()返回true表示通过验证,则表单可以继续提交,返回false表示验证失败,表单不能提交.

注意:javascript代码也可以提交表单:
	document.forms.myForm.submit();

FREE学Java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS

JS1.javascript语言的特点1 解释执行的脚本语言它的基本结构形式与c、c++、java十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它是需要嵌入到html页面中,让浏览器来解释执行的。 2 基于对象的语言 javascript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象.(没有java面向对象纯正) new Date();3 简单性它是一种基于java基本语法语句和控制流之上的简单而紧凑的
复制链接

扫一扫