JavaScript基础语法什么是JavaScript(简称js)
1. 首先要了解前端页面的组成(前端页面的三层结构)
● HTML 表示了你的页面内有什么,组成页面的骨架 (结构层)
● CSS 表示了你的页面中每一个内容是什么样子的(样式层)
● JavaScript(简称js) 表示了你的页面中每一个内容如何发生变化, 有什么行为内容(行为层)
2. JavaScript
是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。
JavaScript的组成
1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2. BOM (Browser Object Model): 浏览器对象模型
● 有一套成熟的可以操作浏览器的 API,通过 BOM 可以操作浏览器。比如: 弹出框、浏览器跳转、获取分辨率等
3. DOM (Document Object Model): 文档对象模型
● 有一套成熟的可以操作页面元素的 API,通过 DOM 可以操作页面中的元素。比如: 增加个 div,减少个 div,给 div 换个位置等
总结: JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果
JavaScript的执行环境
● JavaScript 程序不能独立运行a标签禁止跳转,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码
JavaScript代码的书写位置
● 和 css 一样,我们的 js 也可以有多种方式书写在页面上让其生效
● js 也有多种方式书写,分为 行内式, 内嵌式,外链式
第一段 JS 代码
● 在开始之前, 我们先来学习第一段 js 代码
alert("hello world")
● 作用 : 在浏览器出现一个弹出框, 弹出框内显示的内容就是小括号内书写的文本
● 注意 : 小括号内的内容如果不是纯数字内容, 需要被引号包裹(单引号或双引号都可以)
行内式 JS 代码(不推荐)a标签
● 因为a标签有自己的跳转行为,这个是这个标签本身就有的,当我们点击的时候会自动跳转到指定的页面
● 我们只要在a标签的herf属性的位置写上javascript:;就不会跳转
● 我们在冒号和分号之间写上js代码,就会执行我们写的这个js代码
点击一下试试
非a标签
● 如果是非a标签,本身不具备这个跳转的能力,我们就需要认为的赋予它这个能力
● 先学第一个能力,onclick,这是一个点击的行为
● 在值的位置, 直接书写 js 代码就行, 不需要 javascript:; 了
● 写在标签上的 js 代码需要依靠事件(行为)来触发
点一下试试看
内嵌式 JS 代码(不推荐)
● 内嵌式的 js 代码会在页面打开的时候直接触发
alert('我是一个弹出层')
● 注意 :
1. script 标签对内的代码不需要任何行为, 打开页面就会执行
2. script 标签对原则上可以书写在页面的任意位置
● 推荐放在 head 标签的末尾或者 body 标签的末尾
● 目前我们推荐放在 body 的末尾
3. 一个页面原则上可以书写任意多个 script 标签
● 会按照从上到下的顺序依次执行每一个 script 标签中的代码
外链式 JS 代码(推荐)
● 外链式代码是书写在一个 .js 的文件内
● 外链式 js 代码只要引入到了 html 页面中,就会在页面打开的时候直接触发(解析)
● 新建一个 .js 后缀的文件a标签禁止跳转,在文件内书写 js 代码,把写好的 js 文件引入 html 页面
● 注意 :
1. 外链式 js 代码不需要任何行为, 打开页面就会执行
2. script 标签对原则上可以书写在页面的任意位置
● 推荐放在 head 的末尾或者 body 的末尾
● 目前推荐放在 body 的末尾
3. 一个页面可以书写任意多个 script 标签
● 会按照从上到下的顺序依次执行每一个 script 标签
4. 一个 script 标签当你书写了 src 属性以后, 表示你要把他当做外链式使用
● 那么此时就不能在当做内嵌式使用了, 写在标签对内的内容没有意义了
● 只要你写了 src 属性, 不管值的位置是否书写地址, 内嵌式都没有意义了
5. 一个页面中可以同时存在外链式和行内式,执行的顺序还是按照你script标签的书写位置先关,写在上面的先执行
JavaScript 基础 - 引入方式
// 此处的代码会被忽略掉!!!!
// 不管你有没有写demo.js。
// 只要看到 src 属性浏览器就会当做外链式来解析。
// 你写在 script 标签中的代码就不起作用了
alert(千锋欢迎您);
JS 中的注释
● 学习一个语言, 先学习一个语言的注释, 因为注释是给我们自己看的, 也是给开发人员看的
● 写好一个注释, 有利于我们以后阅读代码
● JavaScript 支持两种形式注释语法:单行注释、多行注释
单行注释
● 一般就是用来描述下面一行代码的作用
● 可以直接写两个 / ,也可以按 ctrl + /
...
基础-注释
// 这种是单行注释的语法
// 一次只能注释一行
// 可以重复注释
alert('嗨,欢迎来千锋学习前端技术!');
多行注释
● 一般用来写一大段话,或者注释一段代码
● 可以直接写 /* */ 然后在两个星号中间写注释
○ 各个编辑器的快捷键不一样,vscode 是 Alt + shift + a
...
基础-注释
/*
这是多行注释的语法
*/
/*
注释的代码不会执行
alert('我是一个弹出层')
alert('我是一个弹出层')
*/
alert('欢迎您的到来')
变量(重点)
● 变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆,通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】(数据)
● 变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
● 也就是说,我们向内存中存储了一个数据,然后要给这个数据起一个名字,为了是我们以后再次找到他
● 语法: var 变量名 = 值
———END———
限 时 特 惠: 本站每日持续更新海量各大内部创业教程,一年会员只需98元,全站资源免费下载 点击查看详情
站 长 微 信: wxii2p22