初识JavaScript

JavaScript第1天

认识JS

  • 网页的组成
    • HTML 网页的结构
    • CSS 网页的样式
    • JS 网页的行为

    如果把网页比作我们人类,那么html代表的就是我们人类的骨架来支撑我们整个人;css就是我们的皮肤或者五官,可以体现我们的外在美;Js我们可以看做我们的动作行为,比如说吃饭喝水等等。

  • JS的组成
    • ECMAscript JS的语法,表示JS应该怎么去写?如何去写
    • DOM(Document Object Model) => 文档对象模型 提供了一套操作文档流的属性与方法
    • BOM(Borwer Object Model) => 浏览器对象模型 提供一套操作浏览器的属性与方法

    我们可以把ECMAscript看做我们的汉字来表达我们的想法规范我们的书写;DOM操作的实际上就是我们所写的html元素;BOM操作的是我们的浏览器比如我们浏览器的前进后退或者是刷新等等操作。

JS的注释

我们在写js代码的时候总会有一些是不想让浏览器执行的语句这个时候就要用到我们的注释了.

注释的作用:有效的帮助了解代码流程。

注释的写法:

  1. 单行注释(//):在注释行的开头加上(//
  2. 多行注释(/**/):可以在注释内容开头加上(/*),在注释内容的结尾加上(*/
// 这是一个单行注释
/*
    这是第一行
    这是第二行
*/

拓展:
以上两种是我们在编写js经常使用的注释写法,但是在JS中我们还有第三种注释的写法:

单行注释(<!--):

<!-- 我是单行注释

JS语法对与这个HTML风格的注释的处理结果是和(//)的处理结果是一样的哦,不过在HTML文档中还需要使用(-->)结尾,但在JS中会把(-->)视为注释内容得一部分。

JS的变量

变量就是使用一个可以未知数来存储一个值

我们以前在数学当中学过一个未知数 比如:

x = 10;
y = 20;

在JS这语法当中也提供了一个可以存储值的这个未知数,那么这个未知数就叫做变量

X = 10;
Y = 20;

我们在JS当中,建议将变量前面添加一个var,这var 表示用来声明这个变量的

var x = 10;

var y = 20;

var => 用来声明这个变量的

x => 变量的名字

10 => 变量的值

比如:

var a = 10;
var b = 20;
var c = "余美丽"

JS的书写

我们以前有学习过CSS的书序 => 行内写法,内嵌写法,外嵌写法 那么JS也有三种写法

行内写法

行内写法就是将JS代码直接在标签的身上 行内写法非为两种

  • a标签的写法

原因是a标签具有自己的行为 => <a href="http://www.baidu.com">这是一个a标签</a>

比如: <a href="javascript:alert("");"></a> => 注意:在写JS代码的时候,如果外面是双引号,那么里面写单引号,如果外面是单引号,那么里面写双引号

语法:

<a href="javascript:JS代码;"></a>
  • 非a标签的写法

    非a标签没有自己的行为 比如:

    这是一个div

    他没有自己的行为

语法:

<p οnclick="JS代码"></p>
  1. 内嵌写法 就是在网页当中写一段JS代码 用法就是通过一个script双标签网页当中,理论上可以写在网页的任何地方,但是我一般推荐写在body的尾标签之前

语法:

<html>
</html>
<body><script>
    //推荐将JS代码写在这里面
</script>
</body>
注意:内嵌写法,当我们将网页打开的是就直接执行了
  1. 外嵌写法 就是写一个*.js文件,通过script的双标签的src属性引入到网页当中

使用:

//1.创建一个 A.js
//2.在A.js文件当中写一个 alert('你好!')
//3.在网页当中通过script双标签的src属性形式引入进来

注意:外嵌写法同样是当浏览器一打开的时候,直接运行

总结:

  1. 单词不要写错 on click=
  2. 我不要a标签上面的那个默认行为 =><a href="javascript:;"></a>
  3. 我们一般强烈不推荐使用行内写法,不推荐内嵌写法,推荐外嵌写法,但是我们上课为了方便,使用内嵌写法

    补充一下: JS的第一句代码

    alert("JS的第一句代码") => 弹出的意思

    JS现在的目的是为了浏览器的服务的,所以JS可以直接在浏览器的控制台上面编写:
    控制台在=> 打开网页 => 右键检查 => 找到一个console(界面如下图)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZkJelCvn-1669098048387)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4961d1d7953644d08de9476bafb39689~tplv-k3u1fbpfcp-watermark.image?)]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值