【笔记】 JavaScript 概述 、 JavaScript 基础语法 、 变量和常量 、 数据类型

摘要

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。[1]
为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

【笔记】 JavaScript 概述 、 JavaScript 基础语法 、 变量和常量 、 数据类型

1、Javascript
1、是什么
解释型的脚本语言
解释型:边执行边检查
2、如何运行
1、独立安装的Javascript解释器 比如:NodeJS
2、嵌入在 浏览器内核中的脚本执行引擎
3、Javascript组成
1、ECMAScript ,提供了核心的语法内容、以及各种结构
2、DOM :Document Object Model 文档对象模型
3、BOM :Browser Object Model 浏览器对象模型
4、使用Javascript
1、运行在独立解释器中的
2、浏览器内核中的脚本引擎运行Javascript
1、写在html元素内的操作
通过html元素事件完成:
onclick : 点击
onfocus : 表单元素获取焦点
onblur : 表单元素失去焦点
2、写在 <script></script>标记内
3、写在 xx.js 的脚本文件中
1、创建文件
2、编写代码
3、页面引入
5、向页面/控制台 输出数据
1、向页面输出
document.write("待渲染内容");
2、向控制台输出
console.log("待输出的内容");
2、变量(重点)
1、什么是变量
就是内存中的一段存储空间
计算机中保存数据的一个容器
2、声明一个变量
var 变量名; //声明
变量名 = 值;//赋值

var 变量名=值;//声明变量时直接赋初始值
3、使用变量
1、取值
1、输出/打印变量值
console.log(变量名);
2、为其他变量赋值
让变量出现在 赋值符号 的右边
2、赋值
1、变量出现在 赋值符号 的左边
3、注意
1、声明变量 不赋值 直接使用
变量的值为:undefined
2、直接使用未声明的变量
语法错误
4、运算符
算数运算符
+,-,*,/,%

+ :
1、求和计算 , 要求符号两边必须都是 number 类型
2、连接 ,字符串 和 数字用 + 连接的话, 就是将+右面的内容追加到+左边的变量值当中去
% : 获取两个数字 相除之后的余数
1、获取 某数字的最后某几位
2、判断奇偶性 或 某数字的倍数

(): 提升运算优先级
Javascript中,计算优先级 是 先 */%,后+-,
(25+36)*42/(7*(69+184))
5、常量
1、什么是常量
一旦在程序中声明好,就不允许被更改的数据
其目的是为了保护数据的正确性
2、声明常量
const 常量名;
注意:常量名,全大写
3、修改常量值
程序不会报错,数值也不能被修改
4、使用场合
1、生活中的常理值
比如:PI,DAYOFYEAR, ...
2、符合业务中的常规数据
3、数据类型
保存数据的类型 就是数据类型,决定了数据在内存中,占据多大的空间

1、原始类型(基本类型)
1、number
数字类型, 包含 整数,小数
赋值时,直接给数字
2、string
字符串,包含单个字符或多个字符
赋值时,需要使用 '' 或 "" 进行包裹
3、boolean
布尔型
保存 true 或 false 两个数值,多数用于保存条件判断的结果
4、undefined
1、访问了未赋值的变量
2、访问的对象的属性不存在时
5、null

2、引用类型
Object
Number
Boolean
String
...
**************************************************************
1、数据类型的转换
2、函数
3、分支结构
**************************************************************
1、数据类型转换
Javascript是弱类型的语言
1、声明变量时,不需要指定其数据类型
var name;
2、数据类型是由变量的值,来决定的

对于不同数据类型的运算时,数据类型会进行转换

number + string = string
number + boolean = number

在Javascript中,如果想查看具体的数据类型是什么的话:
typeof(), typeof
使用方式:
1、typeof(变量或表达式);
2、typeof 变量或表达式;

1、隐式转换
自动转换,不需手动指定,完全根据程序自己来转换
NaN : Not a Number, 是一个 number 类型
isNaN(数据) : 是不是一个数字
true :不是一个数字
false :是一个数字
string 与 任何数据类型相加时,得到的结果还是string
undefined 与除string意外的类型相加时,得到的结果是 NaN
2、显示转换
所有手动录入的数据,都是string类型

1、toString()
转换成string,任何数据类型的数据调用toString(),都将变成 string类型
var num1 = 12;
num1.toString();
2、parseInt()
int -> integer 整数
转换整数
将string 或 number 类型中 整数部分的数字,转换出来
语法:parseInt(待转换的数据);

从左到右的转换,碰到第一个非整数字符,则停止转换
parseInt(35.5); -->35
parseInt("35.5"); --> 35
parseInt("Hello355"); --> NaN
3、parseFloat()
float:单精度浮点类型 --> 小数
将 string 中的 小数部分转换出来,
碰到第一个非数字以及 . 的内容时,停止转换
parseFloat("55.68"); -- > 55.68 number
parseFloat("55.68Hello"); --> 55.68 number
parseFloat("Hello55.68"); --> NaN

自己尝试:
parseFloat(".568"); -->
parseFloat("568."); -->

弹出一个输入提示框:
window.prompt("要提示的文字","框中出现的默认值");

window.prompt("请输入工资","0");

prompt("要提示的文字","框中出现的默认值");

