JavaScript---网络编程(1)-介绍、变量、运算符与语句

谙忆 2021-01-21 12:54:26
编程 网络 javascript 介绍 javascript---


JavaScript也是一种编程语言。并不是Java的分支哦。 可以直接在浏览器中运行的编程语言。

JavaScript 的历史故事: 1、JavaScript语言与名称的由来(Netscape,Sun Java) 最开始是叫LiveScript的~有一个小故事,有兴趣的朋友可以去百度一下。 2、微软的Explorer和JScript

JavaScript 概述 JavaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。 特点: 1.交互性(它可以做的就是信息的动态交互) 2.安全性(不允许直接访问本地硬盘) 3.跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)

JavaScript与Java不同

1.JS是Netscape公司的产品,前身是LiveScript;Java是Sun公司的产品,现在是Oracle公司的产品。 2.JS是基于对象的(对象都做好了的),Java是面向对象的(自己写对象的)。 3.JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。 4.JS是弱类型,Java是强类型。

JavaScript与Html的结合方式: 想要将其他代码融入到Html中,都是以标签的形式。

1.JS代码存放在标签对<script> js code...</script>中。
2.当有多个html页面使用到相同的JS脚本时,可以将js代码封装到一个文件中,只要在script标签的src属性引入一个js文件。
(方便后期维护,扩展)
注意:如果在script标签中定义了src属性,那么标签中的内容不会被执行。
例:<script src=”test.js” type=”text/javascript”></script>
注:规范中script标签早期有一个属性language
(因为早期认为可能有多种脚本语言,然而到现在,还是JS一家独大~所以。),而现在使用type属性。

演示:

<html>
<head>
<title>javascript语言演示</title>
</head>
<body>
<script type="text/javascript">
alert("hello world!")
</script>
</body>
</html>

写法一:

 <script type="text/javascript">
alert("hello world!")
</script>
这一句放哪里都可以的。别放html标签外就可以了。

写法二:

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

不可以嵌套用!但是可以有很多个script 标签(但是注意顺序啊)

 <!-- 注意,这种写法不行--包含在标签内的js代码无效 -->
<script type="text/javascript" src="a.js">
alert("hello world!222");//无效代码,被上面的导入方式覆盖了。
</script>

JavaScript语法

每一种语言都有自己的语法规则,JS语法与Java很像,所以学习起来比较容易。JS中也一样有变量,语句,函数,数组等常见语言组成元素。 1.变量 通过关键字var来定义,弱类型既是不用指定具体的数据类型。 例:var x = 3; x = “hello”; 注:JS中特殊的常量值:undefined,当变量没有初始化就被使用,该变量的值就是undefined(未定义)。 注意:Javascript的语句在结尾处是可以不用分号结束的,非严谨语言的特点。 但为了符合编程规范,需要象java一样定义结束符。 而且有些情况是必须写分号的,如:var x = 3 ; var y =5 如果两条语句写在同一行,就需要分号隔开。

代码演示:

