0、什么是JavaScript?JavaScript一种基于浏览器、弱类型、基于对象的轻量级脚本语言
基于浏览器:js代码有浏览器负责解析执行
弱类型: 在js中可以不定义变量而直接使用这个变量,同时在js中定义变量可以不指名具体的数据类型
基于对象: 在js中提供了诸多对象,在编码过程中可以直接拿来使用
00重要,我们知道Java代码最终会在JVM中被解析执行,那么JavaScript代码会被谁解析呢?
答案是:浏览器。你发现没有,web前端技术中涉及到的科目比如,html、css、JavaScript都是由浏览器解析执行的。当然,由于目前市面上浏览器厂家版本都不尽相同,所以很有可能出现这样的情况,我们所编写的一段代码,在不同浏览器上显示的效果可能会不同
1、JavaScript代码往哪里写?
①、可以在script元素(可以放在body中也可以放在head中)内编写
②、可以在html元素中的相关事件中编写
③、可以在独立的以扩展名是.js的独立文件中编写 就像独立的*.css一样
2、变量 ?
变量是一个容器,其中存储的数据(值)是可以发生改变的。
3、JavaScript中的数据类型
①、数值型(Number):包括小数和整数,正数和负数(和java不同,java中小数(float|double),正数(byte|short|int|long))
②、字符串型(String):字符串类型,即是有一个或多个字符序列组成。一个字符串数据叫字面值,字面值要使用单引号或者双引号扩起来。如,”刘备”、‘关羽’等都是字符串类型的字面值
③、数组类型(Array):用于管理多个数据(一组数据)
④、布尔型(Boolean):布尔型数据只有两个取值,就像二进制数据只有0和1两个数一样,ture | flase
⑤、对象型(Object):在JavaScript中可以自定义对象,同时JavaScript也提供了很多对象供开发人员使用,简化开发工作量。
⑥、undefined型:未定义类型
⑦、null型:空值类型
4、Java和JavaScript有什么区别
Java和JavaScript可以说没有关系也可以说有关系,关键看从哪个角度考虑。比如Javascript中的很多语法规则和java一致,但是,所以说有一定的关系。但是由于Java和JavaScript是完全不同性质的两门语言(Java是服务器端的编程语言,而JavaScript是客户端技术),所以说没有关系。
语法一致大概情况如下:
比如:在js中一条语句的结束也和java一样使用;号
比如:在js中字符串使用“”括起来
比如:js中的条件结构和循环结构与java基本一致
5、Javascript中运算符(基本和java一模一样)
①、算数运算符 + - * / % 。需要注意的是,在js中,/运算符的运算结构可能是小数,比如3/2的结果在java中是1,但是在js中结果确实1.5
②、赋值运算符 =
③、增量减量运算符 注意前缀形式和后缀形式 ++ –
④、算数赋值运算符 += -= *= /= %=
⑤、关系比较运算符 < <= > >= != ==
⑥、逻辑运算符 && || !
⑦、条件运算符 ? :
⑧、typeof运算符 返回对应的变量后者字面值是哪种类型
⑨、(): js中也有() 来强制将某些表达式括起来,进而改变计算的顺序
⑩、位运算符:<< >>将数据转化成二进制后移位,比如2<<4 结果是32
案例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// document.write("");//功能是将write方法中的""中的内容写入到html页面的body元素中
// 所以假如写入内容中有html元素的话,这个元素也会被浏览器解析
// 1:算数运算符以及赋值运算符
var a=10;
var b=20;
var c=a+b;
document.write(c);
c=a-b;
document.write(c);
c=a*b;
document.write(c);
// 在javascript中,除运算符结果带有小数(因为在js中没有整数和小数的区分,都属于数字型)
c=a/b;
document.write(c);
c=a%b;
document.write(c);
c=10%3;
document.write(c);
// 2:增量和减量运算符 ++ --
var i=10;
var j=++i;
// 可以通过js向页面的主体部分(body部分)加入一个html标记
document.write(i+"<br/>"+j+"<br/>");
j=++i;
document.write(j);
document.write("<hr/>");
// 3:条件(关系)运算符
var m=10;
m/=2;
document.write(m);
document.write("<br/>");
document.write(3<m);
var result=3<m;
document.write("<br/>");
document.write(3>m);
document.write("<br/>");
document.write(3<=m);
document.write("<br/>");
document.write(3>=m);
document.write("<br/>");
document.write(3==m);
document.write("<br/>");
document.write(3!=m);
document.write("<hr/>");
// 4:逻辑运算符
var ft1=true;
var ft2=false;
document.write(true&&false);
document.write(ft1||ft2);
document.write(!ft1);
document.write("<hr/>");
// 5:条件运算符
var m=30;
var max=m>10?m:10;
document.write(max);
// 7:typeof 运算符
var mytype=typeof "刘备";
document.write(mytype);
var x=3.14;
document.write(typeof x);
var x=true;
document.write(typeof x);
var myarr=new Array();
document.write(typeof myarr);
document.write("<hr/>");
// 8:位运算符
document.write(2<<5);
document.write("<br/>")
</script>
</head>
<body>
</body>
</html>
6、JavaScript中的控制语句
①、语句块,将多条语句使用{}括起来
{
var a=10;
var b=20;
document.write(a+b);
}
②条件结构流程图
②、条件结构语法
语法1:
if(条件){}
else {}
语法2
switch(a){
case 值:
语句;
break;
case 值2:
语句:
break;
……
default:
语句:
break;
}
条件结构案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var score=20;
/*与Java中if语句相同,一个if可以没有else 也当然,一个if可以接多个else if*/
if(score<=60){
document.write("不及格");
}
else if(score<90)
document.write("及格");
else
document.write("优秀");
document.write("<hr/>");
/*和Java中的swtich一样,在js中也有switch条件结构*/
var a=40;
switch(a){
case 10:
var b=100;
document.write(b+"------");
break;
case 20:
var b=100;
document.write(b+"=======");
break;
default:
document.write("default");
break;
}
</script>
</head>
<body>
</body>
</html>
循环结构流程图
③、循环结构
while(){}
do{}while();
for(var i=0;i<=100;i)){}
循环结构案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 是将语句块中的代码重复(反复的)去执行的过程即为循环
/*document.write("****");
document.write("<br/>")
document.write("****");
document.write("<br/>")
document.write("****");
document.write("<br/>")
document.write("****");
document.write("<br/>")
document.write("****");
document.write("<br/>")
document.write("****");
document.write("<br/>")*/
var times=10;
while(times>0){
document.write("****");
document.write("<br/>")
times--;
}
do{
document.write("**");
document.write("<br/>");
times++;
}while(times<11)
// 因为JavaScript是弱类型的语言,所以与java中的for对其,需要将int的关键字变为var
for(var i=0;i<100;i++){
document.write(i);
document.write("<br/>");
}
// 注意:js中的for循环和java中的for循环一致,三个表达式都可以省略,若没有第二个表达式,说明是恒成立->死循环
for(;;){
alert("test");
}
</script>
</head>
<body>
</body>
</html>
控制语句中非常重要的两个关键字:continue和break。
continue是停止当前次循环,继续判断循环条件,若条件成立继续执行循环体
break是终止整个循环,执行循环体以外的语句
7、JavaScript中的函数,和java中的方法是一个概念,是一段可以重复执行的语句块。
function methodName(){}
public int methodName(){}
//1-100之间质数和
function zhiShuHe(){
var sum=0;
for(var i=3;i<=100;i++){
// i是否是质数
for(var j=2;j<i;j++){// 2-i之间的所有数
if(i%j==0)
break;
}
//是否是质数;
if(j==i)
sum+=i;
}
sum+=2;
return sum;//由于js是弱类型语言,所以即使方法有返回值,在定义方法时也无需指定返回值,只需在方法体的合适位置处通过return关键返回具体值即可。
}
//在页面上打印小九九口角
function jiujiu(){
for(var i=1;i<10;i++){
for(var j=1;j<=i;j++){
var result=j*i;
if(result<10&& j!=1)
result=" "+result;
document.write(j+"*"+i+"="+result);
document.write(" ");
}
document.write("<br/>");
}
}
/**
* 完成min到max之间的所有奇数和的计算。
* 因为JavaScript是一个弱类型的语言,所以在定义形参时无需指定具体的类型。
* @param {Object} min 形参
* @param {Object} max 形参
*/
function jiShuHe(min,max){
var sum=0;
for(var i=min;i<=max;i++){
if(i%2!=0)
sum+=i;
}
document.write(sum);
}
/**
* 完成min到max之间的所有奇数和的计算。
* 因为JavaScript是一个弱类型的语言,所以在定义形参时无需指定具体的类型。
* @param {Object} min 形参
* @param {Object} max 形参
*/
function jiShuHe(min,max){
var sum=0;
for(var i=min;i<=max;i++){
if(i%2!=0)
sum+=i;
}
/*
因为JavaScript是若类型的编程语言,所有在定义方法时无需指定方法的返回值,若希望给调用者一个结果数据的话
可以在合适的地方直接通过return返回结果数据即可
*/
return sum;
}
实验:
①、计算1-100之间的奇数和 将结果打印到页面上
②、计算1-100之间的偶数和 将结果打印到页面上
③、计算1-100之间的质数和 将结果打印到页面上
④、在页面上 打印小九九口角
⑤、使用*号打印等腰三角形到页面上
7、JavaScript中的函数,和java中的方法是一个概念,是一段可以重复执行的语句块。
语法:function methodName([参数列表]){ }//Java中定义方法 public int methodName(){}
案例代码:
//1-100之间质数和
function zhiShuHe(){
var sum=0;
for(var i=3;i<=100;i++){
// i是否是质数
for(var j=2;j<i;j++){// 2-i之间的所有数
if(i%j==0)
break;
}
//是否是质数;
if(j==i)
sum+=i;
}
sum+=2;
return sum;//由于js是弱类型语言,所以即使方法有返回值,在定义方法时也无需指定返回值,只需在方法体的合适位置处通过return关键返回具体值即可。
}
//在页面上打印小九九口角
function jiujiu(){
for(var i=1;i<10;i++){
for(var j=1;j<=i;j++){
var result=j*i;
if(result<10&& j!=1)
result=" "+result;//
document.write(j+"*"+i+"="+result);
document.write(" ");
}
document.write("<br/>");
}
}