HTML/CSS/JavaScript基础学习day03

简介: 本内容为阿铭学习JavaScript的第三天笔记,涵盖JavaScript基础概念、引入方式、基础语法、变量声明、数据类型、运算符、类型转换及流程控制语句等内容,适合初学者了解JavaScript编程语言的核心知识点。

阿铭学习day03

1.JavaScript(简称JS,一门跨平台、面向对象的脚本语言,是用来控制网页行为的,实现人机交互效果)

2.引入方式(两种)

  • 内部脚本,将JS代码定义在HTML页面中
  • image.png
  • image.png
  • 重点1:JavaScript代码必须位于<script></script>标签之间
  • 重点2:在HTML文档中,可以在任意地方,放置任意数量的<script>
  • 重点3:一般会把脚本置于<body>元素的底部,可改善显示速度
  • 外部脚本,将JS代码定义在外部 JS文件中,然后引入到 HTML页面中
  • image.png
  • image.png
  • image.png
  • 重点1:外部JS文件中,只包含JS代码,不包含<script>标签
  • 重点2:引入外部js的<script>标签,必须是双标签

3.基础语法

  • 书写规范
  • 区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的 。
  • 每行结尾的分号可有可无 【推荐要么全都写,要么全都不写,一般都写(同java)】。
  • 大括号表示代码块。
  • 三种输出语句
  • 警告框输出:
  • image.png
  • image.png
  • 在HTML中输出:
  • image.png
  • image.png
  • 写入浏览器控制台(控制台按键盘F12键打开)
  • image.png
  • image.png
  • 变量
  • let:声明变量(JS是一门弱类型语言,变量是可以存放不同类型的值的。
  • image.png
  • image.png
  • 变量名规则1:组成字符可以是任何字母、数字、下划线(_)或美元符号($),且数字不能开头
  • 变量名规则2:变量名严格区分大小写,如:name和Name是不同的变量
  • 变量名规则3:不能使用关键字作为变量名,如:let、if、for等
  • 变量名规则4:let不能重复声明同一个变量
  • image.png
  • const:声明常量(一但声明,则不可以改变其值)
  • image.png
  • image.png
  • image.png
  • image.png
  • var:声明变量(可以重复声明同一个变量,但不推荐使用var声明,一般都使用let)
  • image.png
  • image.png
  • 数据类型(原始数据类型、引用数据类型)
  • 原始数据类型(使用typeof获取对应变量的数据类型):
  • number:数字(整数、小数、NaN(Not a Number))
  • image.png
  • image.png
  • string:(字符串,单双引('...')、双引号("...")、反引号(`...`)皆可,正常使用推荐单引号
  • image.png
  • image.png
  • boolean:(布尔。true,false)
  • image.png
  • image.png
  • null:(对象为空。 JavaScript 是大小写敏感的,因此 null、Null、NULL是完全不同的
  • image.png
  • image.png
  • undefined:(当声明的变量未初始化时,该变量的默认值是 undefined)
  • image.png
  • image.png
  • 拼接字符串和变量:
  • image.png
  • image.png
  • 运算符
  • 运算符:
  • 算术运算符:+ , - , * , / , % , ++ , --
  • 重点:
  • num++/num--(先用变量再+/-1)
  • ++num/--num(先+/-1再用变量)
  • image.png
  • image.png
  • 赋值运算符:= , += , -= , *= , /= , %=
  • 比较运算符:> , < , >= , <= , != , == , ===   注意     == 会进行类型转换,=== 不会进行类型转换
  • image.png
  • image.png
  • 逻辑运算符:&& , || , !
  • image.png
  • image.png
  • image.png
  • image.png
  • image.png
  • image.png
  • 三元运算符:条件表达式 ? true_value: false_value
  • image.png
  • image.png
  • 类型转换(在某些运算被执行时,系统内部自动将数据类型进行转换,这种转换成为 隐式转换。
  • 字符串与数字
  • +两边只要有一个是字符串,都会把另外一个转成字符串。
  • image.png
  • image.png
  • 除+号以外的所有算术运算符,都会把字符串转为数字类型
  • image.png
  • image.png
  • 通过parseInt(...)函数,可以将一个字符串转为数字。
  • image.png
  • image.png
  • 使用parseInt函数时需要注意的点:
  • parseInt函数从字符串开始位置逐个字符解析,遇到第一个不能构成数字的字符时,就会停止解析,返回已经解析好的结果
  •   image.png
  • image.png
  • 当解析第一个字符就不是数字时,则直接停止解析,并返回NaN
  • image.png
  • image.png
  • 其他类型转化为布尔类型
  • Number:0和NaN转为false,其他都是true
  • image.png
  • image.png
  • String:空字符穿为false,其他都是true
  • image.png
  • image.png
  • Null 和 undefined :均转为false
  • image.png
  • image.png
  • 流程控制语句
  • if语句(if为关键字,当条件表达式结果为true时,才执行{}代码块内的代码)
  • image.png
  • image.png
  • if...else语句(当条件表达式结果为false时,执行else后代码块里的代码)
  • image.png
  • image.png
  • else...if语句(可有多个条件表达式)
  • image.png
  • image.png
  • for循环(处理重复多次事件)
  • image.png
  • image.png



相关文章
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
211 1
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
153 1
|
3月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day03-作业
本教程通过多个实例讲解JavaScript中for循环的常见用法,包括遍历数组、元素加1、求最大值/最小值、计算平均值、过滤偶数及字符串拼接等操作,并附有代码示例和运行结果图。
63 3
|
6月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
前端开发 JavaScript 算法
HTML/CSS/JavaScript基础学习day03-作业
本内容包含多个 JavaScript 编程示例,涵盖数组遍历、条件筛选、字符串处理、数值计算等常见操作,适合练习基础算法与逻辑思维。
102 5
|
4月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day01
阿铭学习HTML基础,包括VSCode快捷生成代码、常用标签如head、title、body、img、a、p等的使用,以及CSS选择器的优先级和基本样式设置,适合前端入门学习。
178 12
|
3月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day02-作业
本教程介绍了JavaScript基础编程练习,包括使用for循环打印数字、判断奇偶数、计算总和以及用if语句判断正数的方法。每部分均配有示例代码和运行结果图,帮助初学者理解循环与条件判断的应用。最后通过思维导图回顾所学内容,强化知识点记忆。
78 2
|
4月前
|
XML 人工智能 前端开发
HTML/CSS/JavaScript基础学习day02
阿铭学习day02内容涵盖VSCode常用插件安装与配置,如中文语言包、路径提示、Vue开发工具等,同时介绍了通义灵码AI编程助手的使用方法,提升开发效率。
72 1
|
3月前
|
前端开发 JavaScript 索引
HTML/CSS/JavaScript基础学习day04
阿铭学习JavaScript函数与对象的基础知识,包括函数定义、调用方式及参数使用,以及Array和String对象的常用操作。
89 0