<html>
<head>
<title>javascript语法 演示</title>
</head>
<script type="text/javascript">
//1标识符,关键字,分隔符---几乎和Java一样
//2注释:只支持 //单行注释 和 /* 多行注释 */
//3变量(弱类型), var(全部用这个定义,只有这个变量)
//所有的变量都是用var来声明---本质上就是java当中的Object类型
var x = 3;
var y = "abc";
alert(x+","+y);//弹出: 3,acb
x="xyz";
alert(x); //弹出:xyz
x=true;
alert(x); //弹出:true
x=true+1;//和c一样,布尔类型有0和非0(1)的概念
alert(x); //弹出:2
a=3.14;
alert(a);// 因为浏览器有兼容性,所以一个变量不声明类型也可以直接对其赋值,但不要去读
//因为是弱类型,写不写都是var
//弹出:3.14
//aa没有声明也没有赋值却直接读取了。
//alert(aa);//出错的。没有什么弹窗。也没有提示!
alert( typeof(a) ); //弹出:number
// typeof(a) 返回a的类型
a=3;
alert( typeof(a) ); //弹出:number
a=3.156441564165564616541564156;
alert(a);//弹出:3.1564415641655645
alert( typeof(a) );//弹出:number
a=3156441564165564616541564156;
alert(a);//弹出:3156441564165565e+27
alert( typeof(a) );//弹出:number
a='a';
//JS当中,单引号和双引号是一样的,对应的变量都是字符串
//也就是说JS中没有字符类型---包含在字符串当中了。字符串只有一个字符时~
//不用分号
var m=1
var n=2
alert(m+n);//弹出:3
//由于浏览器有兼容性,一条语句的末尾不加分号也可以正常执行。
//但这样写不规范,建议还是加上。
//var mm=1 var nn=2;
//alert(mm+nn);//直接挂了。
//另外,同一行的多条语句之间的分号不能省,否则不能正常执行。
</script>
<script type="text/javascript">
//4 基本数据类型
alert( typeof("aaaa") );//弹出:string
//注意string是小写的
alert(typeof('0') );//弹出:string
alert( typeof(false) );//弹出:boolean
alert( typeof(100) );//弹出:number
alert( typeof(1.23) );//弹出number
//判断是哪种类型
alert( typeof('0')=="string" );//弹出:true
alert( typeof('0')=="String" );//(大小写敏感)弹出:false
//其他类型判断类似
alert( typeof(x) );//一样可以。前面片段中,在这里仍然是有效的(所以说。注意顺序)
alert( typeof(X) );//大小写敏感的!(没定义)弹出:undefined
//使用单引号和双引号效果是一样的
alert( typeof(x)=='number');//弹出:true
</script>
<body>
</body>
</html>

2.运算符 Javascript中的运算符和Java大致相同。 只是运算过程中需要注意几点: 1,var x = 3120/1000*1000; x = 3120;而不是3000。 2,var x = 2.4+3.6 ; x = 6;而不是6.0 3,var x = “12” + 1; x = “121”; x = “12” – 1 ; x = 11; 加号对于字符串是连接符 4,&& || 是逻辑运算符 & | 是位运算符。 5,也支持三元运算符 6,特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。 var x = 3; var y = “123”; var z = false; typeof(x); //number typeof(y); //string typeof(z); //boolean

代码演示:

 <script type="text/javascript">
//5 运算符:算术、赋值、比较、位运算、三元运算
//5.1算术运算
var a = 3710;
alert("a="+a/1000);//a=3.71
alert("a="+a/1000*1000);//a=3710
var b = 2.3;
var c = 5.7;
alert( b+c );// 8
alert( 23+11 ); //34
alert("23"+11);//2311---string---加号为字符串连接
alert("23"-11);//12
//字符串遇到减号自动会转换成数值型进行运算
alert(false+1);//1 false是0
//true 和数值进行运算时,true为1,false为0
alert(100%3);//1
alert(100%-3);//1
alert(-100%3);//-1 如果有负数,结果和前面那个数同符号-和Java一样的
//5.2 赋值运算:= += -= *= /= %=
var n=3,m;
m=n++;//用法同Java
alert("n="+n+",m="+m);//n=4,m=3
var n=3,m;//JS中变量可以声明几次--和Java不同
m=++n;
alert("n="+n+",m="+m);//n=4,m=4
var n;
alert(n);//4---这里没有对该变量重新赋值,所以用的还是前面n的值(内存还是同一片)
var i=3;
i+=3;//其他的类似 -= *= /= %=
alert("i="+i);//i=6
//5.3 比较运算符---和Java类似
var j=10;
alert(j>5);//true
//其他如:>= <= > < == != 类似
//5.4 逻辑运算符 && || !
var k=4;
alert(k>3 && k<10);//true
alert( !(k>3) ); //false
alert( !k );//false---和C一样
//5.5 位运算符 & | ^ >> << >>>(无符号右移)---和Java一样
var c = 6;//6:110
alert( c&3 );//3:011
//结果是:010 弹出:2
alert( c^100^100 );//结果还是c -- 6
alert(c>>>1);//3
//5.6 三元运算符(问号表达式)
alert( 3>0?100:300 );//100
var xxyy;
alert(xxyy);//undefined---如果一个变量声明后没有赋值,就是这个
alert(xxyy==undefined);//这里不要写成字符串的形式,true
alert(xxyy=="undefined");//false
//这个undefined代表和true和false等一样的,是一个值,所以不要用引号
</script>

