JavaWeb学习笔记03-JavaScript

最新推荐文章于 2023-11-01 18:30:40 发布
最新推荐文章于 2023-11-01 18:30:40 发布
阅读量147 收藏 1
点赞数
分类专栏： web 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wy19961103/article/details/103243737
版权

1概念：

一门客户端脚本语言.运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎

脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能： 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

2.JavaScript发展史：

	1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C--	，后来更名为：ScriptEase
	2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
	3. 1996年，微软抄袭JavaScript开发出JScript语言
	4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
  • JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
  • ECMAScript：客户端脚本语言的标准

3 基本语法：

		1. 与html结合方式
			1. 内部JS：
				* 定义<script>，标签体内容就是js代码
			2. 外部JS：
				* 定义<script>，通过src属性引入外部的js文件
			* 注意：
				1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
				2. <script>可以定义多个。
		
		2. 注释
			1. 单行注释：//注释内容
			2. 多行注释：/*注释内容*/
		
		3. 数据类型：
			1. 原始数据类型(基本数据类型)：
	number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
	string：字符串。 字符串  "abc" "a" 'abc'
    boolean: true和false
	 null：一个对象为空的占位符
	undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
			2. 引用数据类型：对象

代码实现;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS与HTML结合方式</title>
</head>
<body>
<script>
    alert("Hello world");
</script>
<script src="js/a.js"></script>
</body>
</html>

4. 变量
			* 变量：一小块存储数据的内存空间
			* Java语言是强类型语言，而JavaScript是弱类型语言。
				* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
				* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放**任意类型的数据。**
			* 语法：
				* var 变量名 = 初始化值;
			
			* typeof运算符：获取变量的类型。
				* 注：null运算后得到的是object

代码实现：变量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础语法</title>
</head>
<body>
<script>
    //定义变量
    /* var a  = 3;
     alert(a);
     a = "abc";
     alert(a);*/
    //定义number类型
    var num = 1;
    var num2 = 1.2;
    var num3 = NaN;
    //出到页面上
    document.write(num+"<br>");
    document.write(num2+"<br>");// 换行
    document.write(num3+"<br>");
    //定义string类型
    var str = "abc";
    var str2 = 'edf';
    document.write(str+"<br>");
    document.write(str2+"<br>");
    //定义boolean
    var flag = true;
    document.write(flag+"<br>");
    // 定义null,undefined
    var obj = null;
    var obj2 = undefined;
    var obj3 ;
    document.write(obj+"<br>");
    document.write(obj2+"<br>");
    document.write(obj3+"<br>");
</script>
</body>
</html>

代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于变量的类型判断</title>
</head>
<body>
<script >
    //定义变量
    /* var a  = 3;
     alert(a);

     a = "abc";
     alert(a);*/

    //定义number类型

    var num = 1;
    var num2 = 1.2;
    var num3 = NaN;

    //输出到页面上
    document.write(num+"---"+typeof(num)+"<br>");
    document.write(num2+"---"+typeof(num2)+"<br>");
    document.write(num3+"---"+typeof(num3)+"<br>");

    //定义string类型
    var str = "abc";
    var str2 = 'edf';
    document.write(str+"---"+typeof(str)+"<br>");
    document.write(str2+"---"+typeof(str2)+"<br>");
    //定义boolean
    var flag = true;
    document.write(flag+"---"+typeof(flag)+"<br>");
    // 定义null,undefined
    var obj = null;
    var obj2 = undefined;
    var obj3 ;
    document.write(obj+"---"+typeof(obj)+"<br>");
    document.write(obj2+"---"+typeof(obj2)+"<br>");
    document.write(obj3+"---"+typeof(obj3)+"<br>");
</script>
</body>
</html>

5. 运算符
		1. 一元运算符：只有一个运算数的运算符
				++，-- ， +(正号)  
				* ++ --: 自增(自减)
					* ++(--) 在前，先自增(自减)，再运算
					* ++(--) 在后，先运算，再自增(自减)
				* +(-)：正负号
			    * 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
                * 其他类型转number：
                        * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
                        * boolean转number：true转为1，false转为0
			2. 算数运算符
				+ - * / % ...

			3. 赋值运算符
				= += -+....

			4. 比较运算符
				> < >= <= == ===(全等于)
				* 比较方式
                  1. 类型相同：直接比较
                      * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
                  2. 类型不同：先进行类型转换，再比较
                      * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
			5. 逻辑运算符
				&& || !
				* 其他类型转boolean：
                   1. number：0或NaN为假，其他为真
                   2. string：除了空字符串("")，其他都是true
                   3. null&undefined:都是false
                   4. 对象：所有对象都为true
			6. 三元运算符
				? : 表达式
				var a = 3;
		        var b = 4;
		        var c = a > b ? 1:0;
				* 语法：
					* 表达式? 值1:值2;
					* 判断表达式的值，如果是true则取值1，如果是false则取值2；

