JS的基本使用

最新推荐文章于 2022-02-26 11:35:13 发布
最新推荐文章于 2022-02-26 11:35:13 发布
阅读量1.9k 收藏 1
点赞数 2
分类专栏： js JS基础教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjd_love_zzt/article/details/19249421
版权

1、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
   <head>
   <!-- 函数的定义与调用 -->
     <script type="text/javascript">
       function f1(){
         alert("hello javascript!!");
       }
     
     </script>
   </head> 
   
   <body>
      <a href="#" οnclick="f1()">click me</a>
   </body>
</html>

2、 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 变量的定义与使用 -->
<html>
   <head>
     <script type="text/javascript">
       function f2(){
    	   var a = 100;
    	   //a = '100';
    	   
    	   alert(typeof a);//打印变量阿德类型
       }
     </script>
   </head>

   <body>
     <a href="" οnclick="f2()">click me</a>
   </body>
</html>


3、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 比较运算符的使用-->


<html>
 <head>
   <script type="text/javascript">
      function f3(){
       /**
          == 比较的是看值是否相等
       */
        var str1 = '123';
        var str2 = '123';
        
        if(str1 == str2){
           alert("str1 is equal to str2");
        }
        
        var a = 123;
        var b = '123';
        if(a == b){
          alert("a is equal to b");
        }else{
          alert("a is not equal b");
        }
        
        
        /*
                        ===  先判断的是类型是否相等,然后在判断值是否相等
        */
        var i1 = 123;
        var s2 = '123';
        
        if(i1 === s2){
          alert("i1 is equal to s2");
        }else{
          alert("i1 is not equal to s2");
        }
      }
   </script>
 </head> 

 <body>
   <a href="" οnclick="f3()">click me</a>
 
 </body>
</html>


4、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
 <head>
   <script type="text/javascript">
      function f4(){
       //var a = null;
       alert(typeof null);//null 的类型是object
       
       var a;
       alert(typeof a);//一个变量如果只声明,但是不赋值,那么它的类型还是undefined
       }
   </script>
 </head> 

 <body>
   <a href="" οnclick="f4()">click me</a>
 
 </body>
</html>


5、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
 <head>
   <script type="text/javascript">
      function f5(){
        /*
           需要注意的是if()语句里面的判断逻辑:
        1)非空字符串、不为0的字符串都是true
        2)null、undefined 为false
        */
        //var flag = 'hello';
        //var flag = '';
        //var flag = 12;
        //var flag = 0;
        var flag = null;
        
        if(flag){
          alert(true);
        }else{
          alert(false);
        }
      
      }
   </script>
 </head> 

 <body>
   <a href="" οnclick="f5()">click me</a>
 
 </body>
</html>


6、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 类型转换 -->
<html>
 <head>
   <script type="text/javascript">
      function f6(){
         /*
           string ---> number
                             主要是通过以下几个函数:
           parseInt(str),
           parseFloat(str),
           isNaN(str);
         */
         
         /*
         var s = '123';
         var s1 = parseInt(s) + 100;//parseInt(s),把s当成整数进行解析
         alert(typeof s1 + ' : ' + s1);  //最后s1的值为223

          
         */
         
         /*
         var s = '125.04';
         var s1 = parseInt(s) + 100;
         alert(typeof s1 + ' : ' + s1);
         
         这时候打印出来的结果是225
         */
         
         /*
         var s = '125.04';
         var s1 = parseFloat(s) + 100;
         alert(typeof s1 + ' : ' + s1);//这时候返回的结果是225.0000004
         */
         
         var s = '125a';
         if(isNaN(s)){//isNaN(s) : 判断字符串s是否只一个数字
           alert('s不是一个数字'); 
         }else{
           alert('s是一个数字');
         }
         
      }
   </script>
 </head> 

 <body>
   <a href="" οnclick="f6()">click me</a>
 
 </body>
</html>


7、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 类型转换 -->
<html>
 <head>
   <script type="text/javascript">
     /*
      number ---> string
               主要是通过: .toString()来实现的
     */
     function f7(){
        var n1 = 123;
        var s1 = n1.toString();//js在执行时,会自动将number类型转换成其对应的包装类型Number,然后调用相应的方法
        alert(typeof s1 + ' : ' + s1);
        alert(s1+100); 
     }
   </script>
 </head> 

 <body>
   <a href="" οnclick="f7()">click me</a>
 
 </body>
