JS--基本语法

卷不动的程序员

于 2024-07-03 14:04:55 发布

阅读量918

点赞数 14

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_49018210/article/details/140150585

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、为什么要学习javascript

了解js的特性（优势）
- 解释性
  - js是一种解释性语言，源代码不需要经过编译，直接在浏览器上运行时被解释
  - 目前所有的浏览器都支持javaScript语言，并且是默认的
- 基于对象和事件驱动
  - js可以直接对用户或客户的输入做出响应，无需经过web服务器
  - js对客户的响应，是以事件驱动的方式进行的
    - 所谓事件驱动，指的是在页面中执行了某种操作所产生的动作，此动作称为事件，比如点击按钮、失去光标等等
- 跨平台
  - js依赖于浏览器本身，和操作系统无关，只要能运行浏览器的计算机，并且支持JavaScirpt的浏览器都可以正确执行
JavaScript能干什么
- 实现页面动态效果，让你的页面动起来，拥有于用户交互的功能，比如层的切换、树形菜单、弹出框等等
- 表单页面的各种验证，减轻服务器的压力，比如注册表单验证
- 动态改变页面内容，动态创建页面元素，动态改变表格内容等

二、js脚本的基本结构

<script language="JavaScript">//language="javaScript"可以省略
    //使用JavaScript脚本循环输出HelloWorld
    for (let i = 0; i < 5; i++) {
        document.write("<h1>HelloWorld</h1><br>")
    }
</script>

JavaScript脚本可以插入到<head>或<body>标签中，被包含在<script>标签中
第一部分：<script language="JavaScript">告诉浏览器下面是JavaScript脚本，开头使用<script>标签，表示这是一个脚本的开始，

language="JavaScript"是JavaScript告诉浏览器用的是哪种脚本语言
第二部分是JavaScript的脚本，实现具体的功能
第三部分是</script>，代表脚本语言结束
document.write("向页面写东西")：JavaScript语言有大量的内置对象，不需要自己创建，需要的时候直接使用
JavaScript是基于对象的语言，标识符大小写敏感，每句代码以分号结束
注释：和java一样，单行注释//，多行注释/* */

三、html文档中引用JavaScript脚本的三种方式

回顾：html中引用css的三种方式
- 行内样式：
```
<span style="color:red;font-size:16px">一句话</span>
```
- 内部样式：在head标签中写在style标签内
- 外部样式：<link rel="" href="">
html页面内嵌js代码
- 在head或body标签中添加script标签，在script标签中写js脚本

行内使用

<button οnclick="alert('就是这样行内使用js')">点击</button>

引用外部的js文件
- 在当前页面的外部定义一个js文件，后缀名是.js，里面直接编写js脚本
- 在页面的head或body标签中通过script标签的src属性引入
- ```
<script src="util.js"></script>
```
- 注意：内部如果再写script代码页面不执行

四、变量的声明和赋值

//先声明后赋值
let num;
num = 10;
//边声明边赋值
let name = "张三"
let sex = "男"
document.write(name + "性别是：" + sex)
//不声明，直接赋值（这种方式不推荐使用）
str = "hello"
alert(str)

JavaScript是一个弱语言，使用let关键字来声明变量，声明变量时，不需要指明是什么数据类型，根据所赋的值来决定是什么数据类型，使用变量前要先声明

五、数据类型

基本类型

//数值型：number，包含整数和小数
let i = 10;//定义了一个数值型变量
let f = 5.2; //定义了一个浮点型的数值型变量
let num = NaN;//定义了一个not a number，当计算结果不是数值时的数据类型
let num2 = Infinity;//定义了一个无限大的数值
//typeof()：判断数据类型
alert(typeof num2)

//字符串类型：string，以双引号或者是单引号括起来的任意文本
let name = "刘备";
let sex = '男';
alert(typeof sex)

//布尔类型：boolean，值只有true和false
let flag = true;

特殊类型

//未定义的数据类型：undefined，声明了变量未赋值
let a;
alert(typeof a); //undefined

复杂类型

//复杂类型：object
//声明对象
let student = {
    name: "小乔",
    age: 18
};
let emp = new Object();//声明了一个空对象
emp.empno = 1;//给对象赋值
emp.ename = "大乔";
alert(typeof student);
//声明数组
let arr1 = [];//声明了一个数组
arr1[0] = "a";
arr1[1] = "b";
let arr2 = [1,2,3];//声明数组并赋值
let arr3 = new Array();//声明数组
arr3[0] = "李明";//给数组赋值
arr3[1] = "王浩";
alert(typeof arr2)//object
//声明日期
let date = new Date()
alert(typeof date);//object

let b = null;
alert(typeof b);//object

判断数据类型的方法typeof，返回值有
- number：数值型
- string：字符串类型
- boolean：true或false
- undefined：声明但是未赋值
- object：JavaScript中的对象、日期、数组和null

数据类型之间的隐式转换

let num = 100;
let str = "hello";
let f1 = true;
let f2 = false;
//数值型+字符串型：转化为字符串类型
alert(num + str);//100hello
//数值型+布尔类型：布尔的值true转化为1，false转化为0，再和数字相加
alert(num + f1);//101
alert(num + f2);//100
//字符串类型+布尔类型：布尔的值转化为字符串true或false，再和字符串相连
alert(str + f1);//hellotrue
alert(str + f2);//hellofalse
//布尔类型+布尔类型：布尔的值true转化为1，false转化为0，再相加
alert(f1 + f2) //1

六、运算符（基本和java中一样）

算数运算符：+ - * / % ++ --

比较运算符：> < >= <= != ==(值相等即为true) ===(当值和数据类型都相等才为true)

let num = 20;
let str = "20";
let str2 = "20";
alert(num == str);//true
alert(num === str);//false
alert(str === str2);//true

逻辑运算符：&& || !
三目（三元）运算符：？：
赋值运算符：= += -=

七、流程控制语句（和java一样）

if
if - else
if - else if - ...else
switch - case
fori
while
do-while
break
continue

八、各种弹出框

alert("提示信息")：只有一个确定按钮的警示或警告框

confirm("提示信息")：带有确定和取消按钮的提示框，返回值为boolean类型，点击确定返回true，点击取消返回false

    let flag = confirm("确定删除吗？");
    if (flag) {
        alert("删除成功")
    } else {
        alert("取消删除")
    }

prompt("提示信息"，"输入框中的默认信息")，返回值为输入框中的内容

let num = prompt("你想输出几次hello？",5);
for (let i = 0; i < num; i++) {
    document.write("hello   ")
}

卷不动的程序员

关注

14
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JS--基本语法

第一部分：<script language="JavaScript">告诉浏览器下面是JavaScript脚本，开头使用<script>标签，表示这是一个脚本的开始，JavaScript是一个弱语言，使用let关键字来声明变量，声明变量时，不需要指明是什么数据类型，根据所赋的值来决定是什么数据类型，使用变量前要先声明。所谓事件驱动，指的是在页面中执行了某种操作所产生的动作，此动作称为事件，比如点击按钮、失去光标等等。prompt("提示信息"，"输入框中的默认信息")，返回值为输入框中的内容。
复制链接

扫一扫