JavaScript学习

目录

🎁1.JS简介

📓2.JS的组成部分

✍️3.作用(六大作用)

🥇(1)直接在Script输出。

💒(2)对事件做出反应。

🧱(3)改变HTML内容。

📑(4)改变HTML图像。

🏷️(5)改变HTML样式。

💯(6)验证输入。

📒4.Javascript的书写方式

        📜4.1   行内式

         📑4.2   内嵌式

       📄 4.3   外部JS文件(最常见的方式)

📙5.Javascript的注释

        🏫5.2    单行注释

        👨‍🎓5.2    多行注释

🎁6.Javascript的输入输出

🌐7.Javascript声明变量

       🏅 7.1    JS中用关键字var声明一个变量

        📚 7.2     声明变量特殊情况

         🏫 7.3     变量命名规范

💯8.Javascript中的基本数据类型

          📓 8.1    数字型Number

          📜  8.2     布尔值类型 Boolean

           💒 8.3     字符串类型 String

             📙 8.4      Undefined 和 Null


🎁1.JS简介

JavaScriot简称(“JS”),是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。是目前web开发中不可缺少的脚本语言,JS不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。(虽然它不是万能的,但可以通过简短的代码来实现神奇的功能。)

📓2.JS的组成部分

  • 这里再说一下,在HTML加载到浏览器内存之后,可以对内存中的HTML节点进行修改,用户从浏览器看到的就是JS动态修改后的界面。

✍️3.作用(六大作用)

🥇(1)直接在Script输出。

<body>
<script>
    document.write("<h1>写入html输出,可以直接在页面上输出html内容</h1>");
</script>
</body>

💒(2)对事件做出反应。

<body>
<script>
    document.write("<h1>写入html输出</h1>");
    function touchBegin() {
        alert("开始响应事件");
    }
</script>
 
<button onclick="touchBegin()">点击响应事件</button>
<br>
<p2>或者你可以这样写</p2>
<br>
<button onclick="alert('开始响应事件')">点击响应事件</button>
//注意在双引号内部不要继续使用双引号,对于字符串使用单引号代替
</body>

🧱(3)改变HTML内容。

<body>
<script>
    function changeContent() {
        x = document.getElementById("fuck");
        x.innerHTML = "小子 我改变了你的内容";
    }
</script>

<p1 id ="fuck">这是我原来的内容</p1>
<button onclick="changeContent()">点击这里可以改变html的内容</button>
</body>

📑(4)改变HTML图像。

​
element=document.getElementById(
'myimage'
) 
 //得到img这个元素
        
 
element.src=
 "/i/eg_bulboff.gif"
;  
 //改变Src属性,也就相当于给它换了张图片

​

🏷️(5)改变HTML样式。

x=document.getElementById(
"demo"
) 
//同样通过id找到元素
        
 
x.style.color=
"#ff0000"
;  
//改变样式

💯(6)验证输入。

If( isNaN(x)) {alert(
"Not Numeric"
)}; 
// isNaN( ) 这是一个方法,专门用来判断括号中是否全为数字,是为true
        

📒4.Javascript的书写方式

        📜4.1   行内式

<input type="button" value="点我试试" onclick="alert('Hello World')" />
  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
  • 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号。
  • 可读性差, 在html中编写JS大量代码时,不方便阅读;
  • 引号易错,引号多层嵌套匹配时,非常容易弄混;
  • 特殊情况下使用。

         📑4.2   内嵌式

<script>
 alert('Hello World~!');
 </script>
  • 可以将多行JS代码写到 <script> </script> 标签中。

  • 内嵌 JS 一般写在head或者body最后面,让别的项目加载完再加载JS。

       📄 4.3   外部JS文件(最常见的方式)

    (1)先创建.js文件

    (2)通过<script src="js文件名"></script>标签将外部的js文件链接到页面中。如下:

<script src="my.js"></script>
  • 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用。

  • 引用外部 JS文件的 script 标签中间不可以写代码。

  • 适合于JS 代码量比较大的情况。

📙5.Javascript的注释

        🏫5.2    单行注释

  • 为了提高代码的可读性,JS与CSS一样,也提供了注释功能。JS中的注释主要有两种,分别是单行注释和多行注释。单行注释的注释方式如下:
 alert('Hello World~!');// 我是一行文字,不想被 JS引擎 执行,所以 注释起来
// 用来注释单行文字( 快捷键 ctrl + / )

        👨‍🎓5.2    多行注释

 alert('Hello World~!');
/*
wo
最
帅
*/

🎁6.Javascript的输入输出

  • **alert/prompt/confirm来源于window对象**

🌐7.Javascript声明变量

       🏅 7.1    JS中用关键字var声明一个变量

 //声明变量
 var age ; // 声明一个名称 age 的变量
 age = 18;
 var name = 'aniu' //变量的初始化
  • var 是一个 JS 关键字,用来声明变量( variable 变量的意思)。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管。
  • age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间。

        📚 7.2     声明变量特殊情况

         🏫 7.3     变量命名规范

  • 由字母( A - Za - z )、数字(0-9)、下划线(_)、美元符号($)组成。
  • 严格区分大小写。 var app ;和 var App ;是两个变量。
  • 不能以数字开头。18age是错误的。
  • 不能是关键字、保留字。例如: var 、 for 、 while
  • 变量名必须有意义。
  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myName

💯8.Javascript中的基本数据类型

JavaScript 是一种弱类型或者动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。如下:

 var age =18; I //这是一个数字型
 var ok ='是'; //这是一个字符串

          📓 8.1    数字型Number

  • 数字型进制
  • 最常见的进制有二进制、八进制、十进制、十六进制。 

          📜  8.2     布尔值类型 Boolean

  • 布尔型 Boolean 只有两个值,一个是  true, 一个是 false。
 var flag = true;
 var flag1 = false;
 console.log(flag);
 console.log(flag1);

           💒 8.3     字符串类型 String

  • JS中转义字符串

  • \n  // 换行
  • \r  // 回车
  • \\
  • \'
  • \"
  • \t
  • \b  // 空格
  • \xnn  // 16进制字符,如 \x41 代表 'A'
  • \unnn  // 16进制 unicode 字符, 如 \u03a3 代表∑        

             📙 8.4      Undefined 和 Null

  • 一个声明后没有被赋的变量会有一个默认值 undefined
  • 一个声明变量给 null 值,里面存的值为空 

最后JavaScript的基本介绍就到这里,后续我会继续总结深入了解JS,祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Kissship

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

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

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

打赏作者

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

抵扣说明:

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

余额充值