Js学习----基础知识

1、JavaScript：写入Html进行输出

document.write("<h1>我是Jason,Js输出测试成功!</h1>");

ps：您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

解释:

<html>   
<meta charset='utf-8'>
<body>   
<p>helloworld</p>   
<button onclick='javascript:myFunction()'>hello</button>  
<script>   
function myFunction(){   
    document.write('这下应该会清除了吧？');   
}   
</script>   
</body>   
</html>

点击“hello”按钮，原“helloworld”文字被覆盖!

2、JavaScript：对事件作出反应

<button onclick="alert('Welcome to Jason World')">点击</button>

3、JavaScript：改变 HTML 内容

function changeContext(){
	x=document.getElementById("demo");//寻找元素
	x.innerHTML="Dasiy";//改变内容，innerHTML中的‘HTML’必须全为大写
}
</script>
<div id="demo">Jason</div>
<button type="button" onclick="changeContext()">点击</button>

4、JavaScript：改变 HTML 图片

<script>
function changeImage(){
	element = document.getElementById("myimage");
	if(element.src.match('bulbon')){//match，字符串中检索指定的值
		element.src = "/i/eg_bulboff.gif";
	}else{
		element.src = "/i/eg_bulbon.gif";
	}
</script>
<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

5、JavaScript:改变HTML样式

<p id="demo">JavaScript 能改变 HTML 元素的样式。</p>
<script>
function myFunction(){
	element=document.getElementById("demo") // 找到元素
	element.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击</button>

6、JavaScript:验证输入

<input id="demo" type="text">
<script>
function myFunction(){
	element = document.getElementById("demo");
	inputVal = element.value;
	if(inputVal=="" || isNaN(inputVal)){
		alert("Not Numeric");
	}
}
</script>
<button onclick="myFunction()">点击</button>

7、外部引入js脚本，不能加入<script></script>标签

<script src="./test.js"></script>
<input id="demo" type="text">
<button onclick="myFunction()">点击</button>

8.JavaScript对大小写敏感!!!!

9、对代码进行拆行处理

<script>
document.write("Hello \
World!");
</script>

10、JavaScript 变量
①变量必须以字母开头
②变量也能以 $ 和 _ 符号开头阿（不过我们不推荐这么做）
③变量名称对大小写敏感（y 和 Y 是不同的变量）

提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。

11、JavaScript 数据类型

当您向变量分配文本值时，应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

12、声明变量

var carname或者var carname="Volvo";

一条语句，多个变量

var name="Gates", age=56, job="CEO";

重新声明 JavaScript 变量

var carname="Volvo";

var carname;

如果重新声明 JavaScript 变量，该变量的值不会丢失：carname的值仍然是Volvo

提示：一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。

13、JavaScript数据类型:

布尔：

var x=true
var y=false

数组:

var cars = new Array();
cars[0] = 'Audi';
cars[1] = 'Dz';

cars[2] = 'Stn';

或者:var cars = new Array('Ad','Dz','Stn');

或者:var cars = ['Ad','Dz','Stn'];

对象:

var person={firstname:"zhou",lastname:"yong",id:123}

对象属性的两种寻址方式(获取属性的值):

name = person.firstname;

name = person['firstname'];

Undefined和Null

Undefined这个值表示变量不含有值；

可以通过将变量的值设置为null来清空变量

声明变量类型:

var carname = new String;

var x = new Number;

var y = new Boolean;

var cars = new Array;

var person = new Object;

14、JavaScript 中的所有事物都是对象：字符串、数字、数组、日期；对象是拥有属性和方法的数据

举例:

var txt = "zhou";

属性:txt.length

方法:txt.indexOf();txt.replace();txt.search();......

创建JavaScript对象:

person = new Object();

person.firstname = 'zhou';

person.lastname = 'yong';

person.id = 123;

访问对象的属性:

语法:objectName.propertyName

eg:var message = 'hello world';

var x = message.length;

访问对象的方法:

语法：objectName.methodName()

eg:var message = 'hello world';

var x = message.toUpperCase();

15、函数：声明的变量时局部变量

结构:

function functionname(p1,p2)
{
这里是要执行的代码

}

带有返回值的函数:return

function myFunction()
{
var x=5;
return x;
}

函数调用被返回值取代:

var x = myFunction();

document.getElementById("demo").innerHTML=myFunction();//调用函数，并将值嵌入Html页面中

JavaScript变量的生命期:

局部变量会在函数运行以后被删除;

全局变量会在页面被关闭后被删除

PS:将值赋给尚未声明的变量，该变量将被自动作为全局变量声明，即使在函数内执行

<script>
carname = 'zhou';
function get(){
//carname = 'sss';//声明变量，则返回“sss”,不声明变量，返回"zhou"
return carname;//carname使用的是全局变量
}
alert(get());
</script>

16、JavaScript运算符

①算术运算符:执行变量与/或值之间的算术运算

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数 (保留整数)	x=y%2	x=1
++	累加	x=++y	x=6
--	递减	x=--y	x=4

②赋值运算符:给变量赋值

运算符	例子	等价于	结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

③“+”运算符：用于将文本或者字符串拼接起来

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
txt3=txt1+" "+txt2;//拼接空格

④对字符串和数字进行加法运算

x=5+5;//10
x="5"+"5";//55
x=5+"5";//55
x="5"+5;//55

PS:如果把数字与字符串相加，结果将成为字符串

17、JavaScript比较和逻辑运算符

①比较运算符

运算符	描述	例子
==	等于	x==8 为 false
===	全等（值和类型）	x===5 为 true；x==="5" 为 false
!=	不等于	x!=8 为 true
>	大于	x>8 为 false
<	小于	x<8 为 true
>=	大于或等于	x>=8 为 false
<=	小于或等于	x<=8 为 true

②逻辑运算符

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

③条件运算符

语法:

variablename=(condition)?value1:value2

18、JavaScript:循环

for/in循环遍历对象:

var person={fname:"John",lname:"Doe",age:25};

for (x in person){
  txt =txt + person[x];
}

19、JavaScript标签

continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。

cars=["BMW","Volvo","Saab","Ford"];
list:{document.write(cars[0] + "<br>");
      document.write(cars[1] + "<br>");
      document.write(cars[2] + "<br>");
      break list;
      document.write(cars[3] + "<br>");
      document.write(cars[4] + "<br>");
      document.write(cars[5] + "<br>");
}

20、错误

<script>
function myFunction(){
try{
  var x = document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
 }catch(err){
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
 }
}
</script>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Button</button>
<p id="mess"></p>

21、验证

Email:

apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) {
    //输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号
    //todo
}

Js学习----基础知识

猜你喜欢