prompt("请输入工资","0");

2、函数
url(图像的路径) : 完成了一个 根据图像路径显示图像 的功能
linear-gradient() : 完成了一个 根据传递进来的指定数据,显示渐变颜色 的功能
rotate(45deg) : 完成一个 顺时针旋转45度 的功能

Javascript中的函数
完成 ... 的功能

1、什么是函数
函数(function),也称之为方法。是一段被预定义好,可以被反复使用的代码块。是一个独立的功能体。可以将若干操作代码,放在一个函数中。
2、定义函数 以及 功能
语法规范:使用 function 关键字定义
function 函数名称(){
//若干执行代码
}

注意:函数定义好之后,运行过程中函数不会立即执行,只有在 【调用】 之后才会被执行
3、调用函数
语法:函数名称();

事件中调用 : 事件="函数名称"
<button onclick="functionName()"></button>
4、什么样的内容适合放在 function 中
1、要被反复执行的代码,适合放在 function 中声明
2、要被元素事件所调用的东西,适合在 function 中
3、本身就是一段独立的功能的代码 ,适合放在 function 中
4、网页加载时不想被执行,在某个特殊的时机要执行的东西,适合放在 function 中

函数本身也是一个功能完整的“对象”
5、定义带参数函数
榨汁机 --> function

榨汁机 到底能 榨出来什么 , 取决于 原材料
原材料 --> 参数 , 可以是苹果,梨,苹果梨

参数 就是为 function 提供 在运行过程中所需要用到的数据

语法:function 函数名(参数列表){}
参数列表:用 , 隔开的多个参数名(变量名)
在定义函数功能时所定义的参数,称之为 形式参数,简称形参

function test1(num1){
num1 可以参与函数的运算
}

function calculate(num1,num2){

}

function zhaZhiJi(fruit){

}
调用带参数的函数:
调用带参数的函数时,必须向里面 “传递参数”
调用过程中,传递的参数,称之为 ”实际参数“ --> 实参

function zhaZhiJi(fruit){
console.log("正在榨" + fruit + "汁");
}

调用 zhaZhiJi()

zhaZhiJi("苹果");

function calculate(num1,num2){

}

3、分支结构
1、流程控制
程序 = 数据结构 + 算法

数据结构:
数据 :程序在运行过程中,所需要用到的数值
结构 :数据之间的关系
算法:解决问题的方式和方法

程序的三种结构:
1、顺序结构
代码从顶向下依次执行
2、分支 / 选择 结构
根据 条件 ,选择一部分代码去执行
3、循环结构
根据 条件 ,判断是否要重复的执行某一段代码

流程图:以"图形"的方式描述程序/功能的走向
1、圆角矩形
表示 程序 / 功能 的开始 或 结束
2、平行四边形
表示 数据的输入 和 输出
3、矩形
数据的处理
4、菱形
表示 条件判断
2、运算符
>,<,>=,<=,==,!=
== : 判断等于,判断两边的操作数,是否相等 ,如果相等,则为true,否则为false
5 == 5 : true
3 <=5 : true
5 >= 5 :true
!= : 两边操作数 不相等为真, 相等 为假

以上六个运算符,返回结果都为 boolean 类型
3、if结构
当条件满足时,执行某些语句,条件不满足时,则不运行这些语句

语法:
if(条件){
语句块;
}

条件:返回结果为 boolean 类型的变量或表达式(逻辑表达式)
若出现的值不是boolean类型,则会自动转换

以下出现的情况作为 假 false 处理:
if(0){

}

if(0.0){

}

if(null){

}

if(undefined){

}

if(NaN){

}

if(""){

}
**************************
if("张三丰"){
console.log("我是张三丰");
}
注意:if(条件){} {}可以省略,如果省略的话,if只负责控制它下面的第一条语句
4、if ... else 结构
语法:
if(条件){
语句块1;
}else{
语句块2;
}

如果条件成立(为true)时,执行语句块1的操作
否则,则执行语句块2 的操作
5、多重if结构

从页面输入一个考试成绩

如果 成绩 == 100 :奖励一台 兰博基尼
如果 成绩 >= 90 :奖励一台 法拉利
如果 成绩 >= 80 :奖励一台 奥迪A8
如果 成绩 >= 70 :奖励一台 奥拓
如果 成绩 >= 60 :奖励一台 自行车
如果 成绩 <60 :奖励 俩大嘴巴子

语法:
if(条件1){
语句块1;
}else if(条件2){
语句块2;
}else if(条件3){
语句块3;
} ... else{
//该块 可以根据条件灵活添加
语句块n ;
}

克莱托指数:体重(kg) / (身高(m) * 身高(m))
90 / (1.84*1.84)

结果:
20 ~ 25 正常
< 20 : 偏瘦
> 25 : 偏胖

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:13   其中:访客  13   博主  0

  1. avatar 米粒博客 4

    好好学习 希望博主成为高手中的高手 以后有啥问题 就找你了

  2. avatar LouisKW 5

    大神求指导

  3. avatar 小C博客 2

    过来学习下,巩固下!!

  4. avatar 生晓's blog 4

    过来学习啊

  5. avatar 563、 5

    学习学习

  6. avatar 给你吧网盘 0

    你这模板不错,