初识Javascript

最新推荐文章于 2024-08-14 15:45:18 发布

哦！好巧，我也是

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量786

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_51311069/article/details/123985224

版权

JavaScript简介

什么是Javascript

Javascript是一个用于网页编程的脚本语言，需要解析执行（浏览器内置一个JS 解析引擎，来解析js,执行js）

javascript最终在浏览器运行

JavaScript和Java是什么关系?

JavaScript和Java没有一毛钱关系

从JavaScript的诞生史来看，当时JavaScript想要借助Java的东风才在名字中加了Java

JavaScript都能干啥（作用）

搜索过滤轮播图倒计时选项卡等

js的作用：

1.让原来静态的网页变成动态网页

2.可以让网页具有交互功能

3.提升用户体验

4.可以让网页功能变得丰富

如何学习JavaScript

心态

JavaScript是个脚本语言,比其他编译型语言要简单一些

需要大量练习

学习资料

JavaScript高级程序设计

JavaScript权威指南

JavaScript语法

引入JavaScript到HTML

行内：<div onclick-“js代码”>

把html和js混在一起，容易混淆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入js的方式一：行内写法 ，这种写法把 html和js混淆在一起-->
    <div style="color: red;" onclick="console.log('欢迎新同学！')">欢迎新同学！</div>
</body>
</html>

内部：

script标签内部用来写js, jst也必须写在script标签内部，
script标签本身可以多次使用，
script标签可以放在html文档中任何位置，-般放在body标签内部的最下方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
    <!-- 引入js的方式二:内部写法，script标签内部用来写js, js 也必须写在script标签内部script标签本身可以多次使用,script标签可以放在HTML文档任何位置 一般放在body标签内部最下方-->
    <script>
        console.log('欢迎新同学！')
         console.log('欢迎新同学！')
         console.log('欢迎新同学！')
    </script>
</body>
</html>

外部： <script src="外部js文件的路径*>

最推荐，js代码单独写在一个外部s文件中,可维护性高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--引入js的方式三:外部引入 -->
    <script src="js/01-index.js"></script>
</body>
</html>

console.log('欢迎新同学！')

JS代码语法细节

写js要区分大小写

忽略空白字符(回车,制表符，空格)

注释：

支持两种注释用来解释代码的作用，js不会执行注释的内容（主食是给程序员看的，电脑不会执行）

单行注释：//注释内容

特点：只能注释当前所在行

所行注释：/* 注释内容*/

特点：也能当单行注释使用，用的多-些

关键字:

也叫保留字实际使用时必须写对，不能有拼写错误

参考：https://www.runoob.com/js/js-reserved.html

标识符：

用来给变量，函数名等起名字

命名规则：只能由字母数字下划线 $构成

不能以数字开头

不能和关键字冲突

规范的表示符命名：驼峰命名法
var. textTitle 小驼峰俞名法，从第二个单词开始，每个单词首字母大写
var. TxetTitle 大驼峰命名法

三种输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>jhfuhjzk官方vi了</h1>
    <!-- 点击button,执行document .write 输出的内容会覆盖页而原有的内容 -->
        <button onclick="document.write('我只在乎我在乎的你是否和在乎你的我在乎我在乎的你一样在乎在 乎你的我')">按钮</button>

    <script>
        
        // 第一种输出语句 console.log(需要输出的数据的内容)  比较常用
        console.log('我只在乎你在不在乎我开会坠毁 控制算法滴哦io 总发给好的hi哦组发hi哦害怕政府')
         // 第二种输出语句 console.log(需要输出的数据的内容) 
         alert('我只在乎你在不在乎我开会坠毁 控制算法滴哦io 总发给好的hi哦组发hi哦害怕政府') 
         // 第三种输出语句 console.log(需要输出的数据的内容) 
         document.write('我只在乎你在不在乎我开会坠毁 控制算法滴哦io 总发给好的hi哦组发hi哦害怕政府') 



         /* js中""和''没有区别，都是用来包裹一段文字，包裹的文字都会原样显示，需要注意的是，如果"中再包裹引号只能是单引号。如果单引号中在包裹引号只能是双引号*/






    </script>
</body>
</html>

console.log(需要输出的数据的内容) 输出到控制台

alert（需要输出的数据的内容）以弹框的形式输出到页面（弹框不关闭无法进行其他操作）

document.write(需要输出的数据的内容) 输出到页面（会覆盖原有页面内容）document.write的输出会解析标签

注意事项：

js中""和’'没有区别，都是用来包裹一段文字，包裹的文字都会原样显示，需要注意的是，如果"中再包裹引号只能是单引号。如果单引号中在包裹引号只能是双引号

“水电费看来手动阀上课了”

’是劳动法哈“萨克的返回实例'

`是劳动法哈萨克的返回实例`

双引号和单引号里面的是一个完整的字符串，内部文本不能换行

``反引号里面是一个完整的字符串，内部的文本可以换行

变量

变量就是想是一个盒子，里面装有数据（值）

声明变量

语法：var 变量名；

声明变量默认没有值（默认是undefined）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 声明变量
        // 声明一个变量
        var title;  //这个变量title里面默认装的是undefined
        

        // 申明两个变量
        var sex,age;//这两个变量sex,age里面默认装的是undefined
        
        console.log(title);
        console.log(sex,age);

        //给变量赋值（将一个新值保存到变量中）
        title='苹果在本月底会推出se3';
        sex=1;
        age=18;
        console.log(title);
        console.log(sex,age);
        
        
        
        
          // 声明变量并且赋值
        var desc = "该商品库存有限，起码会尽快下单！"
        console.log(desc);
        desc = "该商品已下架！"
        console.log(desc);
        
        
    </script>
</body>
</html>

var 变量名，变量名，…

var 变量名=值；

var 变量名=值，变量名=值，变量名=值…；

变量交换

思路一：

        num3=num1;
        num1=num2;
        num2=num3;

思路二：

num1 = num1 + num2;
num2 = num1 - num2;
num1 = num1 - num2;

数据类型

基础数据类型

字符串类似于“iPhone ’空空如也’ 去结算

数值类似:3.14 100 -3.14 -100

布尔类似: true false 例如：人的性别，是否包邮，

undefined 类似：undefined

null 类似：null

复合数据类型（引用数据类型）

object

哦！好巧，我也是

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Javascript

JavaScript简介什么是Javascript Javascript是一个用于网页编程的脚本语言，需要解析执行（浏览器内置一个JS 解析引擎，来解析js,执行js） javascript最终在浏览器运行JavaScript和Java是什么关系?JavaScript和Java没有一毛钱关系从JavaScript的诞生史来看，当时JavaScript想要借助Java的东风才在名字中加了JavaJavaScript都能干啥（作用）搜索过滤轮播图倒计时
复制链接

扫一扫