JS第一课（6.27）

最新推荐文章于 2024-08-14 10:08:54 发布

qing_mang

最新推荐文章于 2024-08-14 10:08:54 发布

阅读量113

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qing_mang/article/details/125481335

版权

1.js是一门解释性的、基于对象、动态性的、跨平台的、弱声明类型的、单线程的脚本语言。

2.输出一个弹窗

bom的三种输出方式
alert("我是一个弹窗")  //输出警告框
confirm("确认？")      //确认框
prompt("text")         //带文本的确认框

3.在控制台输出内容

console.log("hello world");

console.warn("hello world"); //显示警告框

console.error("hello world"); //显示错误框

document.write("hello world"); //在窗口显示

2.js引入方式、词法结构、运行原理

（1）三种引入方式（页面内任何地方都可以引入）

外部引入——习惯在head里面输入

<script src="**.js"></script>

行内引入——

<div onclick="alert('点击了当前的dom')">点击</div>

页面内引入——习惯在body里面写

<script></script>

习惯的原因：因为代码是自上而下、逐行解析的，优先解析head部分...

（2）词法结构

一定要按照js的语法规则书写代码

分号可加可不加（建议加上）原理：js解释器在逐行解释代码的时候，遇到回车会自动补全分号例如：alert("hello");alert("hello2")

注：单行输入代码，必须加上分号

注释问题（//单行注释 /*多行注释*/）

（3）js的运行原理

js是单线程的脚本语言，代码从上往下逐行解释执行

3.直接量和变量

（1）直接量（字面量）

"hello world" true false 100 undefined null {} []

var a
console.log(a)
变量去保存直接量（字面量）
num123 = "hello world"
console.log(num123) // hello world

num123 = true
console.log(num123)  // true

num123 = 100
console.log(num123)  // 100
// 无害
var num123 = false
console.log(num123)  // false
变量提升（原理：js解释器 var 把声明提升到顶部）
var num123
console.log(num123)  // false
经典案例：
console.log(ab)
ab = 123
console.log(ab)

4.标识符（命名规范）

-1、用来对函数和变量进行命名

-2、js代码中某些循环语句中的跳转位置的标记

(1).js支持utf-8 --包含了地球上所有的语言

例如：var 国家 = "中国" console.log(国家)

(2).不能使用系统关键字和保留字，不能超过255个字符

例如：var if = "if" console.log(if)×

var window = "zhan" 不能使用宿主机保留的关键字 console.log(window)

(3).区分大小写

例如：var boy = "张三" var Boy = "李四" console.log(boy)

(4).不能包含特殊字符

例如：var b!@ = "不能特殊字符"

(5).建议：驼峰命名法

(6).建议：见名知意

(7).不能以数字打头

(8).可以使用 $ _ 字母开头

5.数据类型

五种基本数据类型/一种引用数据类型

基本数据类型：

undefined null string Boolean number

引用数据类型

object（细分：function array object）

检测数据类型 typeof 用法：console.log(typeof 变量名)

语法 typeof 变量名

typeof(变量名)

// 基本数据类型
        var navigetion
        // undefined类型
        navigetion = undefined
        console.log(navigetion)
        console.log(typeof navigetion)
        // null类型
        navigetion = null
        console.log(navigetion)
        console.log(typeof navigetion)
        // string类型
        navigetion = "南京"
        console.log(navigetion)
        console.log(typeof navigetion)
        // Boolean类型
        navigetion = true
        console.log(navigetion)
        console.log(typeof navigetion)
        // number类型
        navigetion = 123456789
        console.log(navigetion)
        console.log(typeof navigetion)
// 引用数据类型
        navigetion = {}
        console.log(typeof navigetion)
        navigetion = []
        console.log(typeof navigetion)
        navigetion = function(){}
        console.log(typeof navigetion)

6.四则运算

赋值运算 =

算术运算 + - * / % ()

var res
       res = 1 + 1
       console.log(res)     // 2
       res = 1 - 1
       console.log(res)     // 0
       res = 5 * 4
       console.log(res)     // 20
       res = 4 / 2
       console.log(res)     // 2
       // 取模就是取余
       res = 5 % 3
       console.log(res)     // 2
       res = 2 * ( 1 + 1 )
       console.log(res)     // 4
       res = (123+45*78)/(34+543) - 9*(324 -34)
       res = (6 + 1000%7)%7
       console.log(res)

7.dom事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid;
            position: absolute;
            top: 100px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
</body>
<script>
    //1.获取dom元素
    var box = document.getElementById("box")
    console.log(box)
    // 绑定一个点击事件
    box.onclick = function() {
        // 把背景色改成红色
        box.style.backgroundColor = "red"
        box.style.borderWidth = "10px"
        box.style.borderStyle = "dashed"
    }
</script>
</html>