代码实现运算符：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
<script>
    var num = 3;
    var a = ++ num ;

    document.write(num);// 4
    document.write(a); // 3 4
    document.write("<hr>");

    var b = +"123abc";
    document.write(typeof (b));   //NaN
    document.write(b + 1);
    document.write("<hr>");

    var flag = + true;
    var f2 = + false;
    document.write(typeof (flag) + "<br>");//number
    document.write(flag + "<br>");// 1
    document.write(f2 + "<br>");// 0
</script>
<！--运算运算符-->
<script>
    var a = 3;
    var b = 4;
    document.write(a+b +"<br>");
    document.write(a-b +"<br>");
    document.write(a*b +"<br>");
    document.write(a/b +"<br>");
    document.write(a%b +"<br>");
</script>
<!--比较运算符-->
<script>
   
    document.write((3 > 4) +"<br>");
    document.write(("abc" < "acd") +"<br>");
    document.write(("123" == 123) +"<br>");
    document.write(("123" === 123) +"<br>");
</script>
<!--逻辑运算符-->
<script>
  
    var flag = true;
    document.write(flag+"<br>");
    document.write(!flag+"<br>");

    document.write("<hr>");
    //number
    var num = 3;
    var num2 = 0;
    var num3 = NaN;
    document.write(!!num+"<br>");
    document.write(!!num2+"<br>");
    document.write(!!num3+"<br>");

    /*while(1){   <!--应用-->

    }*/

    document.write("<hr>");
    //string

    var str1 = "abc";
    var str2 = "";
    document.write(!!str1+"<br>");
    document.write(!!str2+"<br>");

    document.write("<hr>");
    // null & undefined
    var obj = null;
    var obj2;
    document.write(!!obj+"<br>");
    document.write(!!obj2+"<br>");

    document.write("<hr>");

    // null & undefined
    var date = new Date();
    document.write(!!date+"<br>");

    document.write("<hr>");



    obj = "123";
    if(obj != null && obj.length > 0){//防止空指针异常
        alert(123);
    }
    //js中可以这样定义，简化书写。
    if(obj){//防止空指针异常
        alert(111);
    }
</script>
<!--三元运算符-->
<script>
    var a = 3;
    var b = 4;
    var c = a > b ? 1:0;
    alert(c);
</script>

</body>
</html>

6. 流程控制语句：
			1. if...else...
			2. switch:
		* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
			* switch(变量):
				case 值:
		* 在JS中,switch语句可以接受任意的原始数据类型
			3. while
			4. do...while
			5. for
7. JS特殊语法：
			7. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
			8. 变量的定义使用var关键字，也可以不使用
        		* 用： 定义的变量是局部变量
                * 不用：定义的变量是全局变量(不建议)

代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制语句</title>
</head>
<>
<!--特殊语句，加；或者加不加var-->
<script>
    //1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
    var a = 3;
    //alert(a);

    /*
        2. 变量的定义使用var关键字，也可以不使用
            * 用： 定义的变量是局部变量
            * 不用：定义的变量是全局变量(不建议)
     */

    /*   b = 4;
       alert(b);*/
    var b ;
    function fun(){
        b = 4;
    }
    fun();

    alert(b);
</script>
<!--流程控制语句-->
<script>
        var a = 1;
        switch(a){       //什么类型都能接收
            case 1:
             alert("number");
             break;
            case 2:
                alert("string");
                break;
            case 3:
                alert("boolean");
                break;
            case 4:
                alert("ont");
                break;

        }
</script>
<1--while语句求100以内的和-->
<script>
    var sum =0;
    var num =1;
    while(num<=100){
        sum +=num;
        num++;
    }
    alert(sum);
</script>
<!--for语句实现-->
<script>

    //1 ~ 100 求和  5050
    var sum = 0;
    for (var i = 1; i <= 100; i ++){
        sum += i;
    }
    alert(sum);

</script>

</body>
</html>
  1. 99乘法表练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法</title>
</head>
<body>
<style>
    td{
        border: 1px solid;
    }

</style>

<script>

    document.write("<table  align='center'>");


    //1.完成基本的for循环嵌套，展示乘法表
    for (var i = 1; i <= 9 ; i++) {
        document.write("<tr>");
        for (var j = 1; j <=i ; j++) {
            document.write("<td>");

            //输出  1 * 1 = 1
            document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");

            document.write("</td>");
        }
        /*//输出换行
        document.write("<br>");*/

        document.write("</tr>");
    }

    //2.完成表格嵌套
    document.write("</table>");

