JavaScript基础_第一天学习

初识JavaScript

作者

布兰登·艾奇(Brendan Eich,1961年~)。
神奇的大哥用10天完成 JavaScript 设计。
最初命名为 LiveScript,后来在与 Sun 合作之后将其改名为 JavaScript。

是什么

JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思)
脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行
现在也可以基于 Node.js 技术进行服务器端编程

作用

  1. 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
  2. 网页特效
  3. 服务端开发(Node.js)
  4. 桌面程序(Electron)
  5. App(Cordova)
  6. 控制硬件-物联网(Ruff)
  7. 游戏开发(cocos2d-js)

与HTML和CSS的关系

HTML/CSS是标记语言(描述类语言)

  • HTML决定网页的结构和内容,相当于人的身体
  • CSS决定网页呈现给用户的模样,相当于给人穿衣服、化妆

JS脚本语言(编程类语言)

  • 实现业务逻辑和页面控制(决定功能),相当于人的各种动作

浏览器执行JS简介

浏览器分为两部分:渲染引擎和js引擎

  • 渲染引擎:用来解析HTML和CSS,俗称内核,比如Chrome的blink
  • js引擎:也成为js解释器,用来读取网页中的js代码,对其处理后运行,比如Chrome浏览器的V8

浏览器本身并不会执行js代码,而是通过内置JavaScript引擎(解释器)来执行js代码,js引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。

JS的组成

通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等等)

  • BOM(Browser Object Model)浏览器对象模型

通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

JS初体验

  1. 行内式js
  2. 内嵌js
  3. 外部js文件

JavaScript注释

 // 1、单行注释 快捷键 Ctrl + / 
/* 2、多行注释 
快捷键 shift + alt + a*/

JavaScript输入输出语句

 // 这是一个输入框
 prompt('请输入你的姓名');
 // alert警示框 输出的 展示给用户的
 alert('弹出的警示框');
 // console 控制台输出 这是给程序员看的
 console.log('这是给程序员看的')

变量

声明、赋值、初始化

 // 1、声明了一个age的变量
 var age;
 // 2、赋值 把值存入这个变量中
 age = 21;
 // 3、输出结果
 console.log(age);
 // 4、变量的初始化
 var myname = '离一';
 console.log(myname);

命名规范

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

数据类型

分类

  1. 原始类型
  2. 引用类型

原始类型

字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)

引用类型

所有的对象都是引用类型,包括Boolean、Number、String、Array、Date、Math等,其中Boolean、Number、String既可以是原始类型也可以是引用类型。

获取数据变量类型

获取方法

typeof可用来获取检测变量的数据类型

 var num = 1;
 console.log(typeof num)    //输出 number

字面量

字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。

  • 数字字面量:8, 9, 10
  • 字符串字面量:’离一博客’, “大前端”
  • 布尔字面量:true,false

数据类型转换

使用表单prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。

转换为字符串

方式 说明 案例
toString() 转换为字符串 var num = 1; alert(num.toString());
String()强制转换 转换为字符串 var num = 1; alert(String(num));
加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1; alert(num + ‘我是字符串’);

 

  • toString() 和 String() 使用方式不一样。
  • 三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。
  • 使用加号运算符转换字符串,实际上也是调用toString()方法。只不过是JavaScript自动调用toString()方法实现的

转换为数字型(重点)

方式 说明 案例
parseInt(string) 将string类型转换为整数数值型 parseInt(’78’)
parseFloat(string) 将string类型转换为浮点数数值型 parseFloat(‘55.12’)
Number()强制转换函数 将string类型转换为数值型 Number(’12’)
js隐式转换(- * /) 利用算数运算符转换为数值型 ’12’ – 0
  • 注意 parseInt 和 parseFloat 单词的大小写,这2个是重点
  • 隐式转换是我们在进行算数运算的时候,JS 自动转换了数据类型

转换为布尔型

方法 说明 案例
Boolean()函数 其他类型转成布尔值 Boolean(‘true’)
  • 代表空、否定的值会被转换为 false ,如 ”、0、NaN、null、undefined
  • 其余值都会被转换为 true

评论

  1. 离一 博主
    Android Chrome
    4周前
    2021-4-18 20:03:07

    使用加号拼接字符串时,如果拼接的是函数或者数组之类的,返回的值会有所不同

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