day8-初识JavaScript

最新推荐文章于 2024-10-18 17:51:23 发布

宠溺怪

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量40

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/jkkxc/article/details/131471287

版权

1.什么是JavaScript

前端三剑客: html css JavaScript
    html: 网页的组成/内容的展示 --> 身体
    css: 网页的样式/排版布局美化 --> 衣服/化妆品
    JavaScript:  动态效果/网页交互 --> 技能/行为

java 和 JavaScript的关系:
    两者没有直接关系,当年差点合同,没谈成. 当年/现在java都是一门非常火爆的语言. js的作者为了蹭java的热度,所以就给自己的语言取名为: JavaScript
硬要来说,语法上js不像java更像C语言.

我们后续的开发.主要涉及到的前端知识点 html/js
    1.写爬虫的时候,需要了解网页的组成,有什么容器/标签 (html标签,选择器)
    2.写后端数据,前后端交互的时候.就需要js来进行消息的传递

Script: 脚本
JavaScript能做什么:
    1.网页的动态效果
    2.前后端交互 -- 数据提交(弹窗/输入框/监听事件)
    3.进阶 -- 前端高级框架(Vue.js React.js Node.js) VR/AR开发(Three.js)

html/css --> 不是编程语言
JavaScript --> 是一门正式的编程语言.并且语法概念和python/C语言有一定的重复.
    所以各位有python基础的前提下.学习js是事半功倍的.过程中也是复习了基本语法
    但是写的时候切记.要分开两者的语法

2.JavaScript的组成

ECMA Script --> ES --> 简称ES.可以理解为是js的语法版本.最新版本是ES13.不过我们不需要用到那么新.教学内容基于ES6
BOM --> Browser object model --> 浏览器对象模型.通过js来操作浏览器(弹窗/输入框/交互)
DOM --> Document object model --> 文档对象模型.用js来操作网页里的内容(网页里的所有内容都称为文档)

js的书写方式和css类似.也有内部写法和外部写法
    内部写法在html中.写一对script标签.再把js内容写到里面
        <script> js 代码</script>
    外部写法就是创建一个专门的js文件.通过script里的src属性引入. 写在该标签里的js代码是无效的
        <script src='js文件路径'></script>

js的代码最好写在网页内容的最后/body的最后 --> 
    代码执行是从上往下ode.如果位置不对,就可能出现先执行js代码,再出现内容的情况

src除了本地文件外,还可以通过网络路径来导入
    https://www.bootcdn.cn/

console.log的输出内容是在控制台显示.不是在网页里. 它主要是测试/调试内容.   怎么进入控制台
    1.按下F12 / 右键检查 --> 选择控制台/console
    2.快捷键  ctrl + shift + j

3.js基本输入输出

单行注释:    // 注释内容
多行注释:   /* 注释内容 */

输出语句:
    document.write: 在网页里写一行内容.能够识别标签.字符串需要用引号包裹,数字不用
        语法格式:
            document.write(内容)
        案例代码:
            document.write(666)
                document.write('你好啊')
                document.write('<hr>')
                document.write('<b>多喝水</b>')

    alert: 弹窗,在网页里显示一个弹窗
        语法格式:
            alert(内容)
        案例代码:
            alert('#096')

    console.log: 在控制台输出日志. 在控制台里输出信息(主要用来调试测试内容)
        语法格式:
            console.log(内容)
        案例代码:
            console.log(11520)
            console.log('鲜花掌声')
        
输入语句:
    prompt: 在进入网页时,弹出输入框.可以让用户输入内容.输入框里可以放提示文本
        语法格式:
            prompt()
            prompt('提示文本')
        案例代码:
            prompt('你有对象吗?')

    可以用输入进行赋值.  prompt得到的数据类型为字符串类型
        let name = prompt('请输入你的名字')
        alert('欢迎你'+name)

4.js变量基本概念

何为变量:
    一个用来存储数据的容器.里面的数据可以改变
    把一段常用的数据保存起来,取个名字.方便后续使用

变量名规范:
    1.由数字,字母,下划线_,美元符号$组成 (中文不推荐)
    2.区分大小写 Name name
    3.不要用关键字命名 if for break 
    4.见名知意

var/let = 声明符/标识符. 在声明变量前需要加上
let = ES6新出的语法.作用和var类似.不过在一些细节上会规范(后面解释)