</html>


8、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 字符串的常用属性和方法-->
<html>
 <head>
   <script type="text/javascript">
     function f8(){
        var str = 'abcde';
        alert(str.length); //str.length: 获取字符串的长度
        alert(str.substring(1,3));//[1,3) ,索引从0开始
        
        
     }
   </script>
 </head> 

 <body>
   <a href="" οnclick="f8()">click me</a>
 
 </body>
</html>


9、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 字符串中正则表达式的几个应用-->
<html>
 <head>
   <script type="text/javascript">
     function f8(){
        var str = 'abc12de12345asfasd1234';
        var reg = /[0-9]+/g;
        //alert(typeof reg); JS在执行时,会把/[0-9]+/g转换成一个RegExp对象,g表示搜索整个字符串,i表示忽略大小写
        
        //alert(str.match(reg));//输出的结果是12,12345,1234
        
        var reg2 = /[0-9]+/;
        //alert(str.search(reg2));//返回第一次匹配的索引
        
        alert(str.replace(reg,'888'));//将str中符合reg规则的字符串都转换成888
        
     }
   </script>
 </head> 

 <body>
   <a href="" οnclick="f8()">click me</a>
 
 </body>
</html>


10、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 一为数组创建与使用-->
<html>
 <head>
   <script type="text/javascript">
     function f10(){
        //第一种创建数组的方式: 使用 new Array()
        var arr = new Array();
        arr[0] = 1;
        arr[2] = '1bc';
        arr[10] = 'haha';
        //alert(arr.length); //输出 11
        //alert(arr[9] + ' , ' + arr[10]); //输出的结果是undefined , haha
        
        var arr1 = [];
        arr1[3] = 2;
        //alert('arr2.length: ' + arr1.length);//输出结果: 4
        
        var arr2 = [1,false,'abs'];
        arr2[5] = 'helloworld';
        alert('arr2.length: ' + arr2.length);//输出结果: 6
        alert(arr2[5]);//输出结果: helloworld
        
     }
   </script>
 </head> 

 <body>
   <a href="" οnclick="f10()">click me</a>
 
 </body>
</html>


11、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 二维数组创建与使用-->
<html>
	<head>
		<script type="text/javascript">
function f11() {
	var arr = new Array();//二维数组的定义.注意这里写成new Array也是可以的(即省略Array后面的小括号)
	arr[0] = [ 1, 11, 111 ];
	arr[1] = [ 2, 3, 4, 5 ];
	arr[2] = [ 6, 7, 8, 9, 10, 11 ];

	for ( var i = 0; i < arr.length; ++i) {
		for ( var j = 0; j < arr[i].length; ++j) {
			alert(arr[i][j]);
		}
	}
}

</script>
	</head>

	<body>
		<a href="" οnclick="f11()">click me</a>

	</body>
</html>


12、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 数组的常用方法-->
<html>
	<head>
		<script type="text/javascript">
function f12() {
	var arr = ['b','c','a','d'];
	//alert(arr.toString());//输出b,c,d,a
	//alert(arr);//结果和上面是一样的
	
	var arr1 = ['1','3','2','4'];
	//alert(arr.concat(arr1));//b,c,a,d,1,3,2,4
	
	//alert(arr1);//1,3,2,4
	//alert(arr1.reverse());//4,2,3,1
	
	//alert(arr1.join('|'));//1|3|2|4
	
	//alert(arr1.slice(1,4));//输出数组中的[1,4)的元素
	
	var arr2 = [111,22,3,99,100];
	//alert(arr2.sort());//默认按照字典序进行排序
	
	alert(arr2.sort(function(t1,t2){//这时候从大到小进行排序.所传的对象是函数对象
	     return t2-t1;
	}))
	
}

</script>
	</head>

	<body>
		<a href="" οnclick="f12()">click me</a>

	</body>
</html>


13、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
	<head>
		<script type="text/javascript">
<!-- 全部变量与局部变量-->
		var i = 100;
function f13() {
    var i = 1000;
	alert(i);
}

</script>
	</head>

	<body>
		<a href="" οnclick="f13()">click me</a>

	</body>
</html>