3.语句(与Java语句格式相同) 1.判断结构(if语句) 注:var x = 3; if(x==4)//可以进行比较运算。 if(x=4)//可以进行赋值运算,而且可以同样进行判断。不报错。 因为在Js中0或者null就是false, 非0或者非null就是true(通常用1表示)。 所以if(x=4)结果是true; 可以通过if(4==y)来解决该问题。因为4=y不会进行判断,而是会报错。 2.选择结构(switch语句) 与java不同的是:因为弱类型,也可以对字符串进行选择。 代码演示:

<html>
<head>
<title>javascript语法演示</title>
</head>
<script type="text/javascript">
//1 if语句
var x=3;
if(x>0){
alert("yes");//结果yes
}else{
alert("no");
}
if(x-4){//和C一样非0的概念,不是0的都是true
alert("yes2");//结果yes2
}else{
alert("no2");
}
if(x=4){//一个等于号是赋值,结果是4---非零,即是true
alert("yes3");//yes3
}else{
alert("no3");
}
if(x=0){
alert("yes3");
}else{
alert("no3");//no3
}
//赋值是什么,该值同时也作为整个表达式的值
//建议,如果是判断相等,写成如下方式
if(4==x){//把数字放在前面,可以避免一个等于号的bug
}
//逗号表达式--以最后一个逗号后的结果为真正的值
var b =(3,4+5);
alert(b);//9
var c = 5;
if(c>1){
alert("a");//a
}else if(c>2){
alert("b");
}else if(c>3){
alert("c");
}else{
alert("d");
}
</script>
<script type="text/javascript">
//Java---switch表达式支持的类型:byte,int等整数,char
//Java1.7之后 支持字符串String
//JavaScript语言:支持所有类型,即所有类型的数据都可以用于选择
var x = "abc";
switch(x){
case "aa":
alert("a");break;
case "abc":
alert("b");
default:
alert("c");
}
//弹出:b c
switch(x){
default:
alert("c");
case "aa":
alert("a");break;
case "abc":
alert("b");
}
//弹出:b
x="x";
switch(x){//如果没有匹配上
default:
alert("c");//这里运行完,还会运行后面的
case "aa":
alert("a");break;
case "abc":
alert("b");
}
//弹出:c a
</script>
<body>
</body>
</html>

3.循环结构(while语句,do…while语句,for语句)。 注:不同的是,没有了具体数据类型的限制,使用时要注意。

代码演示:

<html>
<head>
<title>javascript语法演示</title>
<link rel="stylesheet" href="table.css"/>
</head>
<body>
<h3>
湖南城市学院
</h3>
<script type="text/javascript">
//循环:for while do-while
var sum=0;
for(var i=1;i<=100;i++){
sum+=i;
}
document.write("sum="+sum);//直接显示在网页相对应位置!!!
//sum=5050
var x=1;
sum=0;
while(x<=100){
sum+=x;
x++;
}
document.write("<br/><font color=\"#ff0000\" > sum2="+sum+"</font><br/>");
//写入了换行和font color=\"#ff0000\" color='#ff0000' --单引号也可以的
</script>
<br/>
<a href="http://baidu.com"> 百度一下 </a>
<br/>
<hr>
<script type="text/javascript">
//转移语句:break,continue,return
for(var x=0;x<3;x++){
for(var y=0;y<4;y++){
document.write("x="+x+"&nbsp;");
break;
}
document.write("<br/>");
}
document.write("<hr/>");
a:for(var x=0;x<3;x++){
for(var y=0;y<4;y++){
document.write("x="+x+"&nbsp;");
break a;
}
document.write("<br/>");
}
</script>
<hr/>
<h2>九九乘法表</h2>
<script type="text/javascript">
for(var x=1;x<10;x++){
for(var y=1;y<=x;y++){
document.write(x+"*"+y+"="+x*y+"&nbsp;");
}
document.write("<br/>");
}
</script>
<h2>九九乘法表2</h2>
<script type="text/javascript">
document.write("<table>");
for(var x=1;x<10;x++){
document.write("<tr>");
for(var y=1;y<=x;y++){
document.write("<td>"+x+"*"+y+"="+x*y+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>

table.css

table{
width: 600px;
}
table td{
border: #f00 solid 1px;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

版权声明
本文为[谙忆]所创,转载请带上原文链接,感谢
https://cloud.tencent.com/developer/article/1777199

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云