变量的使用:
    1.声明变量
        let  变量名   //   声明一个空变量,没有赋值
        let 变量名 = 变量值  // 声明一个变量,并赋值

        let age
        let name = '七零'

    2.声明多个变量
        let 变量名=变量值,变量名=变量值
        let sex='男',marry = '已婚'

    3.使用变量/输出变量
        输出语句(变量名)
        alert(变量名)
        document.write(变量名)
        console.log(变量名)

    4.输出多个变量
        输出语句(变量名,变量名)
        document.write(变量名,变量名)
        console.log(变量名,变量名)

    5.用输入语句给变量赋值
        let 变量名 = prompt()
        let name = prompt('请输入你的名字')
1.直接写   变量名 = 变量值.  不写let,它不会报错.但这样不规范.
2.变量如果声明了.没赋值的情况下调用.它的值为undefined,未定义.不是报错

5.js基本数据类型

为什么要区分数据类型:  为了更好的管理/区分/使用数据. 所以对数据进行分类

js中查看数据类型 -- typeof
console.log(typeof 数据)
console.log(name, typeof name)

number(数值类型)

主要用于数学计算,数值数字使用. 它包含了整数,小数,正数,负数(不区分int和float) --> 年龄/身高/金钱
    let 变量名 = 数字
    let age = 27
    let height = 177.5

string(字符串)

主要用来显示文字内容. 表现形式为用一对 单' 双" 反` 引号包裹起来的数据 --> 姓名,性别,地址

    let 变量名 = '字符'
    let 变量名 = "字符"

    let name = '谢霆锋'
    console.log(name,typeof name)

    1.引号不能混用. 必须单+单 双+双 反+反
        let name = '麒麟" // 错误

    2.反引号是作为模板字符串来使用(格式化输出). 让我们可以更好的输出一些带变量的数据.模板字符串只能反引号使用.单/双都不行
        `字符${变量}字符`
        console.log(`你好.我是${name}我今年${age}岁`)

boolean(布尔类型)

布尔类型主要作用于逻辑判断.判断真/假  只有两个值true/false
    let 变量名 = true
    let 变量名 = false
    let is_vip = true
    console.log(is_vip, typeof is_vip)

undefined(未定义)

undefined既是值也是一种类型.指的就是未定义.当声明变量没有赋值时.它的值和类型都为undefined
    let 变量名
    let test
    console.log(test,typeof test)

null(空)

null和python里的None类似.表示的就是为空,没有东西. 输出类型为 空对象object
    let gf = null
    console.log(gf,typeof gf)

6.js转义字符

在js语法中,有特别含义的字符,网页遇到它会做特别处理
    \n : 换行
    \t  :制表符/缩进
    \\ : 正常输出一个斜杠
    \' : 正常输出一个引号

js没有原始字符串.不能像python那样在字符串前加个r取消转义
转义字符主要是用在console.log里

7.js类型转换

在开发/学习过程中.经常会遇到把一个数据转为其他类型再使用的这种情况.此时就需要类型转换
    console.log(1+'1')
    console.log(1-'1')

隐式类型转换:
    程序的一些类型运行过程中会自动的进行转换.尤其是在字符串和数值进行交互时.
        +好优先理解为拼接, 其他就是正常的数值运算

强制类型转换:
    手动的把数据转为指定的数据类型
    Number(数据) -- 把数据转为number类型
        如果数据转换视为,结果为NaN.NaN也是number类型.表示的是  非数字 Not a Number
            parseInt(数据) -- 把数据转为数值,只取整数
            parseFloat(数据) -- 把数据转为数值,保留小数

    String(数据) -- 把数据转为string类型
    Boolean(数据) -- 把数据转为boolean类型. 在转换时,有值为真,无值为假(0,-0,null,undefined)

8.运算符

运算符 = 带有特定功能的符号

算术运算符: + - * / %
    % 取余数: 10%3 == 1 --> 原理相当于让10-3.一直到减不下去位置.还剩多少,余数就为几 --> 10-3-3-3 还剩1.余数为1

逻辑运算符:
    && : 逻辑与  and.  当有多个条件时,都满足才为真
     || :  逻辑或  or. 当有多个条件时.满足一个就为真
    ! : 逻辑非  not. 杠精,和你反着

赋值运算符:
    =  += -= *=  /=

    a+=b  -->  a = a+b
    let i = 10
    i+=6  --> i = i+6

关系运算符: 
    ==  >  <  >=  <=

单目运算符:
    ++ / --  自增/减1
    ++在前,先自增,再赋值;  先+1再执行程序
    ++在后,先赋值,再自增;  先运行程序再+1

        let i = 10
        i++
        ++i
    单独写i++或++i都没区别.都会+1.但是放到输出语句里就会有区别