14、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
	<head>
	<!-- 
	dom操作(重点)
	查找方式
	创建节点
	添加节点
	删除节点
	改变样式
	 -->
	 
<script type="text/javascript">
		
		function f14(){
		   var obj = document.getElementById('d1');
		   //alert(obj.innerHTML);//通过innerHTML可以读写一个节点的html内容
		   obj.innerHTML='i love zzt';
		}
		
</script>
	</head>

	<body>
		<a href="javascript:;" οnclick="f14()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->
         
        <div id="d1">
          <span>hello javascript</span>
        </div> 
	</body>
</html>


15、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
	<head>
	<!-- 
	dom操作(重点)
	查找方式
	创建节点
	添加节点
	删除节点
	改变样式
	 -->
	 
	 <!-- 改变文本框的内容 -->
<script type="text/javascript">
		function f15(){
		   var obj = document.getElementById('username');
		   alert(obj.value);//通过value属性可以读写一个节点的value值
		   obj.value = 'i love zzt';
		}
		
		
</script>
	</head>

	<body>
	    <input id="username" type="text"/> 
		<a href="javascript:;" οnclick="f15()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->
         
       
	</body>
</html>


16、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
	<head>
	<!-- 
	dom操作(重点)
	查找方式
	创建节点
	添加节点
	删除节点
	改变样式
	 -->
	 
	 <!-- 使用js实现求解两数之和 -->
<script type="text/javascript">
		function f16(){
		   var opp1 = document.getElementById('opp1');
		   var opp2 = document.getElementById('opp2');
		   var result = document.getElementById('result');
		   
		   var o1 = parseInt(opp1.value);
		   var o2 = parseInt(opp2.value);
		   result.value = o1+o2;
		}
		
		
</script>
	</head>

	<body>
	    <input id="opp1" type="text"/>
	    <input id="opp2" type="text"/>
	    <input id="result" type="text"/> 
	    
		<a href="javascript:;" οnclick="f16()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->
         
       
	</body>
</html>


17、

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
	<head>
	<!-- 
	dom操作(重点)
	查找方式
	创建节点
	添加节点
	删除节点
	改变样式
	 -->
	 
	 <!-- 使用js实现求解两数之和 -->
<script type="text/javascript">
		function f17(){
		   var opp1 = Math.random();//产生[0,1)的随机数
		   var opp2 = Math.floor(13.68);//向下取整. 13
		   var opp3 = Math.ceil(13.68);//向上取整 14
		   Math.c
		   alert(opp1);
		   alert(opp2);
		   alert(opp3);
		   alert(Math.random() * 33);
		}
		
		
</script>
	</head>

	<body>
	    
		<a href="javascript:;" οnclick="f17()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->
         
       
	</body>
</html>


