JavaScript（1）初识

最新推荐文章于 2023-07-30 11:48:48 发布

D灿

最新推荐文章于 2023-07-30 11:48:48 发布

阅读量622

点赞数

分类专栏： JavaScript Web前端技术文章标签： JavaScript 网页编程 var

本文链接：https://blog.csdn.net/zuosixiaonengshou/article/details/52356697

版权

Web前端技术同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

前记：JavaScript虽然名字带有Java但是它跟Java是两门不同的语言哦。

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,而现在使用type属性。

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
	 <h2>在html中引入js代码的方式，只有两种:1)在<script>中写  2)导入 ---注意两者不共存   </h2>
	
	 <!-- 在html中引入js代码的方式1:在<script>标记中直接 -->
	  <script type="text/javascript">
	    // alert("hello world!");//输出，在浏览器中弹出一个信息窗口
	     
	  </script>
	  
	  <!-- 在html中引入js代码的方式2:外部导入 -->
	  <!-- 
		  <script type="text/javascript" src="1.js">
		  </script>
	   -->
	  
	  
	  <!-- ※※注意，外层导入之后，在该<script>块中写的js代码全部不会解析执行 -->
	  <script type="text/javascript" src="1.js">
	     alert("666");//★该句是不会执行的
	  </script>
	  
	  
	</body>
	
</html></span>

1.js

<span style="font-family:Times New Roman;font-size:14px;">alert("888uuu");</span>

JavaScript语法

每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。
1.变量
通过关键字var来定义，弱类型既是不用指定具体的数据类型。

例：var x = 3; x = “hello”;
注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。
注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。但为了符合编程规范，需要象java一样定义结束符。
而且有些情况是必须写分号的，如：var x = 3 ; var y =5 如果两条语句写在同一行，就需要分号隔开。

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

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>js语言学习</title>
	</head>
	<body>
	 <h2>js语言学习---js是弱类型</h2>
	
	  <script type="text/javascript">
	    //※1 关键字: 参考Java
	    //※2 标识符: 参考Java
	    /*
	         var x=3;
		     x="abc";//可以给同一个变量赋不同类型的值
		     alert(x);
		     //var x = 23.21;//也可以用同一个变量名
		     var x;//声明但未赋值，即是前面的值
		     alert(x);
		  */   
		     
	    //※3 分隔符: 参考Java
	    //※4 注释:  行内(//)  多行(/*  */)  没有:/** */
	    //※5 数据类型: number(包含整数和浮点) 、string(字符串,注意该关键字首字母小写)、boolean(布尔,js中有0和非0的概念，true默认为1，flase默认为0，且可以参与整数运算)、 undefined(未定义，声明但未赋值的变量)、object(引用类型)
          //var---Object
		var x=10;
		//x = 12.34;
        //alert("x: "+ typeof(x) );//number
	    var y = 12.12;
	    //alert("y: "+ typeof(y) );//number
	    
	    var str= "hello";
	    str='a';//js中没有“char”类型，只有字符串
	    //alert("str: "+ typeof(str) );
	    
	    //if( typeof(str)=="String" ){
	    if( typeof(str)=="string" ){
	      //alert("ok");
	    }
	     
	     var boo = true;
	    // alert("boo: "+ typeof(boo) );
	     
	     //alert(xyzw);//变量没有声明就使用，是错误的
	     var xyzw;
	     //alert(xyzw);//undefined
	     
	  </script>
	  
	  <h3>js中多个脚本段的代码是共享内存空间的，和写在同一段等效(只是浏览器解析顺序不同)</h3>
	 
	  <script type="text/javascript">
	     //alert(str);//可以使用上一段脚本中的数据
	     //※6 运算符与表达式
	     
	     //☆6.1 算术运算符：+（正）、-（负）、++、--、+（加）、-（减）、*、/（除）、%（取余） 
	     /*
	     //js中没有区分整数和浮点，只有number
	     var a=1234;
	     a = a + 100;
	     alert(a);//1334
	     alert(a/1000);//1.334
	     alert(a/1000*1000);//1334
	     */
	     var b1=2.7;
	     var b2=7.3;
	     //alert(b1+b2); //10
	     
	     /*
		     var boo = true;
		     alert(boo-5);//-4
		     boo=false;
		     alert(boo-5);//-5
		     if(1-3){//非零即是true
		       alert("ooookkkk");
		     }
		     boo = false - 1; //-1 ---非零即是true
	     */
	     
	     /*
	     alert(12 + 1);
	     alert("12" + 1);//121
	     alert("12" - 1);//11
	     alert("12sw" - 1);//NaN ----Not a Number
		*/
		
		/*
		var x=3;
		x++;
		//alert(x);//4
	     var y=3;
	     alert(y++);//3
	     alert(++y);//5
	     
	     alert("100%-3: "+ 100%-3); //结果:1  ---和Java一样
	    */ 
	  
	  </script>
	  
	  <script type="text/javascript">
	      //☆6.2 关系运算符：==、!=、>、<、>=、<= 
	      //☆6.3 逻辑运算符：&（与）、|（或）、!（非）、∧（异或）、&&（条件与）、||（条件或） 
	      var x=10, y=3;
	      //alert(x==10 && y>=3);
	      
	      //☆6.4位运算: ~（非）、&（与）、|（或）、^（异或）、<<（左移位）、>>（右移位）、>>>（无符号右移位） 
	     /*
	      var c = 6;
	      alert( c<<2 );//24    左移1位即是乘以2
	      alert( c&3 ); //2   110 & 011 ==>  010 
	      alert( c>>>1 ); //无符号右移
	      */
	      
	      //☆6.5 赋值运算符：= 、+=等  (注意“+=”中间不能有空格)
	      var i=3;
	      i += 2;
	      alert(i);
	      
	      
	  </script>
	 	  
	</body>
	
</html></span>