</script>

</body>
</html>
Jackson王
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 教程 （详细 全面）
梁辰兴的博客
10-31 7万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
Javascript 基础知识学习
岳来的博客
11-23 6932
javascript 基础学习
JavaScript的学习
m0_66030479的博客
07-09 1620
js的学习
Javascript学习
守灯者的博客
03-04 1338
Javascript 学习记录
js倒计时读秒
老实敲代码，佛只渡有缘人
08-23 694
前端实现点击倒计时获取验证码
JavaScript 入门(简单易懂) 看这一篇就够了
2301_77638787的博客
08-06 9752
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习。
javascript学习（入门）
m0_61871870的博客
05-05 1242
/写法一 function 函数名(参数) {函数体 return 返回值;} //写法二 var 方法名 = function(参数) {函数体 return 返回值;一旦执行到return代表函数结束。如果没有return 函数执行完也会返回结果，结果就是undefined参数问题：js可以传任意个参数，也可以不传参数（返回NaN）传参问题：当传入的参数多于形参数量时，多余的参数会放在arguments中，要想操作多余的参数，可以使用…rest。
JavaScript基础(一)
Decode
11-12 1431
文章目录1. 概念2. 功能3.组成部分4. ECMAScript：客户端脚本语言的标准1. 基本语法： 1. 概念 一门客户端脚本语言 JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增...
学习JavaScript看这一篇就够了！
Geng_____的博客
08-07 902
外部形式一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 标签的 属性引入。 注释和结束符 单行注释使用 注释单行代码 多行注释使用 注释多行代码 输入输出 输入向 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。 输出JavaScript 可以接收用户的输入，然后再将输入的结果输出：、以数字为例，向 或 输入任意数字，他都会以弹窗形式展示（输出）给用户。变量是计算机中
JavaScript学习
最新发布
weixin_54203047的博客
11-01 94
变量就是一个用来装东西的盒子，即术语 ‘容器’ ，它是计算机用来存储数据的容器，而且变量不等于数据本身。未定义是比较特殊的类型，只有一个值undefined。什么情况出现未定义类型?只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefinedDOM (Document Object Model——文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能DOM作用。
JavaScript入门学习指南
qq_42560575的博客
04-15 2498
适合初学者入门自学
Javascript初级教程（适合新手）
Ashboon的博客
07-22 1916
1)定义变量的三要素 :var 变量名 = 初始化值; 2)定义所有的变量都是var,而且var可以省略不写! 3)js中,变量可以重复定义的,后面的值将前面的值覆盖!在js中定义函数的格式function 函数名(参数名1,参数名2,....){完成的函数的逻辑return 结果;//返回结果调用函数:赋值调用:var 变量名= 函数名(实际参数1,实际参数2..)以下为简单的函数实例var m = prompt("请输入一个数")
JavaScript学习简记
默默无闻但不碌碌无为
09-15 1909
JavaScript诞生主要是为了完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码首先，JavaScript是一门单独的语言，与java无关与java是一门强类型的语言不同的是，js(即JavaScript)是一门弱类型的语言这里所提到的弱类型指的是类型可变，JavaScript不像java是强类型强类型就是定义变量时，类型已确定且不可变JavaScript特点：交互性（它可以实现信息的动态交互）安全性（它不允许直接访问本地磁盘）跨平台性。
javascript知识点汇总（基础很全，文章最后还有思维导图）
weixin_44641804的博客
09-02 5867
前端规范： 总文件夹内：html、css、img、js、index.html五个 ·html文件夹：可n页，如found.html、person.html ·css文件夹：最多2个，style.css、common.css(公有样式，能复用于多个页面的样式抽离出来放这里) ·js文件夹：最多2个，script.js、common.js(公有js，能复用于多个页面的js抽离出来放这里) ·img文件夹：存放所有需要的图片 ·外面放index.html也可以 一、javascript基础 1.什
JavaScript从入门到精通
qq_52699757的博客
05-17 1213
JavaScript从入门到精通
JavaScript 基础入门
无法自律的人的博客
04-11 2324
HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。CSS是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。javascript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。JavaScript主要用于HTML的页面，嵌入在HTML的源码中。
JavaScript基础学习
wl0326ghb的博客
12-30 2046
js
"JavaWeb02-JavaScript学习笔记及语法总结
JavaWeb02-JavaScript学习笔记 JavaScript是一种脚本语言，可以直接由浏览器解析，不需要编译。本篇学习笔记主要介绍了JavaScript的基本语法和常用的语句、流程控制以及数组和对象的使用方法。 JavaScript的引入...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值