帅气的东哥
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript的基本使用（一）
weixin_61561066的博客
05-11 659
一、JavaScript JavaScript是一个脚本语言(嵌入页面中,通过浏览器解析运行) JavaScript的组成 1、ECMAScript：是Javascript的核心，主要规定JavaScript的基本语法。所有的浏览器厂商都会遵循这个语法(标准) 2、DOM：文档对象模型(Document Object Model)，是W3c组织提供的编程接口。用户可以通过DOM的接口去操作页面中的元素 3、BOM：浏览器对象模型(Browser Object Model),独立于内容,可以和浏览器
使用JavaScript进行基本图形操作与处理
01-30
另外canvas还提供了常用的图像格式转换功能，可以使用JavaScript简单快捷地更改图像的编码方式。出于安全考虑，浏览器通常不允许处理跨域图像，但利用特殊的手段是可以突破这一限制的。解决处理跨域图像出现的安全...
js 的基本使用
不愿透露姓名的小官同学
04-09 174
javaScript 的概述 javaScript，通常缩写为JS，是一种高级的，解释型语言的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持 javaScript 的特点 特点 ja...
第七次课：js
m0_62395433的博客
02-22 199
一、简介 js是一个简称，全称：JavaScript js的功能： 是一个功能强大的脚本语言【脚本：代码量较小的程序】 js可以嵌入到html页面中，实现各种特效 案例： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> ...
JavaScript的基本使用
qq_1114382703的博客
02-26 1128
JavaScript简称为js，其中的部分语句和Java中是相同的，但js是一门弱类型的语言，所以两者还是有一点微小的区别，js的主要作用是用于给HTML页面页面上添加动态效果与交互操作，ECMA相当于JS的语言标准，目前最高是ES6。
javascript基本包装类型介绍
10-24
主要介绍了javascript的基本包装类型，JS为了便于操作基本类型,提供了3个特殊的引用类型:Boolean/Number和String,需要的朋友可以参考下
JavaScript学习笔记（一） js基本语法
10-28
JavaScript学习笔记（一） js基本语法，想要学习js的朋友可以参考下。
JavaScript函数使用的基本教程
10-24
主要介绍了JavaScript函数使用的基本教程,是JS入门学习中的基础知识,需要的朋友可以参考下
JavaScript实现使用Canvas绘制图形的基本教程
10-21
本篇文章主要介绍了JavaScript实现使用Canvas绘制图形的基本教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
JavaScript的学习及基础用法（1）
命z的博客
05-23 482
HTML定义了网页的内容，CSS描述了网页的布局，JavaScript网页的行为。JavaScript是脚本语言，是一种轻量级的编程语言，可插入HTML页面的编程代码。1、HTML中的脚本必须位于&lt;script&gt;与&lt;/script&gt;标签之中。2、如果需要插入JavaScript，要使用&lt;script&gt;标签。3、脚本可以被放置在HTML页面的&lt;body&gt...
JS作用域
liying123466的博客
08-28 226
JS的作用域，在你写一些函数的时候用处真的挺大的。大家跟着我的步伐来看一些其中的作用域的问题 对于JS来说其中对于JS来说其中包括至少两个步骤 （1）预解析【含有var，含有函数，其中含有参数】 a.其中找到的含有var的这里只是简单的找到了变量的名字，其中的变量的值是未定义的 b.其中在这里找到的函数则就是将其中的函数全部找到 （2）逐行解析【表达式：= + - * / % ++ --
JS当中的flag是什么梗？
weixin_53223320的博客
03-23 1618
var flag =true; if(flag){ //当为真时，执行下面的代码 console.log(‘执行程序1’) } else{ //当为假时，执行下面的代码 console.log(‘执行程序2’) } 注：上面的flag值默认是’true’，所以执行‘程序1’，如果flag的默认值为’false’,那么执行‘程序2’，我认为她只是随便定义的一个变量，一个变量名称。 ...
JavaScript基础教程之flag的用法
热门推荐
monkeyfly学前端
01-10 3万+
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 前提 今天学习了DOM基础方面的知识，可谓是收获颇丰。在重新认真学习JavaScript的过程，对比第一次学习而言，体会就是不一样。虽然整体感觉轻松了许多，但书中还是有很多细小琐碎的知识点值得思索和推敲。在我看来，有一本优秀的入门教程书是多么的重要，因为它不但会提升我学习的兴趣，而且可以促进我更快地学习和掌握知
JS中flag使用场景之一
前端开发-陈善强
11-29 6778
根据不同的flag值，执行相应的程序： 1、 var flag =true; if(flag){ //当为真时，执行下面的代码 console.log('执行程序1') } else{ //当为假时，执行下面的代码 console.log('执行程序2') } 注：上面的flag值默认是...
javascript--12---作用域
lxhby520的博客
05-30 108
作用域什么是作用域作用： 对代码的一个读写操作域：空间 范围 js能实现的一个范围&lt;script&gt; console.log(a); var a =1; &lt;/script&gt;结果是undefined没有声明为什么会报undefined？ 首先预解析 找到a 为undefined 执行代码 =改变变量的值 但是console在等号之前 所以结果是 undef...
JS - if(flag) if(!flag)
weixin_30819085的博客
09-08 1926
1, if(flag) 判断是否为 true 2, if(!flag) 判断是否为false 转载于:https://www.cnblogs.com/500m/p/11484837.html
关于JS !!flag 语法
weixin_33720078的博客
09-18 1478
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript基本使用
最新发布
03-27
以下是JavaScript的基本使用： 1. 在HTML文件中引入JavaScript代码：可以在HTML文件的或标签中使用标签引入JavaScript代码，例如： ``` <script src="script.js"> ``` 2. 声明变量：可以使用var、let或const...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

帅气的东哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值