web学习笔记(九)

简介: web学习笔记(九)

1.初识JS(JavaScript)

1.1什么是JavaScript?

JS是web开发领域功能强大的编程语言(脚本语言),javaScript不需要配置环境,浏览器直接可以运行。

1.2HTML5 CSS3  javaScript三者的关系

  • A:  HTML结构  用语义化的角度来描述页面。
  • B:CSS样式  用审美的角度来美化页面。
  • C: js交互(行为) 从交互的角度来提升用户体验。

1.3   JAVAScript的作用

  • 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)[ɪˈlektrɑːn]
  • App(Cordova)[kɔrˈdoʊvə]
  • 控制硬件-物联网(Ruff)[rʌf]
  • 游戏开发(cocos2d-js)

1.4JAVAScript的组成部分

  1.  JAVAScript核心语法( ECMAScript) 主要练习逻辑思维能力
  2.  DOM(Document Object Model) 文档对象模型
  3.  BOM(Browser Object Model)浏览器对象模型

1.5JS注释

A:单行注释

格式:// 我是一行文字,不想被 JS引擎 执行,所以 注释起来

// 用来注释单行文字( 快捷键 ctrl + / )

B:多行注释

格式:/* 获取用户年龄和姓名 并通过提示框显示出来 */

/* */ 用来注释多行文字( 默认快捷键 alt + shift + A )

1.6内核和引擎

浏览器分为两部分:渲染引擎和js引擎

(1)渲染引擎(俗称内核)来解析 html和css  浏览器中靠内核来渲染页面

(2)JS引擎 ---来解析js     浏览器中靠js引擎(js解释器)

开发商 浏览器 内核 引擎

Google

chrome

 webkit

v8

微软公司

IE

Trident

SpiderMonkey

Mozilla公司

Firefox

 Gecko

Chakra

1.7补充知识

  1. 给超链接跳转地址设置为javascript:; 是为了阻止超链接的默认跳转地址,这样点击超链接页面不会重复刷新,增强了代码规范性。
  2. JavaScript和ECMAScript的关系:网景公司在96年左右就将JavaScript内置在自家的NetScape浏览器中,同年,微软公司也开发了和JScript,内置于IE3.0。网景公司产生了危机感,将JavaScript提交到了ECMA国际(欧洲的计算机协会),想让JavaScript成为国际标准,ECMA国际将两者结合(基础语法用JavaScript,DOM用JScript的),做了一个统一的规范,起了名字叫ECMAScript。

2.JS的引入方法

2.1行内式

  在标签内部进行编写JS代码(较少使用)

格式:

<button onclick="alert('警告')">单击</button>

2.2嵌入式(内嵌式)

可以在页面的任意位置插入,语句结束要记得加分号,一般习惯写在</body>之前。

格式:

   <script>
            alert('很好');
            // 语句用分号结束
        </script>

2.3外链式

需要另建.js文件,然后将文件引入 引入位置无所谓 在哪儿都行。

引入格式:

<script src="../JS/01.js"></script>

3.输入和输出

3.1输入

格式:prompt('请输入','某某') ;  

  • 第一个参数表示提示性文字
  • 第二个参数表示默认输入的内容,可以省略不写
  • 是一个有返回值的函数
  • 当点击取消时返回null
  • 只编写输入语句无法在页面查看运行效果,通常搭配定义变量语句和输出语句一块使用
 var bianliang= prompt('请输入','某某') ; 
            console.log(bianliang); 

3.2输出

  1.   alert();      弹出一个警告框,是一个函数,但这个函数没有返回值。
  2.  console.log();   在控制台输出    用的比较多,多个控制台输出语句之间会用一条线分割起来,同样是一个没有返回值的参数。
  3.    document.write()    表示 在文档输出,输出语句在页面中直接显示。可以在引号内写入css样式,此时换行不用\n,需要用<br>来表示换行,也是一个没有返回值的参数。

3.3确认框

confirm('真的要删除吗?')

单击确认返回true ,单击取消返回false;

3.4语法规定

  1. 区分大小写,大写的话会报错。            
  2. 每一条语句结束后要加结束符;
  3. 对空格 缩进 换行不敏感
  1.  符号必须是是英文半角

3.5补充知识点

  • F12可以直接打开控制台
  • " "和' '表示原样输出引号内的内容,需要输出变量的话就不加引号。
  • 引号可以嵌套,双套单或单套双 如果需要双套双或单套单则需要用\来进行转义。
console.log('\'引号嵌套\'');
  • js在执行时当发现一个错误代码时将自动终止执行后续代码。
  • 在字符串中不能直接打回车换行,否则会报错。可以用\n来换行。
  • 在字符串中直接打\也出不来,需要进行转义,\\才能显示在页面中出现一个反斜杠


  • 三种弹出框:(1)   alert();  警告框  没有返回值      (2)   prompt('' [默认值])   输入框 有返回值。单击确定,返回输入的值,如果单击取消,则返回null;    (3) confirm('您真的要删除吗?');  单击确认输出true;单击取消输出false
  • alert("");和 console.log('');可以添加\n来换行   或者\r\n
  • document.write("");用<br>换行,这个输出语句还可以解析html标签   \ 用来转义特殊字符
  • ES6新增 `  ` 反引号,  反引号里面的换行不会报错
  • 在控制台输出的时候可以给字符串前面加上%c,这样就可以给字符串定义css样式了。


相关文章
|
28天前
|
JavaScript
web学习笔记(二十)
web学习笔记(二十)
18 0
|
28天前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
21 0
|
28天前
|
存储 JSON JavaScript
web学习笔记(二十八)
web学习笔记(二十八)
20 0
|
28天前
web学习笔记(二十七)PC端网页特效
web学习笔记(二十七)PC端网页特效
16 0
|
28天前
|
JavaScript 前端开发 Go
web学习笔记(二十六)
web学习笔记(二十六)
19 0
|
28天前
|
JavaScript 前端开发 内存技术
web学习笔记(二十五)BOM开始
web学习笔记(二十五)BOM开始
19 0
|
28天前
|
JavaScript
web学习笔记(二十四)
web学习笔记(二十四)
19 0
|
28天前
|
JavaScript 前端开发
web学习笔记(二十三)
web学习笔记(二十三)
47 0
|
28天前
|
XML JavaScript 前端开发
web学习笔记(二十二)DOM开始
web学习笔记(二十二)DOM开始
17 0
|
28天前
|
JavaScript 前端开发
web学习笔记(二十一)
web学习笔记(二十一)
20 0